SVG animatsiya
SVG animatsiya
SVG elementlarini animatsiya qilish mumkin.
SVG’da SVG grafikasining qiymatlarini o‘rnatadigan yoki uni animatsiya qiladigan to‘rtta animatsiya elementi bor:
-
<set> -
<animate> -
<animateTransform> -
<animateMotion>
SVG <set>
<set> elementi atribut qiymatini belgilangan davomiylik uchun o‘rnatadi.
Ushbu misolda radiusi 25 dan boshlanadigan qizil aylana yaratamiz, 3 soniyadan so‘ng radius 50 ga o‘rnatiladi:
SVG kodi quyidagicha:
Misol
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" style="fill:red;">
<set attributeName="r" to="50" begin="3s" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
<set>elementidagiattributeNameatributi qaysi atribut o‘zgartirilishini belgilaydi<set>elementidagitoatributi atribut uchun yangi qiymatni belgilaydi<set>elementidagibeginatributi animatsiya qachon boshlanishini belgilaydi
SVG <animate>
<animate> elementi elementning atributini animatsiya qiladi.
<animate> elementi maqsadli element ichiga joylashtirilishi kerak.
Ushbu misolda qizil aylana yaratamiz. cx atributini 50 dan 90% gacha animatsiya qilamiz. Bu aylana chapdan o‘ngga harakatlanishini bildiradi:
SVG kodi quyidagicha:
Misol
<svg width="100%" height="100" xmlns="http://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>
O‘zingiz sinab ko‘ring »
Kod izohi:
attributeNameatributi qaysi atribut animatsiya qilinishini belgilaydibeginatributi animatsiya qachon boshlanishini belgilaydiduratributi animatsiya davomiyligini belgilaydifromatributi boshlang‘ich qiymatni belgilayditoatributi oxirgi qiymatni belgilaydirepeatCountatributi animatsiya necha marta takrorlanishini belgilaydi
Freeze bilan SVG <animate>
Ushbu misolda qizil aylana oxirgi pozitsiyasiga yetganda (boshlang‘ich pozitsiyaga sakrab qaytish o‘rniga) muzlab (to‘xtab) qolishini istaymiz:
SVG kodi quyidagicha:
Misol
<svg width="100%" height="100" xmlns="http://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>
O‘zingiz sinab ko‘ring »
Kod izohi:
fill="freeze"atributi animatsiya oxirgi pozitsiyasiga yetganda muzlab qolishini belgilaydi
SVG <animateTransform>
<animateTransform> elementi maqsadli elementdagi transform atributini animatsiya qiladi.
<animateTransform> elementi maqsadli element ichiga joylashtirilishi kerak.
Ushbu misolda aylanadigan qizil to‘rtburchak yaratamiz:
SVG kodi quyidagicha:
Misol
<svg width="200" height="180" xmlns="http://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>
O‘zingiz sinab ko‘ring »
Kod izohi:
attributeNameatributi<rect>elementiningtransformatributini animatsiya qiladibeginatributi animatsiya qachon boshlanishini belgilaydiduratributi animatsiya davomiyligini belgilayditypeatributi transformatsiya turini belgilaydifromatributi boshlang‘ich qiymatni belgilayditoatributi oxirgi qiymatni belgilaydirepeatCountatributi animatsiya necha marta takrorlanishini belgilaydi
SVG <animateMotion>
<animateMotion> elementi element harakat yo‘li bo‘ylab qanday harakatlanishini belgilaydi.
<animateMotion> elementi maqsadli element ichiga joylashtirilishi kerak.
Ushbu misolda to‘rtburchak va matn yaratamiz. Ikkala elementda ham bir xil yo‘lga ega <animateMotion> elementi bor:
SVG kodi quyidagicha:
Misol
<svg width="100%" height="150" xmlns="http://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>
O‘zingiz sinab ko‘ring »
Kod izohi:
pathatributi animatsiya yo‘lini belgilaydibeginatributi animatsiya qachon boshlanishini belgilaydiduratributi animatsiya davomiyligini belgilaydirepeatCountatributi animatsiya necha marta takrorlanishini belgilaydi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!