https://viblo.asia/p/thuc-hanh-tu-cot-anh-dong-svg-animation-3P0lP0Vmlox
Last updated
Sau vài tháng lặn ngụp trong đám bài ThreeJS, thì hôm nay mình sẽ refresh 1 tí, chọn chủ đề đơn giản vui vẻ, quay lại với css nhé
Câu chuyện là thế này, bạn mình có gửi cho mình trang https://loading.io/spinner vì trang đó có cái spinner con mèo khá là hay .
Vào xem thì mình nhận ra là trang này có rất nhiều hình loading vui vui, mà như con mòe này ko chỉ có thể đổi chọn palette màu, mà còn chỉnh được speed, size rồi preview trước khi download với mấy loại định dạng nữa.
Lúc đầu mình tưởng là họ làm sẵn palette màu và kích thước cho con mòe, rồi record lại như ảnh gif cơ, nhưng mà như thế tù túng quá, và ở đây không chỉ đổi palette được mà còn có thể custom cho từng màu nữa. Vậy thì record là bất khả thi rồi. Thế họ làm như nào mà nó vừa chuyển động flexible được hay vậy?
Nếu là sử dụng JS, thì lúc ảnh tải xuống lại phải chèn js để chạy à? Trong khi tải xuống nhận về có mỗi cái ảnh để đặt vào thẻ <img> mà thôi.
Vì định dạng download có cả SVG, nên mình đoán là họ dùng svg rồi. À thì đến đây họ có yêu cầu mua license để tải mấy cái icon loading này về, mà mình thì chỉ muốn tìm hiểu cách hoạt động thôi, nên có dùng 1 ít trick để check source
Kết quả sau khi xóa từng phần tử để check thì hóa ra là ảnh svg ấy ngoài các thẻ path bình thường ra thì có thêm 1 thứ lạ là thẻ <animation> đã làm cho nó chuyển động được như vậy.
Với cái mục tiêu là học để làm mấy trang có animation cool ngầu trên mạng, đồng thời tối giản hóa js thì tất nhiên là mình muốn tìm hiểu cách animation cho SVG như này rồi
Bài này là kết quả tìm hiểu ở mức 'nhập môn' của mình chia sẻ cho mọi người. Nếu sau này có thể tìm hiểu được những cái cao siêu hơn thì mình sẽ lại chia sẻ, tất nhiên là bằng cách dễ hiểu nhất cho dễ học
Vậy dưới đây mình sẽ hướng dẫn các bạn dựa trên base là các bài css trước của mình nhé:
https://codepen.io/bunnypi04/pen/zYKMKeP?editors=1100
Lưu ý, trên firefox ko xem chuyển động được :v
Trước hết mình sẽ giới thiệu qua về svg animate nhé
Như đã hướng dẫn ở các bài trước, thì mình có thể kéo dãn, dịch chuyển, thay đổi trạng thái của các đối tượng HTML bằng css rồi.
Và hình ảnh SVG, phân tích kỹ ra cũng chính là 1 cấu trúc HTML, thì đương nhiên cũng có thể animate được như HTML rồi. Tuy nhiên, việc animate cho SVG sẽ có chút khác biệt. Bạn có thể đọc tài liệu đầy đủ tại đây nhé: https://www.w3.org/TR/2001/REC-smil-animation-20010904/
Để phục vụ cho việc animate thì sẽ sử dụng các tag sau:
<animate>: animate các thuộc tính (attribute) và đặc tính (properties) với thời gian xác định
<set>: 1 cách viết tắt để animate, sử dụng cho animation không có value attribute/properties như là các khả năng hiển thị
<animateMotion>: animate theo motion path
<animateColor>: thay đổi màu sắc của attribute (border color,...)
Để animate được theo ý muốn, thì cần thẻ <animate>1 số attribute với value phù hợp, cụ thể là các attribute như dưới đây:
attributeName = <attributeName>. Attribute này quy định giới hạn animate cho đối tượng: giới hạn là animate opacity, hoặc animate color
VD:
attributeType = "CSS | XML | auto": Như VD attributeName ở trên, thì với các attribute liên quan tới css sẽ cần có define attributeType = "CSS" rồi mới attributeName được. Có 3 loại type như trên, mặc định sẽ là 'auto', còn 'css' tất nhiên là dùng trong TH attributeName là tên của 1 thuộc tính css; với 'XML' sẽ được sử dụng nếu attributeName là 1 XML namespace.
targetElement = "<target selector>" hoặc xlink:href="<target id>"
Thông thường, bạn có thể target cho <path>, <line>, hoặc thành phần thẻ svg nào bằng cách viết thẻ <animate> trực tiếp vào trong scope của thẻ đó: <path id="paw"><animate/></path>
Tuy nhiên thì trong 1 số trường hợp phức tạp, hoặc bạn muốn viết tách biệt animate ra, thì có thể sử dụng targetElement như sau:
Với xlink:href="#item_id", thì nó hoạt động giống như link vậy: khi bạn viết menu cho page, kèm theo thẻ <a href="#menu-item"> thì khi click vào sẽ được đưa xuống vị trí phần tử có id là id="menu-item". Vì vậy, target của xlink:href phải nằm trong hình ảnh svg hiện tại
begin: attribute này định nghĩa thời điểm bắt đầu animate, giống như animation delay vậy. Có vài loại begin thường sử dụng:
begin="click": click vào ảnh thì bắt đầu animate
begin="0s" hoặc begin="3s": thời điểm bắt đầu là ngay lập tức hoặc sau 3s
begin="event-value"- Điều khiển bằng sự kiện của đối tượng khác.
Chẳng hạn: begin=" x.load " bắt đầu animate khi đối tượng x được load; begin="x.focus+3s": sau khi focus đối tượng x là 3s thì animate; begin="x.endEvent+1.5m"; begin="x.repeat": bắt đầu mỗi khi event x lặp lại. VD:
dur="5s": Tổng thời gian animation. Giả sử bạn muốn đổi màu cho hình, từ màu đỏ sang màu trắng, thì dur="5s" nghĩa là sau khi begin được 5s sẽ hoàn thành chuyển đổi màu.
Để xác định cái gì sẽ được animate như thế nào, sẽ cần 1 vài giá trị sau:
from="blue" to="orange": xác định trạng thái đầu và trạng thái cuối của animation. Nếu attributeName="d" (animate hình học), thì không cần cặp giá trị này
Giống như animation bình thường (xem lại đây), bạn có thể chọn trạng thái kết thúc của animation là giữ nguyên trạng thái cuối, hoặc trở về như trước khi animate:
fill="freeze": sau khi kết thúc animation thì thời điểm kết thúc như nào thì đứng nguyên như thế
fill="remove": sau khi kết thúc animation thì trở về như chưa có gì xảy ra
Ngoài ra, sau khi kết thúc, thì có thể tùy chỉnh restart cho animation nữa (do mình có thể set lặp lại cho animation và do thời điểm start của animation có thể phụ thuộc vào các element khác, thì cần cái này để chặn việc restart liên tục do bị ảnh hưởng - xem phía dưới nhé)
restart="always": có thể restart bất kỳ lúc nào, đây là giá trị mặc định nếu không viết restart
restart="whenNotActive": chỉ có thể restart nếu nó ko active (đang không thực hiện animation)
Sử dụng repeatCount có thể chỉnh được số lượng lần lặp lại animation theo ý muốn của bạn:
repeatCount="indefinite": lặp lại vĩnh viễn luôn, cứ chạy hết lại chạy lại từ đầu
repeatCount="4": lặp lại 4 lần thôi là mệt rồi
Vấn đề này sẽ hơi khó hiểu và khó sử dụng. Trước hết, hãy đọc qua về đường cong 2 control point ở trong bài Vẽ SVG path ở phần đường C (Cubic Bezier Curves )
Để xác định các đường C, cần 3 cặp tham số: Cặp đầu tiên là tọa độ Control point của start point, cặp tiếp theo là tọa độ control point của end point, cuối cùng là tọa độ end point
Thì tương tự như vậy, để xác định đồ thị vận tốc chuyển động của animation, sẽ đại diện cho 3 cặp tọa độ đó bằng 2 cặp attribute tương ứng nhau: keyTimes đại diện cho cặp tọa độ control start point, và có keySplines tương ứng với nó là 2 cặp thông số end point của đường cong C.
https://codepen.io/bunnypi04/pen/zYKMKeP?editors=1100
(Lưu ý, trên firefox ko xem chuyển động được :v)
Như hình con mèo của mình, mình có 2 trạng thái chạy lặp lại thôi:
Trạng thái 1: giơ tay trái, tay phải đập bàn =))
Trạng thái 2: tay trái đập bàn, tay phải nhấc lên
Trông nó như thế này:
Như hình thì bạn có thể thấy nó có đủ 2 trạng thái trên cùng 1 file svg luôn :v
Như bài hướng dẫn vẽ SVG, thì chỉ cần trích được path vẽ hình cái tay thôi. Trên thẻ svg kia đã có note sẵn tay của mèo rồi: id='paw-left', id='paw-right'. Thậm chí còn ghi chú cả trạng thái giơ tay (paw-left--up) và đập bàn (paw-left--down) nữa.
Như phần lý thuyết đã trình bày dài dòng ở trên, thì có thể thấy là cần sử dụng tới animate path rồi: attributeName="d", trường hợp này chỉ cần animate cho 2 cái tay là được
Và theo hướng dẫn mà làm thôi: animate attributeName="d" sẽ đi kèm với values="<path d trạng thái 1>; <path d trạng thái 2>; ..." thay vì sử dụng from và to. Ở đây trạng thái 1 và 2 là 2 trạng thái của mỗi bàn tay, tương ứng với trạng thái up và down.
Kèm theo đó, mình cho nó repeat vô hạn indefinite luôn, vậy là sẽ có code như này đây:
Để 'xử lý' nốt cái paw-pad này thì hãy xem tiếp cách dưới nhé:
Do hạn chế của animate path trên fire fox mà khiến cho hình ảnh không 'động đậy' được, nên mình nghĩ ra cách 'nông rân' này dùng tạm.
Về cơ bản, cách này như tiêu đề, đấy là sử dụng thuộc tính display của css, 2 trạng thái path sẽ thay nhau ẩn/hiện tương ứng với display: none/block để tạo ra hiệu ứng như phía trên. Tất nhiên là cách này có hạn chế nhiều, chẳng qua là dùng được vài trường hợp animate kiểu: vài khung hình/đơn vị thời gian không quá bé mà thôi.
Vậy là, mình sẽ làm như sau:
Đầu tiên: hiển thị paw-left--up và paw-right--down (display: block), đồng thời ẩn paw-left--down và paw-right--up (display: none)
Tiếp theo, hiển thị/ ẩn ngược lại
Và lặp lại Infinite
Vậy là mình có 2 cặp thẻ animate, trỏ tới 2 cặp trạng thái của 2 tay mèo:
Với ví dụ thực hành ở trên, thì có thể thấy là cái sự transform nó khá là 'cứng', chỉ là bật tắt 2 cái ảnh mà thôi. Nhưng mà như con ditto kia thì nhìn nó 'mượt' hơn hẳn nhỉ?
Như trên minh họa, tức là với values có thứ tự vẽ trong path là M -> C -> Z, thì các trạng thái tiếp theo cũng phải có thứ tự là: M -> C -> Z.
Với hình con mèo trên của mình, thì nó không map với nhau nên không thể chạy trên firefox, cũng như không smooth được. Việc sử dụng 2 ảnh SVG có sẵn sẽ khó mà đạt được điều này, vậy nên cái này mới được gọi là 'Nâng cao'
Phía dưới đây mình sẽ hướng dẫn sử dụng thẻ phổ biến nhất, là <animate> nhé. Sau này tìm hiểu sâu hơn thì mình sẽ viết phần 2 sau
restart="never": khỏi cần nói cũng hiểu, chặn luôn ko cho restart nữa
Điều đầu tiên, muốn tạo ảnh động, trước hết bạn cần các key frame cho các trạng thái chuyển động đã. Dễ hiểu là với mỗi 1 cử động sẽ tương ứng với 1 ảnh chụp ấy
Như vậy thì mình cần 2 hình ảnh cho mỗi trạng thái này, nếu bạn muốn chuyển động đa dạng hơn thì cần có hình ảnh mẫu cho mỗi chuyển động nhé. Hình con mèo này mình lấy trên trang CV của TrungQuânDev vì thấy nó hay hay . Dưới đây là hình mà mình lấy được trên trang về:
Như đã nói ở trên, mình cần 2 trạng thái đập bàn. 2 trạng thái này khác nhau ở mỗi cái tay thôi. Vậy thì cần trích 2 cái tay ra là được .
Làm tương tự với tay trái nhưng đảo ngược thứ tự up - down so với tay phải là được rồi
Ơ nhưng mà đến đây thấy còn gì đó chưa đúng . Còn 2 cái lòng bàn tay hồng hồng nữa kìa .
Giờ thì hiệu ứng hệt như phía trên rồi nhé . Xử lý tương tự sử dụng display là có thể animate được cái paw-pad rồi nhé
Việc biến hình mượt như vậy là hoàn toàn có thể, nhưng mà nó sẽ khá phức tạp . Nếu để ý thì cái VD kia mình có note là: không chạy được trên Firefox. Lý do là vì firefox chỉ cho phép attributeName="d" có sự mượt như ditto kia thôi. Hay cụ thể hơn, đấy là values các trạng thái của animation có attributeName="d" phải map với nhau:
