Nhìn vào hoạt hình đồ họa vectơ có thể mở rộng (SVG)
Hôm nay chúng ta sẽ tiếp tục thảo luận về Đồ họa vectơ có thể mở rộng (SVG), và lần này chúng ta sẽ làm việc với Hoạt hình SVG. Mặc dù vậy, đừng sợ, SVG Animation tương đối dễ dàng và thực sự trong bài đăng này, chúng tôi sẽ bắt đầu từ những điều cơ bản.
Thực hiện cơ bản
Hoạt hình trong SVG có thể được thực hiện thông qua
Như bạn có thể thấy từ đoạn mã trên, chúng tôi thêm
tên thuộc tính: Thuộc tính này chỉ định thuộc tính của thành phần nào sẽ bị ảnh hưởng trong hình ảnh động.
từ: Thuộc tính này là tùy chọn, chúng tôi có thể chỉ định một giá trị chính xác hoặc để nó để cho nó bắt đầu từ nơi nó được.
đến: Thuộc tính này chỉ định hướng hoạt hình. Tùy thuộc vào giá trị được chỉ định trong tên thuộc tính, kết quả có thể thay đổi. Nhưng trong ví dụ này, nó sẽ mở rộng Chiều cao.
sầu riêng: Thuộc tính này chỉ định thời lượng hoạt hình. Giá trị của thuộc tính này được thể hiện trong Cú pháp giá trị đồng hồ. Ví dụ, 02:33 đại diện cho 2 phút và 33 giây, trong khi 3h bằng 3 giờ, nhưng chúng tôi không cần lâu như vậy nên chúng tôi đã chỉ định thời lượng cho 3s hoặc 3 giây;
Điều tương tự cũng xảy ra với r).
- Bản trình diễn triển khai cơ bản
Yếu tố di chuyển
Khi di chuyển các phần tử SVG, chúng ta chỉ cần nhắm mục tiêu tọa độ của phần tử x và y;
Trong ví dụ trên, chúng tôi di chuyển hình chữ nhật từ 0 đến 200 trong 3 giây, hình chữ nhật sẽ xuất hiện di chuyển theo chiều ngang từ trái sang phải. Ngoài ra, nếu bạn xem xét kỹ, chúng tôi cũng đã thêm một thuộc tính khác cho lấp đầy.
lấp đầy thuộc tính ở đây không liên quan gì đến màu nền như trong các phần tử SVG khác. Thuộc tính này chỉ định cách hoạt hình sẽ hoạt động sau khi thời lượng kết thúc. Trong ví dụ này, chúng tôi Đông cứng yếu tố bị ảnh hưởng để nó ở lại nơi kết thúc hoạt hình.
Nó cũng hoạt động tương tự như cx hoặc là C y, như vậy
- Trình diễn phần tử di chuyển
Animate Nhiều thuộc tính
Cho đến nay, chúng tôi chỉ nhắm mục tiêu một thuộc tính là hoạt hình, nhưng cũng có thể làm động nhiều hơn một thuộc tính cùng một lúc. Ví dụ dưới đây cho thấy cách chúng tôi làm điều đó:
Như bạn có thể thấy, nó hoạt động theo cách tương tự, chỉ bây giờ chúng ta có hai
- Bản giới thiệu nhiều thuộc tính
Theo một con đường
Trong bài viết trước của chúng tôi về Làm việc với văn bản trong SVG, chúng tôi đã chỉ cho bạn cách chuyển Văn bản sang Đường dẫn. Cũng có thể làm điều tương tự trong Hoạt hình SVG, chúng ta có thể làm động một phần tử để theo một Path. Đây là một ví dụ.
Đường dẫn được xác định rõ hơn trong một ID với
Đó là nó, bây giờ hãy xem nó hoạt động;
- Theo dõi đường dẫn
Biến đổi
Chúng ta cũng có thể sử dụng biến đổi như tỉ lệ, dịch và quay cho Hoạt hình, và để làm như vậy, chúng tôi sẽ sử dụng
Các chuyển đổi trong SVG chia sẻ các nguyên tắc tương tự với CSS3 và chúng tôi đã trình bày về nó khá toàn diện trong bài viết trước của chúng tôi về Chuyển đổi CSS3 2D.
- Demo chuyển đổi
Suy nghĩ cuối cùng
Tùy thuộc vào trình độ của bạn trên SVG Animation, bạn có thể tạo một cái gì đó như thế này.
Một lợi thế của việc sử dụng SVG Animation so với Flash Animation là nó không dựa vào các plugin của bên thứ ba để hoạt động và nó cũng nhanh hơn đáng kể so với Flash. Sau khi Adobe ngừng hỗ trợ Flash của họ trong Android, bạn có thể muốn bắt đầu thử phương pháp này để phục vụ hoạt hình trong trang web tiếp theo của mình.
Tham khảo thêm
- Tài liệu sinh động SVG
- Kỹ thuật hoạt hình SVG nâng cao
- Xem bản demo
- Tải xuống nguồn
