คุณจะสร้างภาพเคลื่อนไหวใน Google Web Designer ได้โดยใช้คีย์เฟรม ซึ่งเป็นตัวระบุจุดเริ่มต้นและจุดสิ้นสุดของภาพเคลื่อนไหว และยังตั้งค่าคุณสมบัติขององค์ประกอบที่เคลื่อนไหวในแต่ละคีย์เฟรมได้ด้วย และ Web Designer จะจัดการ Tweening (หรือการเปลี่ยนระหว่างทาง) ระหว่างคีย์เฟรมเอง
ตัวอย่าง
- ที่คีย์เฟรมแรก คุณมีสี่เหลี่ยมผืนผ้าสีแดงอยู่ทางด้านซ้ายของหน้า
- 2 วินาทีถัดมาที่คีย์เฟรมที่ 2 คุณเปลี่ยนคุณสมบัติสีและตำแหน่งของรูปสี่เหลี่ยมให้เป็นสีน้ำเงินและอยู่ทางด้านขวาของหน้า
Web Designer จะสร้างภาพเคลื่อนไหวโดยค่อยๆ เปลี่ยนสีไปตามเฉดสีม่วงและสร้างการเคลื่อนไหวเพื่อเปลี่ยนตำแหน่งของวัตถุในหน้า
CSS ทำให้คีย์เฟรม HTML ที่มีอยู่เคลื่อนไหวได้ แต่จะเพิ่มหรือนำองค์ประกอบออกไม่ได้ แต่คุณซ่อนและแสดงองค์ประกอบด้วยการทำให้คุณสมบัติ visibility ขององค์ประกอบเคลื่อนไหวได้
เนื่องจากภาพเคลื่อนไหวสร้างขึ้นโดยใช้ CSS คุณจึงสร้างลำดับของภาพเคลื่อนไหวที่แตกต่างกันสำหรับวิวพอร์ตขนาดต่างๆ ได้เมื่อใช้เครื่องมือการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
โหมดสำหรับการสร้างภาพเคลื่อนไหว
เลือกโหมดสำหรับภาพเคลื่อนไหวซึ่งมี 2 โหมดให้เลือกใช้ ได้แก่ โหมดด่วนและโหมดขั้นสูง โดยคุณสลับระหว่าง 2 โหมดนี้ได้ทุกเมื่อ
โหมดด่วนคุณสร้างภาพเคลื่อนไหวแบบทีละฉากได้โดยเพิ่มมุมมองใหม่ของทั้งหน้าและเปลี่ยนองค์ประกอบทั้งหมดที่คุณต้องการทำให้เคลื่อนไหว ไทม์ไลน์จะแสดงภาพขนาดย่อของแต่ละฉากตามลำดับเวลาเหมือนสตอรีบอร์ด ดูข้อมูลเพิ่มเติม |
โหมดขั้นสูงคุณทำให้องค์ประกอบแต่ละรายการเคลื่อนไหวแยกกันได้ เพื่อสร้างภาพเคลื่อนไหวที่มีความซับซ้อนมากขึ้น องค์ประกอบแต่ละรายการจะมีเลเยอร์ของตนเองในไทม์ไลน์ และตัวทำเครื่องหมายคีย์เฟรมจะวางอยู่ระหว่างไทม์ไลน์ตามลำดับเวลา ดูข้อมูลเพิ่มเติม |
ข้อจำกัดสำหรับโฆษณา AMPHTML
มีเพียงคุณสมบัติ CSS ต่อไปนี้เท่านั้นที่ทำให้เคลื่อนไหวได้ในโฆษณา AMPHTML
transform(ให้คุณเลื่อน หมุน ปรับขนาด และเอียงองค์ประกอบต่างๆ)ความทึบการเปิดเผย