เนื้อหา
- ทำความเข้าใจ UI
- ใส่รหัสของคุณ
- รับภาพเคลื่อนไหว
- ต้องการคำแนะนำเพิ่มเติมเกี่ยวกับเครื่องมือแอนิเมชันใดที่ดีที่สุด
การเคลื่อนไหวมีบทบาทสำคัญมากในชีวิตของเรา สายตาและความสนใจของเราจะเปลี่ยนโฟกัสไปที่วัตถุที่กำลังเคลื่อนไหวโดยอัตโนมัติ เนื้อหาคงที่ไม่สามารถทำได้อย่างมีประสิทธิภาพ
ไม่เคยมีช่วงเวลาที่น่าตื่นเต้นสำหรับภาพเคลื่อนไหว CSS มาก่อน มันกลายเป็นเครื่องมือล้ำค่าในการสร้างอินเทอร์เฟซที่สวยงามและน่าดึงดูด แต่การสร้างการเคลื่อนไหวอย่างถูกต้องไม่ใช่งานเล็ก ๆ ดังนั้นการมีความช่วยเหลือจะไปได้ไกล นี่คือที่มาของ Animista
Animista เป็นทั้งคอลเลกชันของภาพเคลื่อนไหว CSS ที่สร้างไว้ล่วงหน้าและสนามเด็กเล่นที่คุณสามารถปรับแต่งและทดสอบได้ การทำเช่นนี้จะช่วยเร่งกระบวนการทำซ้ำแนวคิดภาพเคลื่อนไหวที่แตกต่างกันอย่างมากซึ่งเป็นหนึ่งในสิ่งที่ยอดเยี่ยมในการรวม Animista เข้ากับขั้นตอนการทำงาน
ทำความเข้าใจ UI
UI ของสนามเด็กเล่นของ Animista แบ่งออกเป็นสามส่วนหลัก ภาพเคลื่อนไหวจะถูกจัดเรียงเป็นหมวดหมู่กลุ่มและรูปแบบเชิงตรรกะทั้งหมดนี้อยู่ที่ด้านบนสุดของหน้าจอ
ตัวอย่างเช่นหากคุณกำลังมองหาภาพเคลื่อนไหวที่เหมาะสมสำหรับงานนำเสนอคุณมักจะต้องการเรียกดูหมวดทางเข้าและออก สมมติว่าคุณเลือกใช้ Slide-in คุณจะพบรูปแบบเพิ่มเติมเช่น Slide-in-Left, Slide-in-Right และอื่น ๆ ที่อยู่ด้านล่าง
การคลิกที่หมวดหมู่กลุ่มหรือรูปแบบจะเล่นภาพเคลื่อนไหวบนเวทีหลักทันที แต่ละหมวดหมู่กลุ่มและรูปแบบต่างๆได้รับการกำหนด URL ของตนเองซึ่งทำให้ง่ายต่อการบุ๊กมาร์กหรือแบ่งปัน
เวทีหลักคือที่ที่ภาพเคลื่อนไหวทั้งหมดเกิดขึ้น มีปุ่มสามปุ่มที่มุมขวาบน ปุ่มแรกคือปุ่ม Replay Animation (ไอคอนลูกศรวงกลม) ตามด้วยปุ่ม Add to Favorites (ไอคอนรูปหัวใจ) และปุ่ม Generate Code (ไอคอนวงเล็บปีกกา)
แผงตัวเลือกเป็นที่ที่คุณปรับแต่งแง่มุมต่างๆของภาพเคลื่อนไหว เมนูแรกคือเมนูแบบเลื่อนลงเลือกวัตถุที่ช่วยให้คุณสามารถสลับวัตถุเคลื่อนไหวกับวัตถุอื่นจากรายการวัตถุที่กำหนดไว้ล่วงหน้า ตามด้วยกลุ่มตัวเลือกที่สอดคล้องกับคุณสมบัติภาพเคลื่อนไหว CSS มาตรฐาน วิธีที่ดีที่สุดในการดูว่าแต่ละรายการมีผลต่อภาพเคลื่อนไหวอย่างไรคือการทดลอง
ใส่รหัสของคุณ
เมื่อคุณคุ้นเคยกับ UI แล้วคุณก็พร้อมที่จะเริ่มรวมเข้ากับเวิร์กโฟลว์ของคุณ เมื่อพูดถึงเวิร์กโฟลว์เมื่อพูดถึง Animista คุณสามารถเลือกระหว่างสองอย่างขึ้นอยู่กับความชอบและความต้องการของคุณ
ทีละครั้ง
เมื่อคุณเห็นภาพเคลื่อนไหวที่คุณชอบเพียงคลิกปุ่มสร้างรหัส จากนั้นคุณจะเห็นแผงรหัสภาพเคลื่อนไหว
ที่ด้านบนของแผงจะมีช่องทำเครื่องหมายสองช่อง อันแรกช่วยให้คุณสามารถย่อขนาดโค้ดได้ช่วยประหยัดพื้นที่ในกระบวนการ อันที่สองจะปรับปรุงความเข้ากันได้กับเบราว์เซอร์รุ่นเก่าบางรุ่นโดยการเพิ่มคำนำหน้าผู้จำหน่ายเบราว์เซอร์ลงในโค้ด
ด้านล่างคุณจะพบโค้ด CSS สำหรับคลาสตัวช่วยแอนิเมชั่นที่ตั้งชื่อตามแอนิเมชั่นที่ใช้งานอยู่ในปัจจุบัน เป็นซับเดียวที่มีโค้ดแอนิเมชั่นที่ใช้ตัวเลือกแอนิเมชั่น การคลิกปุ่มคัดลอกคลาสจะเป็นการคัดลอกรหัสคลาสตัวช่วยไปยังคลิปบอร์ดของคอมพิวเตอร์คุณจึงสามารถวางลงในโปรแกรมแก้ไขของคุณได้
บิตสุดท้ายและที่สำคัญที่สุดคือบล็อกโค้ดคีย์เฟรมภาพเคลื่อนไหว เป็นที่อธิบายลำดับทั้งหมดของภาพเคลื่อนไหวและเป็นสิ่งที่คุณต้องการเพื่อใช้ภาพเคลื่อนไหวในโครงการของคุณ เมื่อคลิกปุ่มคัดลอกคีย์เฟรมโค้ดก็พร้อมที่จะวางลงใน CSS ของคุณ
เคลื่อนไหวเป็นแบทช์
ตรงกันข้ามกับวิธีการก่อนหน้านี้เมื่อคุณเห็นภาพเคลื่อนไหวที่คุณชอบให้เพิ่มลงในรายการโปรดของคุณโดยคลิกปุ่มเพิ่มในรายการโปรด
ไอคอนรูปหัวใจจะปรากฏถัดจากภาพเคลื่อนไหวที่ใช้งานอยู่ในรายการรูปแบบภาพเคลื่อนไหวโดยทำเครื่องหมายว่าเป็นรายการโปรด ทำซ้ำหลาย ๆ ครั้งตามต้องการจนกว่าคุณจะพอใจกับสิ่งที่คุณเลือก
ปุ่มดาวน์โหลดที่ด้านขวาของแถบเมนูจะนำคุณไปยังหน้าดาวน์โหลดที่ด้านบนซึ่งคุณจะพบรายการที่มีภาพเคลื่อนไหวที่คุณชื่นชอบทั้งหมด ที่นี่คุณจะมีโอกาสตรวจสอบสิ่งที่คุณเลือกอีกครั้ง คุณยังสามารถทำการเปลี่ยนแปลงในนาทีสุดท้ายได้โดยคลิกปุ่ม "x" ที่อยู่ถัดจากชื่อภาพเคลื่อนไหว
ส่วนสุดท้ายประกอบด้วยโค้ดที่สร้างขึ้นสำหรับภาพเคลื่อนไหวที่คุณเลือกทั้งหมด เมื่อคลิกปุ่มคัดลอกรหัสการแจ้งเตือนสีเขียวจะแจ้งให้คุณทราบว่าการดำเนินการสำเร็จและรหัสนั้นพร้อมที่จะวางลงในโปรแกรมแก้ไขที่คุณเลือก ในกรณีที่คุณกำลังสร้างไฟล์ใหม่ตรวจสอบให้แน่ใจว่าได้บันทึกด้วยนามสกุลที่ถูกต้องในกรณีนี้คือ. css
รับภาพเคลื่อนไหว
มีหลายวิธีในการใช้ภาพเคลื่อนไหว CSS และเพิ่มประสิทธิภาพโครงการเว็บของคุณ Animista ทำให้กระบวนการนี้สนุกขึ้นและง่ายขึ้นเล็กน้อย แอนิเมชั่นใหม่จะออกมาเร็ว ๆ นี้และในระหว่างนี้ขอให้มีความสุขกับแอนิเมชั่น
บทความนี้เคยปรากฏในนิตยสาร net ฉบับ 303 ซื้อเลย ที่นี่.
ต้องการคำแนะนำเพิ่มเติมเกี่ยวกับเครื่องมือแอนิเมชันใดที่ดีที่สุด
หากคุณชื่นชอบแอนิเมชั่นบนเว็บโปรดตรวจสอบว่าคุณได้เลือกซื้อตั๋วแล้ว สร้างนิวยอร์ก. ผู้เชี่ยวชาญด้านแอนิเมชั่นเว็บผู้เขียนและผู้สอนศาสนาด้านการออกแบบที่ Adobe, Val Head จะนำเสนอการพูดคุย - เลือกการผจญภัยแอนิเมชั่นของคุณ - ซึ่งเธอจะแจกแจงรายชื่อตัวเลือกมากมายสำหรับการทำให้สิ่งต่างๆเคลื่อนไหวบนหน้าจอ
นอกจากนี้เธอยังจะแสดงให้คุณเห็นว่าเครื่องมือใดที่เหมาะสมที่สุดสำหรับสิ่งต่างๆเช่นการเปลี่ยนสถานะการแสดงข้อมูลการแสดงภาพเคลื่อนไหวและการทำให้ภาพเคลื่อนไหวตอบสนอง
Generate New York จะมีขึ้นระหว่างวันที่ 25-27 เมษายน 2018 รับตั๋วของคุณตอนนี้.
