Cách tạo hoạt hình SVG bằng CSS
Hoạt hình SVG có thể được thực hiện thông qua các yếu tố bản địa như
CSS Animation cũng có thể là một cách khác để sử dụng thư viện JavaScript như SnapSVG. Trong bài đăng này, chúng tôi sẽ xem những gì chúng tôi có thể cung cấp với CSS Animation trong SVG.
1. Tạo hình
Trước hết, chúng ta sẽ cần vẽ các hình dạng và đối tượng mà chúng ta muốn tạo hiệu ứng. Bạn có thể sử dụng các ứng dụng như Phác thảo, Adobe Illustrator, hoặc là Inkscape để tạo ra một.
Trong ví dụ này, tôi đã vẽ một bầu trời nhiều mây làm nền, và một con tàu tên lửa bắn lên trên, ngọn lửa bao gồm:
Sau khi thực hiện xong bản vẽ, chúng ta cần xuất từng đối tượng chúng ta đã tạo vào SVG.
Tôi sẽ sử dụng Phác thảo làm ví dụ cho bước này. Chọn đối tượng bạn muốn chuyển sang định dạng SVG. Ở dưới cùng bên phải của cửa sổ của bạn, nhấp vào Làm cho xuất khẩu. Chọn định dạng SVG, sau đó nhấp vào Xuất tên đối tượng. Bạn cần phải làm một đối tượng này tại một thời điểm.
2. Chèn SVG vào HTML
Khi bạn mở tệp SVG trong trình chỉnh sửa mã, bạn sẽ thấy mã SVG khá lộn xộn. Do đó, trước khi chúng tôi triển khai tệp SVG, hãy dọn dẹp mã và tối ưu hóa nó bằng công cụ dòng lệnh này có tên là SVGO.
Phóng Thiết bị đầu cuối hoặc là Dấu nhắc lệnh, và cài đặt SVGO với dòng lệnh này:
[sudo] npm cài đặt -g svgo
Điều chỉnh lệnh, svgo, trên tệp SVG bằng cách sử dụng --đẹp để tạo mã SVG có thể đọc được:
tên lửa Svgo.svg --pretty
Nếu bạn có nhiều SVG trong một thư mục, bạn có thể tối ưu hóa tất cả chúng cùng một lúc. Giả sử thư mục được đặt tên / hình ảnh, sau đó từ thư mục cha sử dụng lệnh này:
hình ảnh của Svgo -f
Hãy xem sự khác biệt trước và sau khi sử dụng SVGO.
Sao chép mã trong tệp SVG và dán vào tệp HTML. Chúng tôi sẽ làm việc trên không gian làm việc rộng 800px x 600px, vì vậy đừng quên xác định chiều rộng trên phần tử SVG.
SVG được đặt trong tệp HTML. Chúng ta sẽ cần xác định ID cho từng đối tượng, vì vậy chúng ta có thể chọn chúng trong CSS sau.
Đối với hướng dẫn này, chúng ta cần xác định ID cho tên lửa và ngọn lửa và một số đám mây. Để các đối tượng xử lý giai đoạn hoạt hình sau này, chúng ta cần thêm ID - bạn cũng có thể dùng lớp học - đến từng đối tượng. Ở giai đoạn này, mã sẽ trông như thế này:
3. Animate bằng CSS
Bây giờ chúng ta hãy vui vẻ. Kế hoạch là đẩy tên lửa lên không gian. Tên lửa được chia thành hai nhóm; tên lửa và ngọn lửa.
Trước hết, chúng tôi đặt tên lửa vào giữa không gian làm việc, như sau:
#rocket biến đổi: dịch (260px, 200px);
Những gì bạn thấy là đây:
Bây giờ để làm cho tên lửa trông như đang đi lên, chúng ta cần tạo ra ảo ảnh của những đám mây rơi xuống. CSS mà chúng tôi sử dụng cho việc này là:
# cloud1 animation: fall 1s linear infinite; @keyframes rơi từ Transform: translateY (-100px); thành Transform: translateY (1000px)
Để làm cho nó trông thật hơn nữa, hãy tạo hoạt hình bốn đám mây và làm cho chúng “ngã” ở tốc độ khác nhau. Chúng tôi cũng sẽ định vị chúng khác với trục X.
Đám mây thứ hai sẽ có mã như thế này:
# cloud2 animation: fall-2 2s linear infinite; @keyframes fall-2 từ Transform: translate (200px, -100px); thành Transform: dịch (200px, 1000px)
Lưu ý rằng chúng tôi đã di chuyển đám mây # 2 một chút sang bên phải, bởi 200px với dịch. Ở giai đoạn này, kết quả sẽ như thế này.
Tiếp theo, hãy làm cho tên lửa đi vào cuộc sống. Chúng tôi sẽ chỉ định một khung hình hoạt hình, như sau:
#rocket hình ảnh động: popup 1s dễ dàng vô hạn; @keyframes bật lên 0% biến đổi: dịch (260px, 200px); 50% biến đổi: dịch (260px, 240px); 100% biến đổi: dịch (260px, 200px);
Và thêm hình ảnh động vào ngọn lửa tên lửa là tốt:
#flame animation: lắc .2s tuyến tính vô hạn; @keyframes lắc 0% biến đổi: dịch (55px, 135px) xoay (7deg); 20% biến đổi: dịch (55px, 135px) xoay (0deg); 40% biến đổi: dịch (55px, 135px) xoay (-7deg); 60% biến đổi: dịch (55px, 135px) xoay (0deg); 100% biến đổi: dịch (55px, 135px) xoay (0deg);
Đúng! Bây giờ các mã của chúng tôi đã được đặt xong, hình động sẽ hoạt động trên SVG của chúng tôi.
Hãy nhìn vào tên lửa của chúng tôi nổ vào không gian.
Suy nghĩ cuối cùng
Hoạt hình không phải là tính năng dễ nhất trong CSS để nắm bắt. Nhưng hy vọng bạn sẽ tìm thấy hướng dẫn này như một điểm khởi đầu tốt để khám phá CSS Animation trên SVG hơn nữa; bạn sẽ ngạc nhiên khi biết những gì có thể đạt được với CSS Animation trong tay.
Nếu bạn muốn bắt đầu với những điều cơ bản, bạn có thể bắt đầu ở đây với bài đăng này: A Look Into: Animationable Vector Graphics (SVG) Animation hoặc theo phần còn lại của loạt SVG.
- Xem bản demo
- Tải xuống nguồn
