Loop animation

Google Web Designer สอนทำอนิเมชั่นแบบวนลูป

ลองดูตัวอย่างการทำพื้นหลังให้เคลื่อนไหวแบบวนลูปไปเรื่อยๆ ตัวอย่างของผมคือผมทำให้พื้นหลังเป็นอวกาศให้เลื่อนวนไปเรื่อยๆ และมียานวางเฉยๆอยู่ตรงกลาง ดูแล้วเหมือนกับยานบินอยู่บนอวากาศนั่นเอง ขั้นตอนการทำ 1. เตรียมกราฟฟิคที่ใช้ทำพื้นหลังวนลูป ขั้นตอนนี้ถือว่าสำคัญทีเดียวเพราะถ้าเราทำกราฟฟิคไม่ดี การวนลูปจะไม่เนียน ผมเลือกใช้รูปอวกาศดำๆจุดๆ เมื่อได้รูปแล้วเราต้องเอารูปมา Copy แล้วต่อให้ติดกันสนิท เสร็จแล้วก็จะได้ Background ที่เราต่อกันยาวๆ เสร็จแล้วก็เซฟเก็บไว้เตรียมเอาไปทำ Animation ได้แล้วล่ะครับ   2. เริ่มสร้าง Animation เมื่อเปิดโปรแกรม Google Web Designer มันจะให้เรากำหนดขนาดของงาน ใครสร้างเป็นหน้าเว็บก็เลือก Others > HTML แต่ในกรณีนี้ผมทำกราฟฟิคเป็นขนาดแบนเนอร์ จึงเลือกเป็นสร้างแบบ Ads   3. import ไฟล์กราฟฟิคเข้ามาในงาน ผม Import รูปมา 2 รูปสำหรับเป็นพื้นหลังและจรวดที่วางไว้เฉยๆ   4. ทำการ Animate แบคกราวน์ 4.1 การกดเลือกแบคกราวน์ คลิกขวาที่ Keyframe ที่ต้องการเลือก Insert keyframe…