เคลื่อนไหว SVG ด้วย JavaScript

Sep 12, 2025

วิธีการ

Graphic of 4 mountain scenes in circles on a computer screen

มีมากที่สามารถทำได้ในเบราว์เซอร์โดยใช้ CSS3 หรือเว็บแอนิเมชั่น API ใน JavaScript ภาพเคลื่อนไหวและการเปลี่ยนภาพที่เรียบง่ายเหมาะสำหรับ CSS3 - ในขณะที่ภาพเคลื่อนไหวที่ซับซ้อนมากขึ้นจำเป็นต้องสำเร็จการใช้ JavaScript (หากคุณกำลังสร้างไซต์โดยไม่มีรหัสคุณต้องมี สร้างเว็บไซต์ .)

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

คำแนะนำที่สมบูรณ์ไปยัง SVG

ในการต่อสู้กับคุณสมบัติและการสนับสนุนเบราว์เซอร์นี้เราสามารถเปลี่ยนเป็นไลบรารีภาพเคลื่อนไหวเช่น greensock (GSAP) GSAP ให้ความสามารถในการสร้างภาพเคลื่อนไหวที่ซับซ้อนและระยะเวลาหลายเส้นโดยมีความสามารถในการเคลื่อนไหวเกือบทุกองค์ประกอบหรือคู่คุณสมบัติ / ค่า - ทั้งหมดที่ทำได้ด้วยไวยากรณ์ที่เรียบง่ายและใช้งานง่าย

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

หากคุณต้องการตัวเลือกเพิ่มเติมสำหรับโครงการอนิเมชั่นของคุณให้ตรวจสอบการรวบรวมของเรา ซอฟต์แวร์ออกแบบกราฟิกฟรีที่ดีที่สุด . การเพิ่มแอนิเมชั่นให้กับเว็บไซต์ที่ซับซ้อนหรือไม่ คุณจะต้องมีการสนับสนุน เว็บโฮสติ้ง บริการ.

ดาวน์โหลดไฟล์ สำหรับการกวดวิชานี้

01. การตั้งค่าเอกสาร

ในการเริ่มต้นเราต้องส้อม ปากกา greensock เพื่อทดลองปลั๊กอินพรีเมี่ยม สำหรับการกวดวิชาเราจะใช้ SVG ที่ได้รับการปรับให้เหมาะสมและวางลงในโปรแกรมแก้ไข HTML ของเราแล้ว อย่างไรก็ตามหากคุณใช้ SVG ของคุณเองคุณจะต้องตรวจสอบให้แน่ใจว่าองค์ประกอบทั้งหมดมี ID ที่ไม่ซ้ำกัน

02 สร้างไทม์ไลน์แรก

GSAP มีสองประเภทไทม์ไลน์: Timelinelite และ Timelinemax เวอร์ชั่น Timelinemax ให้การเข้าถึงคุณสมบัติเพิ่มเติมเช่นความสามารถในการทำซ้ำภาพเคลื่อนไหวเช่นเดียวกับการเล่นพวกเขาในการย้อนกลับในหมู่คนอื่น ๆ ไทม์ไลน์แรกของเราจะเป็นน้ำซึ่งเราจะทำซ้ำอย่างไม่ จำกัด และโยโย่กลับไปกลับมา

 var animation_water = timelinemax ใหม่ ({
  ทำซ้ำ: -1,
  yoyo: จริง
});

03 สร้างภาพเคลื่อนไหวแรก

เพื่อที่จะเคลื่อนไหวน้ำเรามีเส้นทางอื่นใน SVG ของเราซ่อนอยู่ด้วยความทึบของ '0' เราจะใช้ประโยชน์ morphsvg ปลั๊กอินเพื่อเปลี่ยนเส้นทางน้ำดั้งเดิมของเราเข้าไปในเส้นทางน้ำใหม่ เราจะย้ายองค์ประกอบน้ำ '12px' ลงบนแกน Y ตัวเลขสองตัวในตอนท้ายของคุณสมบัติแสดงถึงความล่าช้าและเวลาเริ่มต้นตามลำดับ

 Animation_Water
  .TO ("# Water", 2, {
  Y: 12,
  morphsvg: "# water-2",
  ความสะดวก: linear.easenone
  }, 0, 0)
