Kwik Page Turn Animation

• เมษายน 27, 2024

สำหรับบทเรียนที่ผ่านมาเราได้ดำเนินการกับเทมเพลตหน้าสำหรับแอพ Kwik book ของเรา เรามีอีกหนึ่งสิ่งที่จะเพิ่มในเทมเพลตซึ่งเป็นภาพเคลื่อนไหวเชิงเส้นที่เลียนแบบการเปลี่ยนหน้า

เราจะต้องการให้ภาพเคลื่อนไหวนี้เล่นทันทีเมื่อโหลดหน้าเว็บ เรามีกราฟิกสำหรับแอนิเมชันบนเลเยอร์ kwkpgTurn ในหน้า 1 แล้ว เลเยอร์นี้ได้รับการตั้งค่าเป็นสินทรัพย์ที่ใช้ร่วมกันเพื่อให้สามารถใช้งานแอพหนังสือได้

ภาพเคลื่อนไหวเชิงเส้น

ณ จุดนี้เราจะสร้างภาพเคลื่อนไหวที่ง่ายมากและจะใช้การตั้งค่าเริ่มต้นส่วนใหญ่ แต่เราจะเรียนรู้มากมายเกี่ยวกับอนิเมชั่นเชิงเส้นเมื่อเราเพิ่มพวกมันเข้าไปในหนังสือ

ภาพเคลื่อนไหวเชิงเส้นย้ายวัตถุจากจุดหนึ่งบนหน้าจอไปยังอีก ดังนั้นการตั้งค่าหลักสำหรับภาพเคลื่อนไหวเชิงเส้นจึงเป็นจุดเริ่มต้นและจุดสิ้นสุด ควิกจะตั้งจุดเริ่มต้นของภาพเคลื่อนไหวโดยอัตโนมัติเป็นตำแหน่งปัจจุบันของวัตถุบนเลเยอร์ เราจะต้องกำหนดจุดสิ้นสุดสำหรับภาพเคลื่อนไหว

นอกจากนี้เรายังจะกำหนดระยะเวลาสำหรับการเคลื่อนไหวในไม่กี่วินาทีเช่นนี้จะกำหนดว่าวัตถุเคลื่อนที่เร็วแค่ไหน ในที่สุดเราจะตั้งค่าภาพเคลื่อนไหวให้เริ่มเมื่อหน้าโหลด

นิเมชั่นเปิดหน้า

1. ในส่วนหน้า / ส่วนประกอบของแผง Kwik ให้เลือกหน้า 1 คุณควรเห็น "@ page1" ที่ด้านบนของส่วน
   
   
2. คลิกที่ สลับไปที่ไอคอนมุมมองส่วนประกอบเพื่อดูรายการส่วนประกอบที่เพิ่มไว้ในหน้านี้แล้ว
   
   
3. เลือกเลเยอร์ kwkpgTurn ในแผงเลเยอร์
   
   
4. จากแถบหมวดหมู่ให้คลิกที่ ไอคอนภาพเคลื่อนไหว
   
   
5. คลิกที่ ไอคอน Linear Animation (ไอคอนแรกในเครื่องมือแถวแรก)
   
   
6. ในกล่องโต้ตอบภาพเคลื่อนไหวเชิงเส้นเปลี่ยนชื่อภาพเคลื่อนไหว "pgTurn"
   
   
7. Layer kwkpgTurn: สิ่งนี้บอกให้ Kwik ใช้กราฟิกบนเลเยอร์ kwkpgTurn สำหรับภาพเคลื่อนไหว เลือกตัวเลือกนี้
   
   

ในส่วนคุณสมบัติ Kwik แสดงตำแหน่ง X และ Y สำหรับวัตถุบนชั้น kwkpgTurn และความกว้างและความสูงของวัตถุกราฟิก เนื่องจากเราต้องการย้ายกราฟิกทั้งหมดออกจากหน้าจอเราจะต้องย้ายอย่างน้อยจำนวนพิกเซลเท่ากันตามความกว้างของกราฟิก (732 px) ลองขยับ 732 พิกเซลไปทางซ้าย เนื่องจากตำแหน่ง X ปัจจุบันคือ 0 ซึ่งจะส่งผลให้จำนวนลบสำหรับตำแหน่งสิ้นสุด เราไม่ต้องการย้ายวัตถุในแนวตั้งดังนั้นเราจะตั้งตำแหน่ง Y ไว้ที่ 0 ซึ่งจะทำให้วัตถุเคลื่อนที่ในแนวนอนเท่านั้น

8. ตำแหน่งสุดท้าย:
   x -732
   y 0
   
   
9. ตำแหน่งสิ้นสุดแบบสุ่ม: เราจะไม่ใช้คุณสมบัตินี้ดังนั้นปล่อยให้มันตั้งเป็นค่าเริ่มต้น
   
   
10. ระยะเวลา: เราต้องการให้กราฟิกเคลื่อนที่เร็วมากเพื่อให้เอฟเฟกต์การพลิก ลองตั้งค่านี้เป็น 1 วินาทีและ. 25 วินาทีดีเลย์
    
    
11. ทำเครื่องหมายที่ช่องเพื่อหยุดชั่วคราวเมื่อเสร็จสิ้น
    
    
12. วนซ้ำ: ตั้งค่าตัวเลือกนี้เป็นเวลา l
    
    
13. เริ่ม: ตั้งค่านี้เป็นเมื่อหน้าเริ่มต้น
    
    
14. คลิกสร้าง
    
    
15. คุณควรเห็นว่ามีการเพิ่มภาพเคลื่อนไหว pgTurn ในรายการส่วนประกอบสำหรับหน้านี้
    
    

ตอนนี้เป็นเวลาที่ดีในการทดสอบโครงการ คลิกปุ่มเผยแพร่ในแผง Kwik ทดสอบปุ่มนำทางและภาพเคลื่อนไหวการเปลี่ยนหน้า

ลิขสิทธิ์ 2018 Adobe Systems Incorporated สงวนลิขสิทธิ์. ภาพหน้าจอผลิตภัณฑ์ Adobe พิมพ์ซ้ำได้รับอนุญาตจาก Adobe Systems Incorporated Adobe, Photoshop, อัลบั้ม Photoshop, องค์ประกอบ Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, องค์ประกอบรอบปฐมทัศน์, สะพาน, After Effects, InCopy, Dreamweaver, แฟลช, ActionScript, ดอกไม้ไฟ, Contribute, Flash Catalyst และ Flash Paper เป็น / เป็น [a] เครื่องหมายการค้าจดทะเบียน [s] หรือเครื่องหมายการค้า [s] ของ Adobe Systems Incorporated ในสหรัฐอเมริกาและ / หรือประเทศอื่น ๆ
ผลิตภัณฑ์ควิก, โลโก้ควิกและควิกเชอร์เป็นทรัพย์สินของ Kwiksher.com - ลิขสิทธิ์ 2011 ภาพหน้าจอที่ใช้โดยได้รับอนุญาต

บทช่วยสอนเหล่านี้มีไว้สำหรับ Kwik 2 รุ่นเก่ากว่าและอาจไม่ช่วยได้มากนักเมื่อใช้ Kwik 3 ขึ้นไป หากคุณมีปัญหาโปรดใช้ฟอรั่มควิก

คำแนะนำวิดีโอ: Geraldine Kwik - 41°25'1''N & 104°6'1''W (Walking Man) (เมษายน 2024).