Animate SVG với JavaScript

Sep 16, 2025

Cách

Có rất nhiều thứ có thể đạt được nguyên bản trong trình duyệt bằng CSS3 hoặc API hoạt hình Web, trong JavaScript. Hoạt hình và chuyển tiếp đơn giản rất phù hợp với CSS3 - trong khi hoạt hình phức tạp hơn cần được thực hiện bằng cách sử dụng JavaScript. (Nếu bạn đang tạo một trang web không có mã, bạn cần một người tạo ra trang web .)

Vấn đề với API hoạt hình Web là hỗ trợ trình duyệt và bộ tính năng hiện tại. Là một đặc điểm kỹ thuật khá trẻ, điều này sẽ cải thiện trong những năm tới.

Hướng dẫn đầy đủ về SVG

Để chống lại tính năng này và thâm hụt hỗ trợ trình duyệt, chúng ta có thể chuyển sang thư viện hoạt hình, chẳng hạn như Greensock. (GSAP). GSAP cho chúng ta khả năng tạo hoạt hình phức tạp và nhiều thời gian, với khả năng hoạt hình hầu hết mọi yếu tố hoặc cặp thuộc tính / giá trị - tất cả đạt được với một cú pháp đơn giản và trực quan.

Trong hướng dẫn này, chúng ta sẽ sử dụng thư viện GSAP để tạo một vài hình động. Hoạt hình chính và phức tạp nhất mà chúng ta sẽ tạo sẽ đang chuyển cảnh từ ngày sang đêm và chúng ta sẽ thấy chúng ta có thể dễ dàng làm chuỗi chuyển đổi nhiều lần để tạo ra các hình ảnh động phức tạp như thế nào để tạo ra các hình ảnh động phức tạp. Chúng tôi cũng sẽ tạo ra một vài hình ảnh động đơn giản sẽ được chạy liên tục.

Nếu bạn muốn nhiều tùy chọn hơn cho dự án hoạt hình của mình, hãy xem phần tổng hợp của chúng tôi về Phần mềm thiết kế đồ họa miễn phí tốt nhất . Thêm hình ảnh động vào một trang web phức tạp? Bạn sẽ cần một sự hỗ trợ web hosting dịch vụ.

Tải về các tập tin cho hướng dẫn này.

01. Thiết lập tài liệu.

Để bắt đầu, chúng ta cần phải ngã ba Bút xanh để dùng thử các plugin cao cấp của nó. Đối với hướng dẫn, chúng tôi sẽ sử dụng SVG đã được tối ưu hóa và dán vào trình soạn thảo HTML của chúng tôi. Tuy nhiên, nếu bạn đang sử dụng SVG của riêng mình, bạn sẽ cần đảm bảo rằng tất cả các phần tử có ID duy nhất.

02. Tạo dòng thời gian đầu tiên

GSAP cung cấp hai loại dòng thời gian: Timelinelite và Timelinemax. Phiên bản Timelinemax cung cấp quyền truy cập vào các tính năng bổ sung, chẳng hạn như khả năng lặp lại hình động, cũng như phát chúng ngược lại giữa những người khác. Dòng thời gian đầu tiên của chúng tôi sẽ là nước, mà chúng tôi sẽ lặp lại vô cùng và yoyo qua lại.

 var Animation_water = MỚI Timelinemax ({
  Lặp lại: -1,
  Yoyo: Đúng.
});

03. Tạo hình ảnh động đầu tiên

Để làm động nước, chúng tôi có một đường dẫn khác trong SVG của chúng tôi, ẩn với độ mờ '0'. Chúng tôi sẽ sử dụng Morphsvg. Plugin để biến đổi đường dẫn nước ban đầu của chúng tôi vào đường dẫn nước mới. Chúng tôi sẽ di chuyển phần tử nước '12px' xuống trục y. Hai số ở cuối tài sản đại diện cho sự chậm trễ và thời gian bắt đầu tương ứng.

 Animation_water
  .to ("# nước", 2, {
  Y: 12,
  Morphsvg: "# Water-2",
  Dễ dàng: linear.easenone.
  }, 0, 0)
;

04. Tài sản tái sử dụng

Vì chúng tôi sẽ sử dụng lại một số thuộc tính và giá trị một số lần chúng tôi sẽ tạo các biến cho các thuộc tính này.

 var Animation_ease = linear.easenone;

05. Ghi nhật ký console.