;

04 คุณสมบัติที่นำกลับมาใช้ใหม่ได้

เนื่องจากเราจะใช้คุณสมบัติจำนวนมากและให้ความสำคัญกับจำนวนครั้งที่เราจะสร้างตัวแปรสำหรับคุณสมบัติเหล่านี้

 var animation_ase = linear.eastenone;

05 การบันทึกคอนโซล

ห้องสมุด GSAP ให้ความสามารถแก่เราในการรับคุณสมบัติจำนวนมากจากไทม์ไลน์ที่กำหนด เราสามารถบันทึกสิ่งเหล่านี้ในคอนโซลเพื่อให้แน่ใจว่าทุกอย่างทำงานตามที่เราคาดหวัง

 console.log (
  ระยะเวลาเคลื่อนไหว Animation_Water: '
  + Animation_Water.duration ()
  . tofixed (2)
);

06 เมฆไทม์ไลน์และบันทึกคอนโซล

สำหรับทุกองค์ประกอบที่เราต้องการเคลื่อนไหวแยกต่างหากและอยู่ตลอดเวลาเราต้องสร้างไทม์ไลน์ใหม่ เราต้องการบันทึกไทม์ไลน์นั้นในคอนโซลตามที่เราไป

 var animation_cloud = timelinemax ใหม่ ({
  ทำซ้ำ: -1,
  yoyo: จริง
});
console.log ('\ n' +
  ...
  Animation_Cloud.duration () ToFixed (2) + '\ n'
);

07 แอนิเมชั่นคลาวด์

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

แอนิเมชั่นคลาวด์ของเราจะต้องมีความละเอียดอ่อนเท่านั้นดังนั้นเราจึงต้องเปลี่ยนค่าเพียงเล็กน้อยเท่านั้น

 Animation_Cloud
  .TO ("# Cloud", 3, {x: -2, Y: 1, สเกล: 0.95, การหมุน: 1, ความสะดวก: animation_ase}, 0, 0)
;

08 สร้างนิเมชั่นยามค่ำคืน

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

 var day_night_cycle_time = 15;
var animation_delay = day_night_cycle_time / 2;
var animation_tonight = timelinemax ใหม่ ({
  ทำซ้ำ: -1,
  yoyo: จริง
  ReadeDelay: Animation_Delay
});

09. เคลื่อนไหวเลเยอร์ซ้อนทับ

ภายใน SVG ของเราเรามีชั้นซ้อนทับที่ทำจากสี่เหลี่ยมผืนผ้าที่ครอบคลุมภาพทั้งหมดด้วยการไล่ระดับพื้นหลังเดียวกันกับพื้นหลังเวลากลางคืนของเรา การซ้อนทับใช้โหมดการผสมผสาน 'ทวีคูณ' เพื่อทำให้ภาพทั้งหมดมืดลง ภาพเคลื่อนไหวของเราเพียงแค่เปลี่ยนความทึบขององค์ประกอบนี้

 Animation_tonight
  .TO ('# Nighttime-overlay'
  day_night_cycle_time {
  ความทึบแสง: 1,
  ความสะดวก: Animation_Ease
  }
  , 0, 0)
;

10. เคลื่อนไหวการไล่ระดับสี

GSAP เสนอ tweens อื่น ๆ ที่ด้านบนของทั่วไป 'เป็น' และ 'จาก' ประเภท Tween Type ที่เราต้องการเพื่อทำให้การไล่ระดับสีของเราเป็นเกม 'Staggerto' Tween นอกจากนี้เรายังสามารถใช้คุณสมบัติ 'วงจร' เพื่อหมุนวงล้อสีไปยังค่าใหม่ของเรา

 .staggerto ('# หยุดกลางวัน - ไล่โทนสี'
  day_night_cycle_time {
  วงจร: {
  StopColor: ['# 060414', '# 416584']
  },
  ความง่าย: Animation_Ease
}, 0, 0)

