Hoạt hình SVG
Hoạt hình SVG
Các phần tử SVG có thể được làm động.
Trong SVG, chúng tôi có bốn thành phần hoạt hình giúp thiết lập hoặc tạo hoạt ảnh cho đồ họa SVG:
-
<set>
-
<animate>
-
<animateTransform>
-
<animateMotion>
SVG <bộ>
Phần tử <set>
đặt giá trị của một thuộc tính trong một khoảng thời gian nhất định.
Trong ví dụ này, chúng ta tạo một vòng tròn màu đỏ bắt đầu bằng bán kính 25, sau 3 giây bán kính sẽ được đặt thành 50:
Đây là mã SVG:
Ví dụ
<svg width="200" height="100" xmlns="https://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" style="fill:red;">
<set attributeName="r"
to="50" begin="3s" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
attributeName
trong phần tử<set>
xác định thuộc tính nào cần thay đổi - Thuộc tính
to
trong phần tử<set>
xác định giá trị mới cho thuộc tính - Thuộc tính
begin
trong phần tử<set>
xác định khi nào hoạt ảnh sẽ bắt đầu
SVG <hoạt hình>
Phần tử <animate>
tạo hoạt ảnh cho một thuộc tính của một phần tử.
Phần tử <animate>
phải được lồng bên trong phần tử đích.
Trong ví dụ này, chúng ta tạo một vòng tròn màu đỏ. Chúng tôi tạo hoạt ảnh cho thuộc tính cx từ 50 đến 90%. Điều này có nghĩa là vòng tròn sẽ đi từ trái sang phải:
Đây là mã SVG:
Ví dụ
<svg width="100%" height="100" xmlns="https://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" style="fill:red;">
<animate
attributeName="cx"
begin="0s"
dur="8s"
from="50"
to="90%"
repeatCount="indefinite" />
</circle>
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
attributeName
xác định thuộc tính nào sẽ hoạt hình - Thuộc tính
begin
xác định khi nào hoạt ảnh sẽ bắt đầu - Thuộc tính
dur
xác định thời lượng của hoạt ảnh - Thuộc tính
from
xác định giá trị bắt đầu - Thuộc tính
to
xác định giá trị kết thúc - Thuộc tính
repeatCount
xác định số lần hoạt ảnh sẽ phát
SVG <animate> có tính năng Đóng băng
Trong ví dụ này, chúng tôi muốn vòng tròn màu đỏ dừng lại (dừng) khi đến vị trí cuối cùng (thay vì quay trở lại vị trí bắt đầu):
Đây là mã SVG:
Ví dụ
<svg width="100%" height="100" xmlns="https://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" style="fill:red;">
<animate
attributeName="cx"
begin="0s"
dur="8s"
from="50"
to="90%"
fill="freeze" />
</circle>
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
fill="freeze"
xác định rằng hoạt ảnh sẽ đóng băng khi đến vị trí cuối cùng
SVG <animateTransform>
Phần tử <animateTransform>
tạo hiệu ứng động cho thuộc tính transform
trên phần tử đích.
Phần tử <animateTransform>
phải được lồng bên trong phần tử đích.
Trong ví dụ này, chúng ta tạo một hình chữ nhật màu đỏ sẽ xoay:
Đây là mã SVG:
Ví dụ
<svg width="200" height="180" xmlns="https://www.w3.org/2000/svg">
<rect
x="30" y="30" height="110" width="110" style="stroke:green;fill:red">
<animateTransform
attributeName="transform"
begin="0s"
dur="10s"
type="rotate"
from="0 85 85"
to="360 85 85"
repeatCount="indefinite" />
</rect>
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
attributeName
tạo hiệu ứng cho thuộc tínhtransform
của phần tử<rect>
- Thuộc tính
begin
xác định khi nào hoạt ảnh sẽ bắt đầu - Thuộc tính
dur
xác định thời lượng của hoạt ảnh - Thuộc tính
type
xác định kiểu chuyển đổi - Thuộc tính
from
xác định giá trị bắt đầu - Thuộc tính
to
xác định giá trị kết thúc - Thuộc tính
repeatCount
xác định số lần hoạt ảnh sẽ phát
SVG <animateMotion>
Phần tử <animateMotion>
thiết lập cách phần tử di chuyển dọc theo đường chuyển động.
Phần tử <animateMotion>
phải được lồng bên trong phần tử đích.
Trong ví dụ này, chúng ta tạo một hình chữ nhật và một văn bản. Cả hai phần tử đều có phần tử <animateMotion>
có cùng đường dẫn:
Đây là mã SVG:
Ví dụ
<svg width="100%" height="150" xmlns="https://www.w3.org/2000/svg">
<rect
x="45" y="18" width="155" height="45" style="stroke:green;fill:none;">
<animateMotion
path="M0,0 q60,100 100,0
q60,-20 100,0"
begin="0s"
dur="10s"
repeatCount="indefinite" />
</rect>
<text x="50" y="50"
style="font-family:Verdana;font-size:32">It's SVG!
<animateMotion
path="M0,0 q60,100 100,0 q60,-20 100,0"
begin="0s"
dur="10s"
repeatCount="indefinite" />
</text>
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
path
xác định đường dẫn của ảnh động - Thuộc tính
begin
xác định khi nào hoạt ảnh sẽ bắt đầu - Thuộc tính
dur
xác định thời lượng của hoạt ảnh - Thuộc tính
repeatCount
xác định số lần hoạt ảnh sẽ phát