Thư viện GSAP cung cấp cho chúng tôi khả năng nhận được một số thuộc tính từ bất kỳ dòng thời gian nào. Chúng ta có thể đăng nhập những thứ này trong bảng điều khiển để đảm bảo rằng mọi thứ đang hoạt động như chúng tôi mong đợi.

 Console.log (
  'Animation_water Thời lượng:'
  + hoạt hình_water.duration ()
  .tofixed (2)
);

06. Dòng thời gian đám mây và nhật ký bảng điều khiển

Đối với mọi yếu tố chúng tôi muốn tạo động riêng biệt và liên tục, chúng tôi cần tạo một dòng thời gian mới. Chúng tôi cũng muốn đăng nhập dòng thời gian đó trong bảng điều khiển khi chúng tôi đi.

 var Animation_cloud = Timelinemax mới ({
  Lặp lại: -1,
  Yoyo: Đúng.
});
Console.log ('\ n' +
  ...
  Animation_cloud.duration (). TOFIXED (2) + '\ n'
);

07. Hoạt hình đám mây.

Bây giờ chúng tôi đã sẵn sàng dòng thời gian của chúng tôi, chúng tôi có thể tạo hoạt hình đám mây của chúng tôi. Phần hoạt hình có các thuộc tính mới có thể xử lý nhiều cặp thuộc tính / giá trị được phân tách bằng dấu phẩy.

Hoạt hình đám mây của chúng tôi chỉ cần tinh tế, vì vậy chúng tôi chỉ cần thay đổi các giá trị theo một lượng nhỏ.

 Animation_cloud
  .to ("# đám mây", 3, {x: -2, Y: 1, tỷ lệ: 0.95, Xoay: 1, Dễ dàng: Animation_ease}, 0, 0)
;

08. Tạo hoạt hình thời gian ban đêm

Tiếp theo, chúng tôi sẽ bắt đầu tạo hoạt hình hàng ngày của chúng tôi. Chúng tôi sẽ tạo một biến cho thời gian chu kỳ và ngày. Cài đặt 'YOYO' trong GSAP cũng cho phép chúng ta trì hoãn hoạt hình trước khi lặp lại.

 var day_night_cyncy_time = 15;
var animation_delay = day_night_cync_time / 2;
var animation_tonight = MỚI Timelinemax ({
  Lặp lại: -1,
  Yoyo: Đúng,
  Lặp lại: Animation_delay.
});

09. Animate lớp lớp phủ