11. เคลื่อนไหวดวงอาทิตย์

เราสามารถเพิ่มแอนิเมชั่นให้กับภาพเคลื่อนไหว 'คืนนี้' ของเรา คราวนี้เราจะเพิ่ม 'ถึง' ทวีใหม่เพื่อตั้งค่าแสงแดดของเรา เราจะตั้งเวลาการแสดงผลเพื่อเป็นเศษส่วนของเวลารอบเพื่อที่จะเคลื่อนไหวดวงอาทิตย์ก่อนดวงจันทร์ GSAP ช่วยให้เราสามารถตั้งค่าเกือบทุกแอตทริบิวต์ เราจะใช้สิ่งนี้เพื่อที่จะเคลื่อนไหวคุณสมบัติ 'cx' และ 'cy' และ 'cy' เพื่อใต้เนินเขาทางด้านขวา

 .TO ('# Sun', Day_Night_Cycle_Time / 1.25, {
  สเกล: 0.9,
  attr: {cx: "753", CY: "697"}
  ความสะดวก: Animation_Ease}
, 0, 0)

12. เคลื่อนไหวดวงจันทร์

เราจะใช้เทคนิคเดียวกันกับที่เราเคยเคลื่อนไหว Sun Out of View (ดูขั้นตอนที่ 11 ด้านบน) เพื่อที่จะเคลื่อนไหวดวงจันทร์ให้ดู เราสามารถบรรลุสิ่งนี้ได้โดยใช้ทวีตหนึ่งแน่นอน แต่เพื่อสร้างอาร์ค Faux เราจะทำสิ่งนี้เป็นสองส่วน ในทั้งสองส่วนเราจะใช้ค่าใหม่กับคุณสมบัติขนาด

 .TO ('# Moon', Day_Night_Cycle_Time / 2, {
  สเกล: 0.9,
  attr: {cx: "174.5", CY: "202.5"}
  ความสะดวก: Animation_Ease}
, 0, 0)

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

 Animation_tonight
  ...
  .to ('# moon', day_night_cycle_time / 2, {
  สเกล: 0.9,
   attr: {cx: "410.5", CY: "114.5"}
  ความสะดวก: Animation_Ease}
  , day_night_cycle_time / 2, 0)
;

13. เคลื่อนไหวดวงดาว

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

 .TO ('# stars', day_night_cycle_time / 2,
  {ความทึบ: 1},
  day_night_cycle_time / 2,
0)

ต่อไปเราจะใช้ 'จาก' tween เพื่อย้ายดวงดาวขึ้นและหมุนพวกเขาจากมุมลบขณะที่พวกเขาเคลื่อนไหวในมุมมอง เรากำลังใช้คณิตศาสตร์ง่าย ๆ เพื่อคำนวณเวลาและความล่าช้าของภาพเคลื่อนไหวของเราทั้งหมดตามตัวแปร 'Day_Night_cycle_time' ของเรา

. จาก ("# ดาว"
  day_night_cycle_time - (day_night_cycle_time / 4),
  {y: 150, การหมุน: -15, ความสะดวก: animation_ase},
  day_night_cycle_time / 4,
0)

14. สร้าง Timeline ดาวและบันทึกคอนโซล

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

 var animation_stars = timelinemax ใหม่ ({
  ทำซ้ำ: -1,
  yoyo: จริง
});

15. ทำให้ดาวกระพริบตา

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

 Animation_Stars
  .to ("# ดาว", 0.5,
  {ความทึบแสง: 0.5, ความสะดวก: animation_ase}
, 0, 0)
;

16. ชะลอการกะพริบ

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

 Animation_Stars
  ...
  .to ("# star-two", 0.5,
  {ความทึบแสง: 0.5, ความสะดวก: animation_ase}
  , 1.25, 0)
  .to ("# star-three-three", 0.5,
  {ความทึบแสง: 0.5, ความสะดวก: animation_ase}
  , .75, 0)
  ... ;