Bên trong SVG của chúng tôi, chúng tôi có một lớp lớp phủ được làm bằng hình chữ nhật bao phủ toàn bộ hình ảnh với cùng một độ dốc nền như nền thời gian ban đêm của chúng tôi. Lớp phủ áp dụng chế độ hòa trộn 'Nhân' để làm tối toàn bộ hình ảnh. Hoạt hình của chúng tôi chỉ cần chuyển sự mờ đục của phần tử này.

 Animation_Conight
  .to ('# Nighttime-Overlay',
  day_night_cycle_time, {
  Độ mờ đục: 1,
  Dễ dàng: Animation_ease.
  Không thể
  , 0, 0)
;

10. Hoạt hình gradient.

GSAP cung cấp các tween khác trên các loại phổ biến 'đến' và 'từ'. Loại mười hai chúng ta cần để làm động gradient của chúng ta là 'staggerto' tween. Chúng ta cũng có thể sử dụng thuộc tính 'chu kỳ' để xoay bánh xe màu xung quanh đến các giá trị mới của chúng tôi.

 .staggerto ('# Dừng gradient ban ngày',
  day_night_cyncy_time, {
  đi xe đạp:{
  Dừng màu: ['# 060414', '# 416584']
  },
  Dễ dàng: Hoạt hình_Ease,
}, 0, 0)

11. Hoạt hình mặt trời

Chúng ta có thể tiếp tục thêm hình ảnh động vào hoạt hình 'tối nay' của chúng tôi. Lần này chúng ta sẽ thêm một 'để' tween để đặt mặt trời của chúng ta. Chúng tôi sẽ đặt thời gian hiển thị là một phần của thời gian chu kỳ để làm động mặt trời trước mặt trăng. GSAP cho phép chúng tôi đặt hầu hết các thuộc tính. Chúng tôi sẽ sử dụng điều này để làm động các thuộc tính 'CX' và 'CY' ở bên dưới ngọn đồi bên phải.

 .to ('# sun', day_night_cycle_time / 1.25, {
  Quy mô: 0,9,
  attr: {cx: "753", cy: "697"},
  Dễ dàng: Animation_ease}
, 0, 0)

12. Hoạt hình mặt trăng.

Chúng ta sẽ sử dụng kỹ thuật tương tự mà chúng ta đã sử dụng để tạo động mặt trời ra khỏi tầm nhìn (xem bước 11 ở trên) để làm động mặt trăng thành chế độ xem. Chúng ta có thể đạt được điều này bằng cách sử dụng một tween, tất nhiên, nhưng để tạo ra một arc giả, chúng ta sẽ làm điều này là trong hai phần. Trong cả hai phần, chúng tôi cũng sẽ áp dụng một giá trị mới cho thuộc tính Quy mô.

 .to ('# moon', day_night_cync_time / 2, {
  Quy mô: 0,9,
  attr: {cx: "174,5", cy: "202,5"},
  Dễ dàng: Animation_ease}
, 0, 0)

Phần thứ hai của Animation Moon chờ đợi phần đầu tiên kết thúc trước khi bắt đầu. Lưu ý: Hai phần của hoạt hình mặt trăng bị xiềng xích với nhau trong mã hoạt hình cùng với các thuộc tính trong ngày khác mà chúng ta đang sử dụng.

 Animation_Conight
  ...
  .to ('# moon', day_night_cycle_time / 2, {
  Quy mô: 0,9,
   attr: {cx: "410,5", cy: "114,5"},
  Dễ dàng: Animation_ease}
  , Day_night_cycle_Time / 2, 0)
;

13. Làm động các ngôi sao.

Phần duy nhất còn lại của hoạt hình hàng ngày của chúng tôi là những ngôi sao. Chúng tôi sẽ làm động các ngôi sao theo chế độ xem bằng cách chuyển một số thuộc tính. Người đầu tiên trong số họ chỉ đơn giản là đưa họ vào xem hoạt hình Opacity của họ.

 .to ('# star', day_night_cync_time / 2,
  {Opacity: 1},
  day_night_cycle_time / 2,
0)

Tiếp theo, chúng ta sẽ sử dụng 'từ Tween để di chuyển các ngôi sao lên và xoay chúng từ một góc âm khi chúng hoạt hình thành chế độ xem. Chúng tôi đang sử dụng một số toán học đơn giản để tính toán thời gian hoạt hình và độ trễ hoạt hình của chúng tôi, tất cả dựa trên biến 'day_night_cynetle_time' của chúng tôi.

. Từ ("# stars",
  day_night_cycle_time - (day_night_cync_time / 4),
  {Y: 150, xoay: -15, dễ dàng: hoạt hình_ease},
  day_night_cycle_time / 4,
0)

14. Tạo dòng thời gian sao và nhật ký bảng điều khiển

Bây giờ chúng ta đã tạo ra hoạt hình hàng ngày của mình, chúng ta có thể tạo một hình ảnh động liên tục khác để làm cho ngôi sao của chúng ta nhấp nháy. Chúng tôi sẽ tạo dòng thời gian mới và sau đó đăng nhập thời gian dòng thời gian trong bảng điều khiển.

 var Animation_Stars = MỚI Timelinemax ({
  Lặp lại: -1,
  Yoyo: Đúng.
});

15. Làm cho các ngôi sao chớp mắt

Bây giờ chúng ta đã tạo Dòng thời gian sẵn sàng cho hoạt hình, chúng ta cần tạo hoạt hình nhấp nháy của chúng tôi. Hoạt hình thực sự đơn giản - tất cả những gì chúng tôi muốn làm là giảm giá trị độ mờ. Nhờ thuộc tính 'YoYo', độ mờ sẽ hoạt động và tắt và sẽ khiến các ngôi sao trông giống như chúng đang nhấp nháy.

 Animation_Stars
  .to ("# stars", 0,5,
  {Opacity: 0,5, Easy: Animation_ease}
, 0, 0)
;

16. Trì hoãn chớp mắt

Trong bước cuối cùng, chúng tôi đang nhắm mục tiêu nhóm sao để áp dụng hoạt hình chớp mắt của chúng tôi, tuy nhiên nó sẽ trông tốt hơn nhiều nếu các ngôi sao là chớp mắt một lần thay vì cùng nhau cùng một lúc. Chúng tôi đạt được điều này bằng cách nhắm mục tiêu riêng từng ngôi sao riêng biệt và áp dụng một hình ảnh động khác nhau.

 Animation_Stars
  ...
  .to ("# sao-hai", 0,5,
  {Opacity: 0,5, Easy: Animation_ease}
  , 1,25, 0)
  .to ("# star-ba", 0,5,
  {Opacity: 0,5, Easy: Animation_ease}
  , .75, 0)
  ...;

17. Thêm tuyết

Đó là nó! Hoạt hình đi xe đạp hàng ngày của chúng tôi đã kết thúc và nó trông thật tuyệt vời, nhưng chúng tôi không phải dừng lại ở đó. Vì hình ảnh nằm trong SVG, chúng ta có thể dễ dàng thêm các yếu tố mới vào cảnh quan của chúng ta. Hãy thêm một chút tuyết. Chúng tôi sẽ làm điều này bằng cách sử dụng hai lớp riêng biệt. Mỗi lớp có một bộ sưu tập các hình elip đủ lớn để che cảnh quan và sau đó bộ sưu tập tương tự lặp lại ở trên.

 & lt; g id = "snow-under-layer" ... & gt;
  ...
  & lt; elip ... / & gt;
& lt; / g & gt;
& lt; g id = "lớp tuyết trên đỉnh" ... & gt;
  ...
  & lt; elip ... / & gt;
& lt; / g & gt;

18. Tạo các mốc thời gian tuyết

Chúng tôi tạo hai mốc thời gian riêng biệt cho tuyết của chúng tôi để có thể làm động chúng qua các thời lượng khác nhau. Chúng tôi cũng sẽ ghi lại thời lượng của họ vào bảng điều khiển.

 var Animation_snowtop = MỚI Timelinemax ({
  Lặp lại: -1,
  Lặp lại: 0.
});
var animation_snowbottom = Timelinemax mới ({
  Lặp lại: -1,
  Lặp lại: 0.
});

19. Làm động tuyết

Để làm động các lớp tuyết của chúng ta, chúng ta muốn di chuyển hai lớp dọc theo trục dọc. Bằng cách khác nhau, chúng ta sẽ có được sự xuất hiện của các lớp di chuyển ở các tốc độ khác nhau. Hoạt hình hoạt động bằng cách di chuyển bộ sưu tập các hình elip dọc theo trục dọc cho đến khi bộ sưu tập thứ hai thay cho thứ nhất. Sau đó chúng tôi lặp lại hình ảnh động.

 Animation_snow
  .to ("# lớp tuyết trên đỉnh", 7,
  {attr: {biến đổi: "dịch (24 -108)"}
  , dễ dàng: hoạt hình_ease}
, 0, 0)
;

Tìm bộ sưu tập đầy đủ của Bút hướng dẫn đây . Cần một nơi an toàn để lưu trữ các tập tin của bạn? Xem hướng dẫn của chúng tôi để lưu trữ đám mây .

Bài viết này ban đầu được xuất bản trong nhà thiết kế web thiết kế web sáng tạo. Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

5 API JavaScript tuyệt vời
19 ví dụ hoạt hình css mát mẻ để tái tạo
25 video âm nhạc hoạt hình tuyệt vời nhất

Animate SVG với JavaScript

01. Thiết lập tài liệu.

02. Tạo dòng thời gian đầu tiên

03. Tạo hình ảnh động đầu tiên

04. Tài sản tái sử dụng

05. Ghi nhật ký console.

06. Dòng thời gian đám mây và nhật ký bảng điều khiển

07. Hoạt hình đám mây.

08. Tạo hoạt hình thời gian ban đêm

09. Animate lớp lớp phủ

10. Hoạt hình gradient.

11. Hoạt hình mặt trời

12. Hoạt hình mặt trăng.

13. Làm động các ngôi sao.

14. Tạo dòng thời gian sao và nhật ký bảng điều khiển

15. Làm cho các ngôi sao chớp mắt

16. Trì hoãn chớp mắt

17. Thêm tuyết

18. Tạo các mốc thời gian tuyết

19. Làm động tuyết

Cách - Các bài báo phổ biến nhất

Nghệ thuật Chiarocuro: Hướng dẫn từng bước

Cách vẽ một thiếu nữ Elven

Sử dụng túi công cụ Marmoset để trình bày các mô hình trong VR

Giới thiệu về Thử nghiệm Frontend

Tạo hình ảnh 3D tương tác với ba.js

Cách tạo bảng Canvas của riêng bạn

Làm thế nào để vẽ Harley Quinn

Tạo hiệu ứng hỏa hoạn 3D

Thể loại