17. เพิ่มหิมะ

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

 & lt; g id = "snow-bottom-layer" ... & gt;
  ...
  & lt; วงรี ... / & gt;
& lt; / g & gt;
& lt; g id = "snow-top-layer" ... & gt;
  ...
  & lt; วงรี ... / & gt;
& lt; / g & gt;

18. สร้างไทม์ไลน์หิมะ

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

 var animation_snowtop = timelinemax ใหม่ ({
  ทำซ้ำ: -1,
  repeatdelay: 0
});
var animation_snowbottom = timelinemax ใหม่ ({
  ทำซ้ำ: -1,
  repeatdelay: 0
});

19. เคลื่อนไหวหิมะ

เพื่อที่จะเคลื่อนไหวเลเยอร์หิมะของเราเราต้องการย้ายสองชั้นตามแนวตั้งแกนแนวตั้ง โดยความแตกต่างของความแตกต่างของพวกเขาเราจะได้รับลักษณะที่ปรากฏของเลเยอร์ที่เคลื่อนที่ด้วยความเร็วที่แตกต่างกัน แอนิเมชั่นทำงานโดยการย้ายคอลเลกชันของวงรีตามแกนแนวตั้งจนกระทั่งคอลเลกชันที่สองอยู่ในตำแหน่งแรก จากนั้นเราทำซ้ำแอนิเมชั่น

 Animation_snow
  .to ("# # snow-top-layer", 7,
  {attr: {transform: "แปล (24 -108)"}
  ความสะดวก: Animation_Ease}
, 0, 0)
;

ค้นหาคอลเลกชันทั้งหมดของปากกากวดวิชา ที่นี่ . ต้องการที่ใดที่หนึ่งเพื่อเก็บไฟล์ของคุณ? ดูคำแนะนำของเราไปที่ การจัดเก็บเมฆ .

บทความนี้ได้รับการตีพิมพ์ในงานสร้างสรรค์ในนิตยสาร Web Design Creative Web Design สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

บทความที่เกี่ยวข้อง:

5 apis จาวาสคริปต์ที่ยอดเยี่ยม
ตัวอย่างแอนิเมชั่น CSS เย็น 19 ตัวอย่างเพื่อสร้างใหม่
วิดีโอเพลงเคลื่อนไหวที่ยิ่งใหญ่ที่สุด 25 รายการ

เคลื่อนไหว SVG ด้วย JavaScript

01. การตั้งค่าเอกสาร

02 สร้างไทม์ไลน์แรก

03 สร้างภาพเคลื่อนไหวแรก

04 คุณสมบัติที่นำกลับมาใช้ใหม่ได้

05 การบันทึกคอนโซล

06 เมฆไทม์ไลน์และบันทึกคอนโซล

07 แอนิเมชั่นคลาวด์

08 สร้างนิเมชั่นยามค่ำคืน

09. เคลื่อนไหวเลเยอร์ซ้อนทับ

10. เคลื่อนไหวการไล่ระดับสี

11. เคลื่อนไหวดวงอาทิตย์

12. เคลื่อนไหวดวงจันทร์

13. เคลื่อนไหวดวงดาว

14. สร้าง Timeline ดาวและบันทึกคอนโซล

15. ทำให้ดาวกระพริบตา

16. ชะลอการกะพริบ

17. เพิ่มหิมะ

18. สร้างไทม์ไลน์หิมะ

19. เคลื่อนไหวหิมะ

วิธีการ - บทความยอดนิยม

วิธีการวาดหัว: คู่มือฉบับสมบูรณ์

ใช้ Framer X เพื่อสร้างต้นแบบแบบโต้ตอบ

วิธีการรหัสเอฟเฟกต์ข้อความสมาร์ทด้วย CSS

เพิ่มตัวกรอง SVG ด้วย CSS

เปลี่ยนภาพประกอบ 2D ให้เป็นศิลปะ 3 มิติ

Sculpt กายวิภาคสมจริงใน ZBrush

4 เคล็ดลับการเพิ่มประสิทธิภาพภาพที่สำคัญ

สร้างเฟรมสไตล์ใน Photoshop

หมวดหมู่