2014 оны 1-р сарын 5-ны 16:27 цагт

SVG замын элементийг хөдөлгөөнт болгож байна

• вэб сайт хөгжүүлэх,
• Өгөгдлийн дүрслэл

• Заавар

Олон хүмүүс шинэ үеийн тоглоомын консолуудын тоймыг үзсэн гэж би бодож байна Полигон (Vox Media). Эдгээр нь консолуудыг зураг төслийн загвараар зурсан зургууд юм.

Шүүмжүүд нь гайхалтай, ер бусын, шинэ харагдаж байв. Тайлбарын гол онцлог нь SVG хөдөлгөөнт дүрс, үүнтэй төстэй зүйлийг хэрхэн яаж хийх, хуучин сайн SVG нь замын элементийн хөдөлгөөнт дүрсийн хувьд өөр ямар "нууц" чадварыг нууж байгааг олж мэдэх боломжтой.

Цус харвалт-дашаррей интерполяци, онол

Ерөнхийдөө ийм шугаман хөдөлгөөнт дүрсний техник нь шинэ зүйл биш бөгөөд саяхныг хүртэл SVG болон түүнтэй холбоотой бүх зүйл миний бодлоор шударга бусаар мартагдсан байсан ч азаар байдал өөрчлөгдөж байна. Тиймээс замын элементийн stroke-dasharray шинж чанарын ачаар замын элементийг хөдөлгөөнтэй болгох заль мэх боломжтой юм. Энэ шинж чанар нь тасархай шугамын параметрүүдийг, тухайлбал цус харвалтын урт ба цус харвалт хоорондын зайг тохируулах боломжийг олгодог. Хэрэв бид цус харвалтын уртыг шугамын бүх урттай тэнцүү болговол бид ердийн хатуу шугамыг авна. Хэрэв бид цус харвалтын уртыг тэгтэй тэнцүүлж, цоорхойн уртыг дахин шугамын бүх урттай тэнцүү болговол бид үл үзэгдэх шугамыг авна. Цус харвалтын уртыг бүх шугамын урттай тэнцүү зайтай аажмаар нэмэгдүүлснээр бид түүний зургийг дуурайж болно. Энэ аргын тусламжтайгаар шугамын эхнээс зураг зурах болно. Хэрэв та гэнэт төгсгөлөөс нь зурах шаардлагатай бол өөр нэг шинж чанарыг ашиглах хэрэгтэй: stroke-dashoffset . Энэ шинж чанар нь эхний цохилтын офсетийг тодорхойлдог. Тиймээс, офсетийг багасгаж, цус харвалтын уртыг нэмэгдүүлснээр бид шугамын төгсгөлөөс зураг авдаг.

-аас ирсэн залуус Vox MediaТэд эрлийз хувилбарыг ашигласан (миний бодлоор энэ нь илүүц юм), дашрамд хэлэхэд, та үүнийг хэрхэн хийсэн талаар өөрийн блогоос уншиж болно (мөн хийх ёстой): Полигон функцийн дизайн: Хөгжилтэй, ашиг олох зорилгоор SVG хөдөлгөөнт дүрсүүд.

SVG хөдөлгөөнт дүрсийг хэрэгжүүлэх

IN Vox MediaТэд гөлгөр хөдөлгөөнт дүрс хийхийн тулд requestAnimationFrame-г ашиглахыг санал болгож байгаа ч бидний зорилго арай өөр байгаа тул бид илүү хялбар замаар явж, D3.js номын сан болон түүнд хэрэгжсэн үргэлжлэх хугацаанд суурилсан хөдөлгөөнт дүрсийг ашиглах болно.

Өгүүллийн эхнээс консолыг хөдөлгөөнд оруулахад ашигласан бодит ажлын код энд байна.

Queue() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(бэлэн); функц бэлэн(алдаа, xml) ( //HTML баримт бичигт svg файлаа нэмж байна var importedNode = document.importNode(xml.documentElement, үнэн); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("өргөн"), svgHeight = svg.attr("өндөр"); var paths = svg.selectAll("зам") .call(шилжилт) ; функцийн шилжилт(зам) ( зам.шилжилт() .үргэлжлэх хугацаа(5000) .attrTween("stroke-dasharray", tweenDash) .бүр("төгсгөл", функц() ( d3.select(энэ).call(шилжилт) ; )); // хязгааргүй давталт ) функц tweenDash() ( var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); // харвалтын интерполяци -dasharray attr буцах функц(t) (буцах i(t); ); ) )

Одоохондоо эргүүлэлгүйгээр зүгээр л шугамын дагуу хөдөлж эхэлцгээе.

Queue() .defer(d3.xml, "wiggle.svg", "image/svg+xml") .await(бэлэн); функц бэлэн(алдаа, xml) ( //HTML баримт бичигт svg файлаа нэмж байна var importedNode = document.importNode(xml.documentElement, үнэн); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"); var path = svg.select("зам#wiggle"), startPoint = pathStartPoint(зам); var marker = svg.append("дугуй"); marker.attr(" r", 7).attr("transform", "translate(" + startPoint + ")"); transition(); //Тэмдэглэгээний функцийг байрлуулах зам эхлэх цэгийг авах pathStartPoint(зам) ( var d = path.attr( "d"), dsplitted = d.split(" "); буцах dsplitted.split(","); ) функцийн шилжилт() ( marker.transition() .duration(7500) .attrTween("transform", translateAlong( path.node())) .each("төгсгөл", шилжилт);// хязгааргүй давталт ) функц translateAlong(зам) ( var l = path.getTotalLength(); буцах функц(i) ( буцах функц(t) ( var p = path.getPointAtLength(t * l); буцаана "translate(" + p.x + "," + p.y + ")";//Маркерийг зөөх ) ) ) )
Энд pathStartPoint(зам) нь замын элементийн шинж чанараас мөрийн эхлэлийн координатыг татаж авдаг. TranslateAlong(path) дээр манай тэмдэглэгээний координатыг интерполятор ашиглан тохируулдаг. Жишээг эндээс харж болно: D3.js-тэй SVG замын элементийн дагуух тэмдэглэгээний хөдөлгөөнт дүрс. Та мөн шугаман зургийн хөдөлгөөнт дүрс болон тэмдэглэгээний хөдөлгөөнийг хослуулж болно; энэ нь дараах байдлаар харагдаж болно: D3.js II бүхий SVG замын элементийн дагуух тэмдэглэгээний хөдөлгөөнт дүрс.

Даалгаврыг хүндрүүлж, эргэлтийг нэмье (за, тэмдэглэгээг тойргоос илүү сонирхолтой зүйл болгон өөрчилье). Тэмдэглэгээ болгон бид 48 өргөн, 24 урттай пуужинтай болно. Тэмдэглэгээний анхдагч зангуу цэг нь зүүн дээд буланд байдаг тул бид үүнийг тэмдэглэгээний төв рүү наах байдлаар өөрчлөх хэрэгтэй. Та мөн эргүүлэхдээ үүнийг анхаарч үзэх хэрэгтэй, учир нь энэ нь зүүн дээд буланд анхдагч байдлаар тохиолддог. Бид нүүлгэн шилжүүлэх асуудлыг цэгцэлсэн бололтой. Одоо шууд эргэлт рүү шилжье, энд тангенсийн тодорхойлолт бидэнд туслах болно, бид арктангенс ашиглан өнцгийг тодорхойлох болно.

Интерполяторыг тодорхойлох translateAlong(path) функц нь дараах байдалтай харагдана.

Function translateAlong(зам) ( var l = path.getTotalLength(); var t0 = 0; буцах функц(i) ( буцах функц(t) ( var p0 = path.getPointAtLength(t0 * l);//өмнөх цэг var p = path.getPointAtLength(t * l);////одоогийн цэгийн өнцөг = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//тангенсийн өнцөг t0 = t ; //Төвийг пуужингийн төв рүү шилжүүлэх var centerX = p.x - 24, centerY = p.y - 12; буцах "translate(" + centerX + "," + centerY + ")rotate(" + өнцөг + " 24" + " 12 "+")"; )))
Хэрэгжилтийг эндээс харж болно.

SVG графикийг хөдөлгөөнт элементүүдийг ашиглан хөдөлгөөнт болгож болно. Эдгээр элементүүдийг анх SMIL хөдөлгөөнт дүрслэлд тодорхойлсон; Үүнд:

• — тодорхой хугацааны туршид скаляр шинж чанарууд болон шинж чанаруудын хөдөлгөөнт дүрсийг тохируулах боломжийг танд олгоно;
• нь харагдах байдлын шинж чанарууд гэх мэт тоон бус шинж чанарууд болон шинж чанаруудад хөдөлгөөнт утгыг оноох боломжийг олгодог хөдөлгөөнт дүрсний тохиромжтой товчлол юм;
• - элементийг хөдөлгөөний замын дагуу хөдөлгөдөг;
• - тодорхой хугацааны туршид тодорхой шинж чанарууд эсвэл шинж чанаруудын өнгөний утгыг өөрчилдөг. Элемент ашиглаж байгааг анхаарна уу өнгөний утгыг авч болох шинж чанаруудыг тодорхойлохын тулд хөдөлгөөнт элемент ашиглахтай харьцуулахад хоцрогдсон практик юм. Хэдийгээр энэ нь SVG 1.1 техникийн үзүүлэлтэд байсаар байгаа ч тэрхүү тодорхойлолт нь түүнийг хуучирсан гэж тодорхой заасан; Энэ нь SVG-2 тодорхойлолтоос бүрэн хасагдсан.

SMIL тодорхойлолтод тодорхойлсон хөдөлгөөнт элементүүдээс гадна SVG нь SMIL хөдөлгөөнт дүрслэлд нийцэх өргөтгөлүүдийг агуулдаг; Эдгээр өргөтгөлүүд нь элементийн үйл ажиллагааг өргөтгөх шинж чанаруудыг агуулдаг болон нэмэлт хөдөлгөөнт элементүүд.

SVG өргөтгөлүүд нь:

• — SVG хувиргах шинж чанаруудын аль нэгэнд тодорхой хугацааны туршид хөдөлгөөнт дүрсийг тохируулах боломжийг олгодог, жишээлбэл, хувиргах шинж чанар;
• зам (атрибут) - animateMotion элементийн замын шинж чанарт дурын SVG замын өгөгдлийн синтакс функцийг зааж өгөхийг зөвшөөрдөг. SMIL хөдөлгөөнт дүрс нь зөвхөн SVG замын өгөгдлийн синтаксийн дэд багцыг замын шинж чанарт ашиглахыг зөвшөөрдөг.).

Бид дараагийн хэсэгт animateMotion-ийн талаар ярих болно.

• - animateMotion элементтэй хамт хөдөлгөөний зам гэх мэт ашиглах ёстой хөдөлгөөний замыг заах зорилгоор ашигладаг. mpath элемент нь animateMotion элемент дотор хаалтын тагны өмнө багтсан;
• гол цэгүүд (шинж чанар) - хөдөлгөөнт элементийн замын дагуу хөдөлж буй хурдыг нарийн хянах зорилгоор animateMotion-ийн шинж чанар болгон ашигладаг;
• rotate(attribute) - Объектыг автоматаар эргүүлэх эсэхийг хянахын тулд animateMotion-ийн шинж чанар болгон ашигладаг бөгөөд ингэснээр түүний x тэнхлэгийн цэгүүд хөдөлгөөний замын шүргэгч векторын чиглэлтэй ижил (эсвэл эсрэг) чиглэлд эргэдэг. Энэ шинж чанар нь таны хүссэнээр ажиллах зам дагуу хөдөлгөөнийг бий болгох түлхүүр юм. Энэ талаар animateMotion хэсгээс дэлгэрэнгүй үзнэ үү.

SVG анимэйшн нь мөн чанараараа CSS хөдөлгөөнт дүрс, шилжилттэй төстэй байж болно. Cyframes бий болж, бүх зүйл хөдөлдөг, өнгө өөрчлөгддөг гэх мэт. Гэсэн хэдий ч энэ нь CSS хөдөлгөөнт дүрсний хийж чадахгүй зарим зүйлийг хийж чадна. Би энэ гарын авлагад энэ талаар ярих болно.

SVG хөдөлгөөнт дүрсийг юунд ашигладаг вэ?

SVG-г CSS (слайд) ашиглан загварчилж, хөдөлгөөнт болгож болно. Үндсэндээ HTML элементэд хэрэглэж болох аливаа хувиргах эсвэл шилжилтийн хөдөлгөөнт дүрсийг SVG элементэд мөн хэрэглэж болно. Гэхдээ CSS-ээр дамжуулан хөдөлгөөн хийх боломжгүй зарим SVG шинж чанарууд байдаг, гэхдээ үүнийг SVG-ээр дамжуулан шууд хийж болно.

Жишээлбэл, SVG зам нь тухайн замын хэлбэрийг тодорхойлдог өгөгдлийн багцаар (d="" шинж чанар) тодорхойлогддог. Энэ өгөгдлийг SMIL-ээр дамжуулан өөрчилж, хөдөлгөөнтэй болгох боломжтой боловч CSS-ээр биш.

Учир нь SVG элементүүдийг SVG үзүүлэнгийн шинж чанарууд гэж нэрлэгддэг шинж чанаруудын багцыг ашиглан тайлбарладаг. Эдгээр шинж чанаруудын заримыг нь CSS ашиглан тохируулах, өөрчлөх, хөдөлгөөнт болгох боломжтой байхад зарим нь боломжгүй.

Тиймээс одоогоор CSS ашиглан олон хөдөлгөөнт эффектүүдийг хэрэгжүүлэх боломжгүй байна. Энэ цоорхойг JavaScript эсвэл SMIL-ээс гаргаж авсан тунхаглалын SVG хөдөлгөөнт дүрсээр нөхөж болно.

Хэрэв та JavaScript ашиглахыг илүүд үзэж байгаа бол би Дмитрий Барановскийн "jQuery for SVG" гэж нэрлэгддэг snap.svg-г санал болгож байна.

Эсвэл, хэрэв та хөдөлгөөнт дүрслэлд илүү өнгөлөг хандлагыг илүүд үзэж байгаа бол SVG элементүүдийг ашиглаж болно, бид үүнийг энэ зааварт авч үзэх болно!

SMIL-ийн JS хөдөлгөөнт дүрсээс өөр нэг давуу тал нь SVG-г img хэлбэрээр суулгасан эсвэл CSS-д дэвсгэр зураг болгон ашиглах үед JS ажиллахгүй байдаг. SMIL хөдөлгөөнт дүрс нь хоёр тохиолдолд ажилладаг ( эсвэл удахгүй хөтчүүдээр дэмжигдэх төлөвтэй байна).

Миний бодлоор энэ бол чухал давуу тал юм. Та SMIL-г сонгох өөр шалтгааныг олж мэдэх боломжтой. Энэ нийтлэл нь өнөөдөр SMIL-г ашиглаж эхлэхэд туслах гарын авлага юм.

Хөтөчийн дэмжлэг ба өөр хувилбарууд

SMIL-ийг хөтчүүд өргөнөөр дэмждэг. Энэ нь Internet Explorer болон Opera Mini-ээс бусад бүх хөтөч дээр ажилладаг. Хөтөчийн дэмжлэгийн талаархи дэлгэрэнгүй мэдээллийг эндээс авах боломжтой нийцтэй байдлын хүснэгт эсвэл "Би ашиглаж болох уу".

Хэрэв та SMIL хөдөлгөөнт дүрсийг нөөцлөх шаардлагатай бол Modernizr ашиглан хөтчийн дэмжлэг байгаа эсэхийг шалгаж болно. Хэрэв SMIL дэмжигдээгүй бол та өөр төрлийн хувилбар гаргаж болно ( JavaScript хөдөлгөөнт дүрс, өөр арга барил гэх мэт..).

Xlink:href ашиглан хөдөлгөөнт дүрсийг зааж өгч байна

Дөрвөн хөдөлгөөнт элементийн алийг нь сонгохоос үл хамааран та тухайн элементээр тодорхойлсон зорилтот хөдөлгөөнт дүрсийг зааж өгөх ёстой.

Зорилтот зорилгоо тодорхойлохын тулд та xlink:href шинж чанарыг ашиглаж болно. Атрибут нь энэ хөдөлгөөнт дүрсийн объект болох элементийн URI лавлагааг авдаг бөгөөд энэ нь цаг хугацааны явцад өөрчлөгдөх болно. Зорилтот элемент нь баримт бичгийн одоогийн SVG фрагментийн нэг хэсэг байх ёстой:

Хэрэв та өмнө нь SVG хөдөлгөөнт элементүүдтэй харьцаж байсан бол тэдгээрийг хөдөлгөөнд оруулах ёстой өөр элемент дотор үүрлэсэн элементүүдтэй таарсан байх. Үүнийг техникийн нөхцөлөөр хангасан болно.

Хэрэв xlink:href шинж чанарыг ашиглаагүй бол зорилтот элемент нь одоогийн хөдөлгөөнт элементээс дээш эхний түвшний эх элемент болно:

Тиймээс, хэрэв та хүсвэл " капсуллах» хэрэглэгдэж буй элементийн хөдөлгөөнт дүрсийг оруулбал та үүнийг л хийж чадна. Хэрэв та хөдөлгөөнт элементүүдийг баримт бичгийн өөр газар хадгалахыг хүсвэл xlink:href ашиглан хөдөлгөөнт элемент бүрийн зорилтыг зааж өгч болно - энэ хоёр арга нь адилхан сайн ажилладаг.

attributeName болон attributeType ашиглан хөдөлгөөнт дүрсийн зорилтот шинж чанарыг тодорхойлох

Бүх хөдөлгөөнт элементүүд нь бас нэг атрибуттай харилцдаг: attributeName. attributeName нь таны хөдөлгөөнт хийж буй атрибутын нэрийг зааж өгөхөд ашиглагддаг.

Жишээлбэл, хэрэв та төвийн байрлалд зориулсан хөдөлгөөнт дүрсийг тохируулахыг хүсвэл x тэнхлэг дээр cx-г attributeName атрибутын утга болгон зааж өгснөөр үүнийг хийнэ.

attributeName нь зөвхөн нэг утгыг хүлээн авах боловч утгуудын жагсаалтыг хүлээн авахгүй, учир нь та нэг удаад зөвхөн нэг атрибутыг идэвхжүүлэх боломжтой. Хэрэв та нэгээс олон шинж чанарын хөдөлгөөнт дүрсийг тодорхойлохыг хүсвэл тухайн элементэд нэгээс олон хөдөлгөөнт дүрсийг тодорхойлох ёстой.

Энэ бол миний дургүй зүйл бөгөөд CSS нь SMIL-ээс давуу талтай гэж би бодож байна. Гэхдээ дахин, бусад хөдөлгөөнт шинж чанаруудын боломжтой утгуудын улмаас ( Энэ талаар дараа дэлгэрэнгүй), нэг удаад зөвхөн нэг атрибутын нэрийг тодорхойлох нь утга учиртай, эс тэгвээс та хэд хэдэн атрибутын утгыг тодорхойлох юм бол тэдгээр нь ажиллахад хэтэрхий төвөгтэй болно.

Аттрибутын нэрийг зааж өгөхдөө XMLNS угтвар ( XML нэрийн орон зайн товчлол) атрибутын нэрийн орон зайг зааж өгнө.

Нэрийн орон зайг attributeType атрибут ашиглан зааж өгч болно. Жишээлбэл, зарим шинж чанарууд нь CSS нэрийн орон зайд хамаардаг (энэ нь атрибутыг CSS шинж чанар болгон олж болно гэсэн үг юм), бусад - зөвхөн XML нэрийн орон зай.

Эдгээр шинж чанаруудыг жагсаасан хүснэгт энд байна. Энэ хүснэгтэд бүх SVG шинж чанарууд хамаарахгүй, зөвхөн CSS ашиглан тохируулах боломжтой. Зарим нь өнөөдөр аль хэдийн CSS шинж чанартай байна.

Хэрэв attributeType-ийн утгыг тодорхой заагаагүй эсвэл автоматаар тохируулсан бол хөтөч эхлээд CSS шинж чанаруудын жагсаалтаас хайх ёстой бөгөөд хэрэв юу ч олдохгүй бол элементийн өгөгдмөл XML нэрийн зайг хайх хэрэгтэй.

Жишээлбэл, дараах хэсэг нь SVG тэгш өнцөгтийн тунгалаг байдлын хөдөлгөөнт дүрсийг тохируулдаг. Тунгалаг байдлын шинж чанар нь CSS шинж чанартай байдаг тул attributeType нь CSS нэрийн зайд тохируулагдсан:

Бид дараах жишээн дээр бусад хөдөлгөөнт дүрсүүдийг авч үзэх болно. Өөрөөр заагаагүй бол бүх хөдөлгөөнт дүрслэл нь бүх хөдөлгөөнт элементүүдэд нийтлэг байдаг.

Элементийн шинж чанарыг цаг хугацааны явцад нэг утгаас нөгөөд шилжүүлэх хөдөлгөөнт дүрсийг тохируулж, эцсийн төлөвийг зааж өгнө: from, by, to, dur, fill

Тойргийг нэг газраас нөгөөд шилжүүлэх замаар эхэлцгээе. Бид үүнийг cx шинж чанарын утгыг өөрчлөх замаар хийх болно ( энэ нь түүний төвийн байрлалыг х тэнхлэгийн дагуу тодорхойлдог).

Үүний тулд бид элементийг ашигладаг . Энэ элемент нь нэг шинж чанарыг нэг удаа хөдөлгөөнд оруулахад ашиглагддаг. Тоон болон өнгөт утгыг авдаг шинж чанаруудыг ихэвчлэн хөдөлгөөнт байдлаар ашигладаг . Та энэ хүснэгтээс хөдөлгөөн хийх боломжтой шинж чанаруудын жагсаалтыг олох боломжтой.

Тодорхой хугацааны туршид утгыг нэг утгаас нөгөөд шилжүүлэхийн тулд from, to, dur шинж чанаруудыг ашиглана. Эдгээрээс гадна та хөдөлгөөнт дүрс эхлэх шинж чанарыг хэзээ ашиглаж эхлэхийг зааж өгч болно:

Дээрх жишээн дээр бид тойргийг тодорхойлж, дараа нь тэр тойрог дээрх хөдөлгөөнт дүрсийг дуудсан. Тойргийн төв нь х тэнхлэгийн дагуу 50 нэгж координаттай анхны байрлалаасаа 450 нэгж координаттай цэг рүү шилждэг.

Бид эхлэх шинж чанарыг дарж тохируулсан. Энэ нь хулганы курсорыг дарсны дараа тойрог хөдөлж эхэлнэ гэсэн үг юм. Та энэ шинж чанарыг тодорхой хугацаанд тохируулж болно. Жишээлбэл, begin="0s" нь хуудсыг ачаалсны дараа шууд хөдөлгөөнт дүрсийг эхлүүлэх болно.

Та эерэг цагийн утгыг тохируулснаар хөдөлгөөнт дүрсийг эхлүүлэхийг хойшлуулж болно, жишээлбэл, begin="2s" нь хуудсыг ачаалсны дараа хоёр секундын дараа хөдөлгөөнт дүрсийг эхлүүлэх болно.

Хамгийн сонирхолтой нь та click + 1s гэх мэт утгыг ашиглан эхлэх атрибутыг тодорхойлж болох бөгөөд энэ нь хулганыг дарснаас хойш нэг секундын дараа хөдөлгөөнт дүрсийг эхлүүлэх болно!

Нэмж дурдахад та бусад хөдөлгөөнт дүрсүүдийн үргэлжлэх хугацаа, саатлыг нарийн тооцоолохгүйгээр хөдөлгөөнт дүрсийг синхрончлох боломжийг олгодог бусад утгуудыг ашиглаж болно. Энэ талаар дараа дэлгэрэнгүй.

dur шинж чанар нь CSS animation-duration шинж чанартай төстэй.

from болон to шинж чанарууд нь @keyframe CSS хөдөлгөөнт блокийн from болон to keyframe-тай төстэй:

@keyframes moveCircle ( ( /* хөдөлгөөнт дүрс эхлэх утга */ )-аас ( /* хөдөлгөөнт дүрсийн төгсгөлийн утга */ ) хүртэл )

шинж чанарыг дүүргэх( Харамсалтай нь энэ нь элементийн дүүргэлтийн өнгийг тодорхойлдог өөр дүүргэлтийн шинж чанартай ижил нэртэй байдаг.) нь хөдөлгөөнт дүрс дууссаны дараа тухайн элемент анхны төлөв рүүгээ буцах эсэхийг тодорхойлдог animation-fill-mode шинж чанартай төстэй.

SVG дахь түүний утга нь өөр өөр нэр ашиглахаас бусад тохиолдолд CSS-д хэрэглэгддэгтэй төстэй юм:

• хөлдөөх: Эффектийн төлөвийг хөдөлгөөнт дүрсийн үргэлжлэх хугацааны сүүлийн утгын хэмжээнд царцаахыг зааж буй утга. Баримт бичгийг хаах хүртэл хөдөлгөөнт эффектийг зогсооно ( эсвэл хөдөлгөөнт дүрсийг дахин эхлүүлэх хүртэл);
• устгах: хөдөлгөөнт эффект арилсан ( цаашид хамаарахгүй), үргэлжлэх хугацаагаар заасан хөдөлгөөнт үйлдэл дууссаны дараа. Хөдөлгөөнт дүрс дууссаны дараа үүнийг зорилтот элементэд ашиглахаа больсон ( хөдөлгөөнт дүрсийг дахин эхлүүлэхгүй бол).

Хөдөлгөөнт дүрслэлд хэрхэн нөлөөлж байгааг харахын тулд энэхүү үзүүлэнгийн утгыг өөрчилж үзнэ үү:
HTML:

CSS:

Үр дүн

by шинж чанар нь хөдөлгөөнт дүрсийн харьцангуй офсетийг тодорхойлоход хэрэглэгддэг. Нэрнээс нь харахад та үүнийг ашиглан хөдөлгөөнт дүрсийг өөрчлөх утгыг зааж өгч болно.

Энэ нөлөө нь зөвхөн CSS step() функц хэрхэн ажилладагтай адил хөдөлгөөнт дүрсийг нэг мөчлөгөөс нөгөөд шилжүүлэхэд л мэдэгдэхүйц юм.

CSS алхам() функцын SVG-тэй дүйцэхүйц нь calcMode="discrete" юм. Бид хэсэг хугацааны дараа calcMode="discrete" шинж чанарт очно.

Дахин эхлүүлэхийг ашиглан хөдөлгөөнт дүрсийг дахин эхлүүлж байна

Та хөдөлгөөнт дүрсийг идэвхтэй байх үед дахин эхлүүлэхийг хориглох шаардлагатай байж магадгүй. Энэ зорилгоор SVG нь дахин эхлүүлэх шинж чанарыг өгдөг.

Та үүнийг гурван боломжит утгын аль нэгэнд тохируулж болно:

• үргэлж: Хөдөлгөөнт дүрсийг хүссэн үедээ дахин эхлүүлэх боломжтой. Энэ бол анхдагч юм;
• whenNotActive: Хөдөлгөөнт дүрсийг идэвхгүй үед л дахин эхлүүлэх боломжтой ( өөрөөр хэлбэл хөдөлгөөнт дүрсний үргэлжлэх хугацаа дууссаны дараа). Хөдөлгөөн явагдаж байх үед хөдөлгөөнт дүрсийг дахин эхлүүлэх оролдлогыг үл тоомсорлодог;
• хэзээ ч: Үндсэн контейнерийг дахин эхлүүлэх хүртэл элементийг дахин эхлүүлэх боломжгүй. ( SVG-ийн хувьд, эх контейнер нь SVG баримт бичгийн фрагмент тул баримтыг дахин ачаалах хүртэл хөдөлгөөнт дүрсийг дахин эхлүүлэх боломжгүй.).

Хөдөлгөөнт зургийн нэрс, тэдгээрийн цаг хугацаа

Бид тойргийн байрлал болон өнгийг хөдөлгөөнтэй болгохыг хүсч байгаа тул хөдөлгөөнт хөдөлгөөнт дүрсийн төгсгөлд өнгө өөрчлөгдөнө гэж бодъё. Өнгөний өөрчлөлтийн хөдөлгөөнт дүрсийн эхлэлийн утгыг хөдөлгөх хөдөлгөөнт дүрсний үргэлжлэх хугацаатай тэнцүү болгох замаар бид үүнийг хийж чадна; Үүнийг бид ихэвчлэн CSS дээр хийдэг.

Гэсэн хэдий ч SMIL нь үйл явдлыг зохицуулах гайхалтай функцтэй. Эхлэх шинж чанар нь click + 5s гэх мэт утгыг хүлээн зөвшөөрдөг гэдгийг би аль хэдийн дурдсан. Энэ утгыг " үйл явдлын утга учир", мөн энэ тохиолдолд энэ нь "цагны үнэ цэнэ" гэсэн үйл явдлаас бүрдэнэ.

Энд хамгийн сонирхолтой хэсэг бол хоёр дахь хэсэг болох "цагны утга" юм. Яагаад зүгээр л нэрлэхгүй байна вэ? цаг хугацааны үнэ цэнэ"? Хариулт нь та энэ утгыг цаг шиг шууд утгаар нь ашиглаж болно: та үүнийг "10мин" эсвэл "01:33" болгож тохируулж болно, энэ нь "-тэй тэнцэх болно. 1 минут 33 секунд", эсвэл бүр "02:30:03" ( 2 цаг 30 минут 3 секунд). Үүнийг бичиж байх үед ихэнх хөтөч дээр цагийн утгууд бүрэн хэрэгжээгүй байна.

Хэрэв өмнөх үзүүлэн дээр бид click + 01:30-ыг ашигласан бол хөтчийн дэмжлэг хэрэгжсэн бол хулгана товшсоны дараа 1 минут 30 секундын дараа хөдөлгөөнт дүрс эхэлнэ.

Энэ атрибутыг авч болох өөр нэг утга бол өөр хөдөлгөөнт дүрс, дараа нь үйл явдлын зохион байгуулагчийн ID юм. Хэрэв танд хоёр (эсвэл түүнээс дээш) хөдөлгөөнт эффект байгаа бол ( тэдгээр нь ижил элементэд хамаарах эсэхээс үл хамааран!), та тэдгээрийг синхрончлохыг хүсч байгаа тул нэг нь нөгөөгийнхөө гүйцэтгэх үе шатаас хамаарч эхлэх юм бол нөгөө хөдөлгөөнт дүрсийн үргэлжлэх хугацааг ч мэдэхгүй байж болно.

Жишээлбэл, дараах жишээнд цэнхэр тэгш өнцөгт тойрог хөдөлгөөн эхэлснээс хойш 1 секундын дараа хөдөлж эхэлдэг. Үүнийг хөдөлгөөнт элемент бүрд ID өгч, дараа нь дараах кодонд үзүүлсэн шиг эхлэх үйл явдалтай ID-г ашиглана.

start="circ-anim.begin + 1s"Тойрог хөдөлгөөн эхэлснээс хойш 1 секундын дараа тэгш өнцөгтийг хөдөлгөж эхлэхийг хөтчид хэлдэг.

Та энэ демо дээр бүгдийг харж болно:

HTML:

Тойрог дээр дарж, 1 секундын дараа тэгш өнцөгтийн хөдөлгөөнт дүрсийг эхлүүлнэ.

CSS:

Үр дүн

Та мөн төгсгөлийн үйл явдлыг ашиглан тойрог хөдөлгөөн дууссаны дараа тэгш өнцөгт хөдөлгөөнийг эхлүүлж болно:

Тойргийн хөдөлгөөнт дүрс дуусахаас өмнө та үүнийг ажиллуулж болно:

RepeatCount ашиглан хөдөлгөөнийг давтах

Хэрэв та хөдөлгөөнт дүрсийг нэгээс олон удаа ажиллуулахыг хүсвэл repeatCount шинж чанарыг ашиглан үүнийг хийж болно. Та үүнийг хэдэн удаа давтахыг хүсч байгаагаа зааж өгөх эсвэл тодорхойгүй түлхүүр үг ашиглан хөдөлгөөнийг тодорхойгүй хугацаагаар давтах боломжтой.

Тиймээс, хэрэв бид тойргийн хөдөлгөөнт дүрсийг хоёр удаа давтахыг хүсвэл код дараах байдалтай байх ёстой.

Та үүнийг демо хувилбараас харж болно. Би тойргийн давталтын тоог 2, квадратын хувьд тодорхойгүй гэж тохируулсан.
HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

Хөдөлгөөнт дүрс нь давталт дуусах үед хүрсэн утгаас биш харин анхны утгаас дахин эхэлдэг болохыг анхаарна уу. Харамсалтай нь SMIL нь CSS хөдөлгөөнт дүрстэй адил эхлэл ба төгсгөлийн утгуудын хоорондох хоёр талын замыг тодорхойлох боломжийг бидэнд олгодоггүй.

CSS-д animation-direction шинж чанар нь хөдөлгөөнт дүрс нь эсрэг чиглэлд тоглох эсвэл мөчлөг бүрийг тэг цэгээс эхлүүлэх эсэхийг тодорхойлдог.

Утга хөдөлгөөнт-чиглэл: ээлжлэнтэгш тоотой хөдөлгөөнт гогцоонуудыг хэвийн чиглэлд, сондгой тоог урвуу чиглэлд тоглоно гэсэн үг. Энэ нь эхний гогцоо эхнээс нь дуустал, хоёр дахь давталт нь төгсгөлөөс хойш, гурав дахь давталт нь эхнээс нь дуустал дахин тоглоно гэх мэт.

Үүнийг SMIL-д хийхийн тулд from болон to шинж чанаруудын утгыг өөрчлөхийн тулд JavaScript ашиглах шаардлагатай болно. Жон МакпартландХэсэг хугацааны өмнө Big Bite Creative-аас нийтлэл хэвлүүлсэн, энэ нь түүний ажиллаж байсан цэсийн дүрсний хөдөлгөөнт дүрсийг хэрхэн хийснийг тайлбарласан.

Майлс Эламын бүтээсэн саатал ашиглан тодорхойгүй хугацаагаар давтагддаг гайхалтай, энгийн хөдөлгөөнт дүрс энд байна:

HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

RepeatDur ашиглан хөдөлгөөнт дүрсийг давтах хугацааг хязгаарлаж байна

Хөдөлгөөнт дүрсийг эцэс төгсгөлгүй ажиллуулах нь удаан хугацаагаар үргэлжилбэл хуудасны дизайныг эвдэж, эвгүй байдалд оруулж болно.

Тиймээс, хөдөлгөөнт дүрсийг тодорхой хугацаанд давтахыг хязгаарлаж, баримтыг ачаалсны дараа хэсэг хугацааны дараа хөдөлгөөнт дүрсийг давтахыг зогсоох нь танд маш их хэрэгтэй байж магадгүй - үүнийг танилцуулах хугацаа гэж нэрлэдэг.

Танилцуулгын хугацаа нь бүхэл баримт бичгийн эхлэлтэй холбоотой өгөгдсөн баримт бичгийн фрагментийн цагийн хуваарийн байрлалыг заана. Энэ нь repeatDur шинж чанарыг ашиглан тодорхойлогддог.

Түүний синтакс нь цагийн утгатай төстэй боловч бусад хөдөлгөөнт дүрс эсвэл харилцан үйлчлэлийн үйл явдлуудаас тоолохын оронд энэ тохиолдолд цагийг баримт бичгийг эхлүүлэх (ачаалах) үеэс эхлэн тоолно.

Жишээлбэл, баримтыг эхлүүлсний дараа (ачаалагдсан) 1 минут 30 секундын дараа дараах хэсэгчилсэн анимацийг давтахыг зогсооно:

Мөн энэ нь энэ шинж чанарыг харуулсан үзүүлбэр юм:
HTML:

Үр дүн

Давталтын тооноос хамааран хөдөлгөөнт дүрсийг синхрончлох

Одоо хоёр хөдөлгөөнт дүрс хоорондын синхрончлол руу буцаж орцгооё. Үнэн хэрэгтээ, SMIL дээр та хөдөлгөөнт дүрсийг синхрончлох боломжтой бөгөөд ингэснээр нэг хөдөлгөөнт дүрс нь нөгөө хэд хэдэн удаа давтагдахаас хамаарч ажиллах болно.

Жишээлбэл, та өөр нэг удаа n дахь давталт, нэмэх эсвэл хасах тодорхой хугацааны дараа хөдөлгөөнт дүрсийг эхлүүлж болно, мөн үүнийг тохируулж болно.

Дараах жишээнд тэгш өнцөгт хөдөлгөөнт дүрс нь тойргийн хөдөлгөөнт дүрсийн хоёр дахь давталтаас эхэлдэг.

Давталтын тооноос хамааран синхрончлолыг одоогоор бүх хөтөч дээр хэрэгжүүлээгүй байгаа тул харамсалтай нь энэ хэсэгт демо хувилбарыг өгөөгүй байна.

Хөдөлгөөнт фрэймийн утгыг удирдах: keyTimes болон утгууд

CSS-д бид хөдөлгөөнт дүрсийг тоглуулах үед тухайн түлхүүр фрэймийн хөдөлгөөнт шинж чанарыг авах ёстой утгыг зааж өгч болно.

Жишээлбэл, хэрэв та элементийг зүүн тийш шилжүүлэх хөдөлгөөнт дүрсийг зааж өгч байгаа бол офсетийг 0-ээс 300 хүртэл шууд өөрчлөхийн оронд үүнтэй адил тодорхой хүрээнд тодорхой утгыг авахын тулд офсетийг хөдөлгөөнд оруулж болно. :

@keyframes жишээ ( 0% (зүүн: 0; ) 50% (зүүн: 320px; ) 80% (зүүн: 270px; ) 100% (зүүн: 300px; ) )

0%, 20%, 80%, 100% нь хөдөлгөөнт фрейм бөгөөд хүрээ тус бүрийн блок дахь утгууд нь тус бүрийн утгууд юм. Дээр тайлбарласан эффект нь үсэрч буй бөмбөгний хөдөлгөөнт дүрсний нэг хэсэг юм.

SMIL-д та түлхүүр фрэймийн утгыг ижил төстэй байдлаар удирдаж болно, гэхдээ синтакс нь өөрөө огт өөр юм.

Түлхүүр фрэймүүдийг тодорхойлохын тулд keyTimes шинж чанарыг ашиглана. Фрейм бүрийн хөдөлгөөнт шинж чанарын утгыг тодорхойлохын тулд утгын шинж чанаруудыг ашигладаг. SMIL дахь нэрлэх конвенц нь маш тохиромжтой.

Хэрэв бид хөдөлж буй тойрог руугаа буцаж очоод дээр дурдсан CSS түлхүүр фрэймтэй төстэй утгуудыг ашиглавал код дараах байдалтай харагдана.

Бид юу хийсэн бэ?

Анхаарах зүйл бол түлхүүр фрэймийн цаг ба завсрын утгыг жагсаалт хэлбэрээр зааж өгсөн болно. KeyTimes шинж чанар нь хөдөлгөөнт дүрсний үе шатуудыг удирдахад хэрэглэгддэг цаг хугацааны утгуудын цэг таслалаар тусгаарлагдсан жагсаалт юм. Жагсаалтад байгаа цаг бүр нь утгын атрибутын жагсаалтын утгатай тохирч, хөдөлгөөнт функцэд тухайн утгыг хэзээ ашиглахыг тодорхойлдог.

KeyTimes жагсаалтын цаг хугацааны утга бүрийг 0-ээс 1 (хамааруулсан) хүртэлх аравтын бутархай тоогоор зааж өгсөн бөгөөд энэ нь хөдөлгөөнт дүрсийг тоглуулахад пропорциональ хугацааны шилжилтийг илэрхийлдэг. Тиймээс keyTimes нь CSS-тэй ижилхэн ажилладаг бөгөөд бид үүнийг хувиар биш аравтын бутархай гэж тодорхойлдог.

Доорх нь энэ кодын демо юм.
HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

Хэрэв утгуудын жагсаалтыг ашигласан бол хөдөлгөөнт дүрсийг түүнд заасан утгуудын дагуу ашиглах болно гэдгийг тэмдэглэх нь зүйтэй. Энэ тохиолдолд бүх шинж чанараас, хүртэлх болон шинж чанаруудыг үл тоомсорлох болно.

Хөдөлгөөнт дүрсний хэмнэлийг тусгай тохируулгатай удирдах: calcMode болон keySplines

Хэрэв та CSS хөдөлгөөнт дүрсийг аль хэдийн мэддэг бол SMIL-ийн синтакс болон ойлголтыг ойлгоход илүү хялбар байх тул би одоо CSS болон SMIL-ийг харьцуулах болно.

CSS-д та анхдагч хөдөлгөөнт цагийн хуваарийг хүчингүй болгож, animation-timing-function шинж чанарыг ашиглан хөдөлгөөнт дүрсийг удирдах тусгай тохируулгын функцийг зааж өгч болно.

Хугацааны функцийг урьдчилан тодорхойлсон хэд хэдэн түлхүүр үг эсвэл куб b;zier функцийн аль нэгээр нь тодорхойлж болно. Сүүлд нь Leia Verou-ийн боловсруулсан үүнтэй төстэй хэрэгслийг ашиглан үүсгэж болно.

SMIL-д хөдөлгөөнт дүрсийг calcMode шинж чанарыг ашиглан тохируулдаг. Анхдагчаар animateMotion (-аас бусад бүх хөдөлгөөнт элементүүдийн утга нь шугаман байна. Бид дараа нь энэ тухай эргэж ирнэ). Шугаман утгаас гадна та дараах утгуудыг тохируулж болно: салангид, хурдтай эсвэл сплайн.

• discrete нь хөдөлгөөнт функц нь интерполяцигүйгээр нэг утгаас нөгөөд шилжихийг заадаг. Энэ нь CSS алхам() функцтэй төстэй;
• paced нь шугамантай төстэй, гэхдээ энэ нь завсрын утгыг үл тоомсорлож, хөдөлгөөнт дүрсийг keyTimes-д тодорхойлсон цагийг өөрчилдөг;
• сплайн нь Куб Безье сплайнаар тодорхойлогдсон хугацааны функцийн дагуу утгуудын жагсаалтын нэг утгаас нөгөөд интерполяц хийдэг. Сплайн цэгүүдийг keyTimes шинж чанарт тодорхойлсон бөгөөд интервал бүрийн шилжилтийн цэгүүдийг keySplines шинж чанарт тодорхойлсон.

Би шинэ шинж чанарыг дурдсаныг та анзаарсан байх: keySplines. keySplines шинж чанар юу хийдэг вэ?

Энэ нь дахин CSS-тэй төстэй юм.

CSS-д та бүхэл хөдөлгөөнд нэг анимацийн хэмнэлийг зааж өгөхийн оронд түлхүүр фрэйм ​​бүр дотор хөдөлгөөнт дүрсийг зааж өгч болно. Энэ нь танд хөдөлгөөнт дүрс бүр хэрхэн урсахыг илүү хянах боломжийг олгоно. Энэ функцийг ашиглах жишээ бол үсэрч буй бөмбөг эффект үүсгэх явдал юм. Үүний үндсэн фрэймүүд дараах байдлаар харагдаж болно:

@keyframes bounce ( 0% ( дээд: 0; хөдөлгөөнт-цаг хугацааны функц: хялбар оруулах; ) 15% (дээд: 200px; хөдөлгөөнт-цаг хугацаа-функц: хялбаршуулах; ) 30% ( дээд: 70px; хөдөлгөөнт-цаг хугацаа -функц: хялбар оруулах; ) 45% (дээд: 200px; хөдөлгөөнт-хугацаа-функц: хялбар болгох; ) 60% (дээд: 120px; хөдөлгөөнт-хугацаа-функц: хялбар оруулах; ) 75% ( дээд: 200px ; animation-timing-function: ease-out; ) 90% ( top: 170px; animation-time-function: easy-in; ) 100% ( top: 200px; animation-time-function: ease-out; ) )

Тохируулах функцийн оронд бид куб-безиерийн харгалзах функцуудыг ашиглаж болно.

• ease-in = куб-безиер(0.47, 0, 0.745, 0.715);
• ease-out = куб-безьер(0.39, 0.575, 0.565, 1)

Яг ижил үсэрч буй бөмбөгний эффектийг бий болгохын тулд бидний улбар шар өнгийн тойргийн гол цаг хугацааны интервалууд болон утгуудын жагсаалтыг тодорхойлж эхэлцгээе.

Элемент дээр хулганыг дарахад хөдөлгөөнт дүрс эхлэх бөгөөд эцсийн утгад хүрмэгц хөдөлгөөнгүй болно. Дараа нь түлхүүр фрэйм ​​бүрийн хэмнэлийг тохируулахын тулд бид keySplines шинж чанарыг нэмнэ.

KeySplines атрибут нь өөр өөр хэмнэлтэй интервалыг хянадаг куб Bezier функцийг тодорхойлсон keyTimes жагсаалттай холбоотой b;zier таслах цэгүүдийн багцыг авдаг. Аттрибутын утга нь цэг таслалаар тусгаарлагдсан хяналтын цэгийн тайлбаруудын жагсаалт юм.

Хяналтын цэгийн тодорхойлолт бүр нь нэг цагийн сегментийн b;zier хяналтын цэгүүдийн координатыг тодорхойлсон x1 y1 x2 y2 гэсэн дөрвөн утгын багц юм. Тэдгээрийн утга нь 0-ээс 1-ийн хооронд байх ёстой бөгөөд calcMode-г spline гэж тохируулсан байх ёстой, эс тэгвээс атрибутыг үл тоомсорлодог.

Cub-bezier функцийг утга болгон ашиглахын оронд keySplines нь муруй зурахад ашигладаг хоёр хяналтын цэгийн координатыг авдаг. Та эдгээр хяналтын цэгүүдийг Леагийн хэрэглүүрээс авсан доорх дэлгэцийн зургаас харж болно.

Дэлгэцийн агшинд мөн цэг бүрийн координатыг харуулсан бөгөөд координатын утга тус бүр нь дүрсэлсэн цэгтэй ижил өнгөтэй байна. KeySplines шинж чанарын хувьд эдгээр нь хөдөлгөөнт дүрс бүрийн хэмнэлийг тодорхойлоход ашиглах утгууд юм.

SMIL-д эдгээр утгыг нэмэлт зайтай таслалаар эсвэл зүгээр л зайгаар тусгаарлаж болно. Харгалзах сегментийг тодорхойлдог keyTimes утгууд нь " лавлах цэгүүд" b;zier болон keySplines утгууд нь таслах цэгүүд юм. Тиймээс хяналтын цэгүүдийг keyTimes-ээс нэгээр бага байх ёстой:

Хэрэв бид үсэрч буй бөмбөгний жишээ рүү буцах юм бол дотогш оруулах, буулгах функцүүдийн хяналтын цэгийн координатыг дараах зургуудад үзүүлэв.
Энэ бүгдийг SVG хөдөлгөөнт элемент болгон хөрвүүлснээр бид дараах кодыг авна.

Доорх демо хувилбар байна, гэхдээ та үүнийг Chrome биш харин Firefox дээр ажиллуулна уу, учир нь хамгийн сүүлийн хувилбар нь демо зөв ажиллахад саад болох алдаатай байна.

HTML:

Анимацийг эхлүүлэхийн тулд тойрог дээр дарна уу.

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

Хэрэв та бүхэл бүтэн анимацын хувьд завсрын утгагүйгээр зөвхөн ерөнхий хурдны тохируулгын функцийг зааж өгөхийг хүсвэл keyTimes шинж чанарыг ашиглан түлхүүр фрэймүүдийг зааж өгөх ёстой, гэхдээ та зөвхөн эхлэл болон төгсгөлийн түлхүүр фрэймүүдийг зааж өгөх хэрэгтэй бөгөөд эдгээр нь 0; 1 - завсрын утгагүй.

Нэмэгдсэн болон хуримтлагдсан хөдөлгөөнт дүрсүүд: нэмэлт ба хуримтлагдах

Заримдаа бид өмнөх хөдөлгөөнт дүрс дууссан газраас эхэлдэг хөдөлгөөнт дүрсийг тодорхойлох шаардлагатай болдог; эсвэл тоглож эхлэхийн тулд өмнөх хөдөлгөөнт дүрсүүдийн нийлбэр дүнг утга болгон ашигладаг хөдөлгөөнт дүрс. Үүнийг хийхийн тулд SVG-д зохих ёсоор нэрлэгдсэн хоёр шинж чанар байдаг: additive болон accumulate .

Танд өргөнийг нь нэмэгдүүлэхийг хүссэн элемент эсвэл уртыг нь нэмэгдүүлэхийг хүссэн шугам байна гэж бодъё. Эсвэл танд тодорхой интервалтайгаар алхам алхмаар шилжих элемент байна гэж бодъё. Энэ функц нь хөдөлгөөнт дүрсийг давтан хийхэд онцгой ач холбогдолтой юм.

Бусад хөдөлгөөнт дүрсүүдийн нэгэн адил та from болон to утгыг зааж өгөх хэрэгтэй. Үүний зэрэгцээ, та нэмэлт шинж чанарыг нийлбэр болгон тохируулах үед эдгээр утга бүр нь хөдөлгөөнт шинж чанарын анхны утгатай холбоотой байх болно.

Ингээд эргээд тойрогтоо орцгооё. Үүний тулд cx анхны байрлал нь 50 байна. Хэрэв та "0" -ээс "100" гэсэн утгуудыг тохируулсан бол тэг гэдэг нь 50 гэсэн анхны утгыг, 100 нь 50+100 гэсэн анхны утгыг илэрхийлнэ. Өөрөөр хэлбэл, практик дээр та “from="50″ to="150"-г тохируулсан нь харагдаж байна.

Үүнийг хийсний дараа бид дараах үр дүнг авах болно.

HTML:

Анимацийг эхлүүлэхийн тулд тойрог дээр дарна уу.

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

Энэ бол нэмэлт шинж чанар юм. Энэ нь зөвхөн эхлэн ба хүрэх утгууд нь одоогийн шинж чанарын утгатай холбоотой эсэхийг тодорхойлдог. Атрибут нь нийлбэр ба солих гэсэн хоёр утгын аль нэгийг авдаг.

Сүүлчийн утга нь өгөгдмөл бөгөөд энэ нь ихэвчлэн өгөгдсөн утга нь одоогийн/анхны утгыг дарж, хөдөлгөөнт элементийг хөдөлгөөнт дүрс эхлэх үед гэнэт байрлалаа өөрчлөхөд хүргэдэг гэсэн үг юм.

(Дээрх жишээн дээр sum-г орлуулах гэж оролдоод үзээрэй, та юу болохыг харах болно).

Гэсэн хэдий ч, хэрэв бид хоёр дахь хөдөлгөөнт давталт эхнийх нь дууссан газраас эхлэхийн тулд утгуудыг нэмэхийг хүсвэл яах вэ? Хуримтлуулах шинж чанар нь үүнд тусална.

Хуримтлуулах шинж чанар нь атрибутын өмнөх төгсгөлийн утгыг харгалзан үзсэн эсэхийг хянадаг. Анхдагчаар, түүний утга нь none байх бөгөөд энэ нь хөдөлгөөнт дүрс давтагдах үед өмнөх давталтын төгсгөлийг тооцохгүйгээр эхнээс нь хийдэг гэсэн үг юм.

Гэсэн хэдий ч та үүнийг нийлбэр болгон тохируулж болно. Энэ нь шинэ хөдөлгөөнт цикл бүр өмнөх мөчлөг дууссан газартай холбогдоно гэсэн үг юм.

Хэрэв бид өмнөх хөдөлгөөнт дүрс рүү буцаж очоод accumulate="sum" гэж зааж өгвөл бид дараах үр дүнг авна.
HTML:

Анимацийг эхлүүлэхийн тулд тойрог дээр дарна уу.

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

Хэрэв зорилтот атрибутын утга нэмэхийг дэмждэггүй эсвэл хөдөлгөөнт элемент давтагдахгүй бол хуримтлагдах шинж чанарыг үл тоомсорлодог гэдгийг анхаарна уу. Хөдөлгөөнт дүрсийг зөвхөн нэг атрибутаар зааж өгсөн бол энэ нь мөн хэрэгсэхгүй болно.

Төгсгөлийг ашиглан хөдөлгөөнт дүрсийн төгсгөлийг зааж өгч байна

Хөдөлгөөнт дүрс хэзээ эхлэхийг зааж өгөхөөс гадна төгсгөлийн атрибутаар дамжуулан хэзээ дуусахыг зааж өгч болно. Жишээлбэл, та хөдөлгөөнт дүрсийг тодорхойгүй хугацаагаар давтахаар тохируулж, дараа нь өөр элемент хөдөлгөөн хийж эхлэхэд үүнийг зогсоож болно.

Төгсгөлийн шинж чанар нь эхлэх шинж чанартай ижил утгатай байна. Та үнэмлэхүй эсвэл харьцангуй цаг хугацааны утга/интервал, давталтын утга, үйл явдлын утга гэх мэтийг зааж өгч болно.

Жишээлбэл, дараах үзүүлэн дээр улбар шар өнгийн тойрог аажмаар 30 секундын турш зотонгийн нөгөө тал руу шилждэг. Ногоон тойрог нь мөн хөдөлгөөнт дүрстэй, гэхдээ үүн дээр дарахад л хөдөлгөөн эхэлдэг.

Ногоон тойргийн хөдөлгөөнт дүрс эхлэхэд улбар шар өнгийн тойргийн хөдөлгөөн дуусна - ингэснээр та ногоон тойрог дээр дарахад улбар шар тойрог зогсох болно.

HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1em автомат; )

Үр дүн

Мэдээжийн хэрэг, ижил анимейшн синхрончлолыг нэг элементэд ашигласан хоёр хөдөлгөөнт дүрсэнд хийж болно. Жишээлбэл, өнгө нь нэг утгаас нөгөөд хязгааргүй өөрчлөгддөг тойрог өнгөт хөдөлгөөнт дүрсийг тохирууллаа гэж бодъё.

Дараа нь хулганын курсороор товшвол тойргийг хөдөлгөх хөдөлгөөнт дүрс. Одоо бид элемент дээр дарж, хөдөлж эхэлсний дараа өнгөний өөрчлөлтийг зогсоохоор тохируулна.
HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1em автомат; )

Үр дүн

Олон эхлэл ба төгсгөлийн утгыг ашиглан хөдөлгөөнт дүрсний интервалыг тодорхойлох

Үнэн хэрэгтээ эхлэл ба төгсгөлийн шинж чанарууд хоёулаа таслалаар тусгаарлагдсан утгуудын жагсаалтыг хүлээн зөвшөөрдөг. Эхлэх атрибут дахь утга бүр нь төгсгөлийн шинж чанарт харгалзах утгатай байх бөгөөд идэвхтэй болон идэвхгүй хөдөлгөөнт интервалуудыг үүсгэнэ.

Үүнийг машин хөдөлж байгаа эсэхээс хамаарч дугуй нь хэсэг хугацаанд идэвхтэй эсвэл идэвхгүй байдаг хөдөлгөөнт машин гэж ойлгож болно.

Та тохирох эффектүүдийг ашигласнаар хөдөлж буй машины хөдөлгөөнт дүрсийг үүсгэж болно: нэг нь машиныг хөдөлгөх эсвэл нэмсэн болон хуримтлагдсан хөдөлгөөнт дүрсийг ашигладаг зам дагуу хөдөлгөх; хоёр дахь нь дугуйг хөдөлгөөнтэй синхрончлох интервалаар эргүүлэх явдал юм.

Олон тооны хөдөлгөөнт дүрс эхлэх ба дуусах цагийг (жишээ нь интервал) тохируулах жишээ бол тэгш өнцөгтийг тодорхой интервалаар эргүүлж, идэвхтэйгээс идэвхгүй болгон эргүүлдэг дараах үзүүлэн юм.
(Хэрэв та хөдөлгөөнт дүрсийг орхисон бол демо-г дахин эхлүүлнэ үү).
HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1em автомат; )

Үр дүн

Дээрх жишээнд би элементийг ашигласан гэдгийг тэмдэглэх нь зүйтэй тэгш өнцөгтийн эргэлтийг тохируулах. Энэ элементийн талаар бид дараагийн хэсэгт илүү дэлгэрэнгүй ярих болно.

Мөн та repeatCount-ыг тодорхойгүй болгож тохируулсан ч гэсэн төгсгөлийн утгуудаар дарагдаж, хөдөлгөөнт дүрс тодорхойгүй хугацаагаар давтагдахгүй гэдгийг анхаарна уу.

Мин ба максыг ашиглан элементийн үргэлжлэх хугацааг хязгаарлах

Та хөдөлгөөнт дүрс давтагдах тоо эсвэл цагийг хязгаарлаж чаддаг шигээ хөдөлгөөнт дүрсний үргэлжлэх хугацааг хязгаарлаж болно.

Min ба max шинж чанарууд нь хөдөлгөөнт дүрсний үргэлжлэх хугацааны хамгийн бага ба хамгийн их утгыг тус тус зааж өгдөг. Эдгээр нь элементийн үргэлжлэх хугацааны доод ба дээд хязгаарыг тохируулах боломжийг бидэнд олгодог. Хоёр шинж чанар нь цагийг хүлээн зөвшөөрдөг.

min нь элементийн үргэлжлэх хугацаагаар хэмжигдэх хөдөлгөөнт дүрсийн үргэлжлэх хугацааны хамгийн бага утгыг тодорхойлдог. Энэ атрибутын утга 0-ээс их буюу тэнцүү байх ёстой ( үйл ажиллагааны үргэлжлэх хугацаа огт хязгаарлагдахгүй анхдагч утга).

Макс, цагийн утга нь элементийн үргэлжлэх хугацаагаар хэмжигдэх үйл ажиллагааны үргэлжлэх хугацааны хамгийн их утгын утгыг тодорхойлдог. Үүний утга нь мөн 0-ээс их байх ёстой. max-ын анхдагч утга нь тодорхойгүй байна. Энэ нь үйл ажиллагааны үргэлжлэх хугацааг огт хязгаарладаггүй.

Хэрэв хоёр шинж чанарыг зааж өгсөн бол хамгийн их утга нь хамгийн бага утгаас их буюу тэнцүү байх ёстой. Хэрэв энэ шаардлагыг хангаагүй бол хоёр шинж чанарыг үл тоомсорлодог.

Гэхдээ элементийн үйл ажиллагааны үргэлжлэх хугацааг юу тодорхойлдог вэ? Хөдөлгөөнт дүрсийг давтах хугацаа байдаг гэдгийг бид өмнө нь дурдсан, энэ нь " энгийн хугацаа", энэ нь хөдөлгөөнийг давтахгүйгээр үргэлжлэх хугацаа юм ( dur гэж тэмдэглэсэн).

Тэгэхээр энэ бүхэн хэрхэн хамтдаа ажилладаг вэ? Юуг илүү эрхэмлэх вэ? Төгсгөлийн шинж чанарын талаар юу хэлэх вэ, энэ нь утгыг дахин хуваарилах уу эсвэл зүгээр л хөдөлгөөнт дүрсийг дуусгах уу?

Энэ бүхэн иймэрхүү байдлаар ажилладаг. Хөтөч эхлээд dur, repeatCount, repeatDur, end гэсэн утгууд дээр үндэслэн үйл ажиллагааны үргэлжлэх хугацааг тооцдог. Үүний дараа хамгийн бага ба хамгийн их утгын дагуу үргэлжлэх хугацааг тооцоолж эхэлнэ.

Тооцооллын эхний шатны үр дүн нь хоёр дахь шатанд тооцсон интервал дотор байвал эхний тооцоолсон хугацаа хүчинтэй хэвээр байх бөгөөд өөрчлөгдөхгүй. Үгүй бол хоёр хувилбар байж болно:

• Хэрэв эхний тооцоолсон хугацаа нь хамгийн их утгаас их байвал элементийн үргэлжлэх хугацаа нь хамгийн их утгатай тэнцүү байхаар тодорхойлогддог;
• Хэрэв эхлээд тооцсон хугацаа нь хамгийн бага утгаас бага байвал элементийн үргэлжлэх хугацаа нь хамгийн бага утгатай тэнцүү байх ба элементийн үйлдэл дараах байдалтай байна;
• Хэрэв давталтын үргэлжлэх хугацаа ( эсвэл элемент давтагдахгүй бол энгийн үргэлжлэх хугацаа) элементийн хэмжээ min -ээс их байвал тухайн элементийг үйлдлийн үргэлжлэх хугацааны стандарт хугацаанд (min -ийг оруулаад) дахин тоглуулна;
• Үгүй бол элемент нь стандарт давталтын хугацаанд тоглогдоно ( эсвэл элемент давтагдахгүй бол энгийн үргэлжлэх хугацаа), дараа нь бөглөх атрибутын утгаас хамааран царцах ба огт гарахгүй.

Энэ нь хөтөч нь үйл ажиллагааны үргэлжлэх хугацааг хэрхэн тооцдог вэ гэсэн асуултыг бидэнд авчирдаг. Товчхон байхын тулд би дэлгэрэнгүй ярихгүй.

Гэхдээ техникийн үзүүлэлтүүд нь dur , repeatCount , repeatDur болон end шинж чанаруудын өөр өөр хослолууд болон хослол тус бүр дээр үндэслэн хөдөлгөөнт дүрсийн үргэлжлэх хугацааг хэрхэн тодорхойлохыг харуулсан маш нарийвчилсан хүснэгтийг агуулдаг.

Та энэ хүснэгтийг үзэж, дэлгэрэнгүй мэдээллийг авах боломжтой тодорхойлолтын энэ хэсэг.

Эцэст нь, хэрэв элементийг эх элемент эхлэхээс өмнө эхлүүлэхээр тодорхойлсон бол ( жишээ нь, зүгээр л сөрөг офсет утгыг ашиглах), хамгийн бага үргэлжлэх хугацааг эхний шатанд тооцоолсон утгаар тодорхойлох бөгөөд үндсэн элементийн хүчинтэй байх интервалд оруулахгүй.

Энэ нь хамгийн бага утга нь элементийн хөдөлгөөнт байдалд мэдэгдэхүйц нөлөө үзүүлэхгүй гэсэн үг юм.

Жишээ : замыг өөрчлөх

SMIL-ээр дамжуулан хөдөлгөөн хийх боломжтой шинж чанаруудын нэг ( Гэхдээ та CSS-ээр хөдөлгөөнт дүрсийг тохируулах боломжгүй), шинж чанар юм SVG - d ( "өгөгдөл" гэсэн үгийн товчлол).

d шинж чанар нь таны үүсгэж буй хэлбэр эсвэл хэлбэрийн тоймыг тодорхойлсон өгөгдлийг агуулдаг. Энэхүү тойм өгөгдөл нь эцсийн тоймыг бүрдүүлдэг цэг, нум, шугамыг хаана, хэрхэн зурахыг хөтөчид зааж өгдөг олон команд, координатаас бүрдэнэ.

Энэ шинж чанарыг хөдөлгөснөөр бид SVG тоймыг өөрчилж, эффект үүсгэж чадна дүрсүүдийн метаморфоз.

Гэхдээ дүрсийг өөрчлөхийн тулд эхлэл, төгсгөл болон бүх завсрын дүрсүүд ижил тооны орой/цэгтэй байх ёстой бөгөөд тэдгээр нь ижил дарааллаар харагдах ёстой. Хэрэв янз бүрийн хэлбэрийн оройнуудын тоо таарахгүй бол хөдөлгөөнт дүрс ажиллахгүй.

Үүний шалтгаан нь дүрсийг хувиргах нь оройг хөдөлгөж, тэдгээрийн байрлалыг интерполяци хийх замаар хийгддэг. Тиймээс хэрэв нэг орой байхгүй эсвэл нийт гаралтын дараалалд тохирохгүй байвал контурыг интерполяцлах боломжгүй.

SVG тоймыг хөдөлгөөнтэй болгохын тулд бид attributeName атрибутыг d гэж тохируулаад дараа нь эхлэл ба төгсгөлийн хэлбэрийг тодорхойлдог from болон to утгуудыг тохируулах хэрэгтэй. Та мөн утгын атрибутыг ашиглан зам нь өөрчлөгдөх үед авах ёстой завсрын утгыг тодорхойлж болно.

Үүнийг товчхон болгохын тулд би үүнийг хэрхэн хийх талаар дэлгэрэнгүй ярихгүй. Үүний оронд та уншиж болно Ноа Блоны энэхүү гайхалтай нийтлэл, үүнд тэрээр хэрхэн хувиргагч дүрсийг ашиглан бүтээсэн болохыг тайлбарлав . Ноагийн бүтээсэн анимейшнийн үзүүлбэрийг энд үзүүлэв.
HTML:

CSS:

их бие (өндөр: 100vh; текстийг зэрэгцүүлэх: төвд; хайрцагны хэмжээ: хилийн хайрцаг; padding-top: calc(50vh - 56px); ) img, svg (дэлгэц: inline-block; vertical-align: дунд; ) svg (өндөр: 38px; өргөн: 38px; дэлгэц: inline-block; )

// Зургийг оруулах нь тэдгээрийг синхрончлоход тусалдаг $(document).ready(function())( $("img").attr("src", "http://dab1nmslvvntp.cloudfront.net/wp-content/ байршуулалт /2014/08/1407310358spinner-cropped.gif"); ));

Үр дүн

Феликс Орнойгийн хувиргах өөр нэг жишээ энд байна:
HTML:

CSS:

Үр дүн

Та эргэн тойрны дэвсгэрийг хайчилж, тодорхой дүрсийг тодорхойлохын тулд хувиргах замыг ашиглаж болно. Хизер Бушелийн жишээг энд үзүүлэв.
HTML:

SCSS:

$суурь: #C8C8A9; $анхдагч: #FE4365; их бие ( дэвсгэр: $base; text-align: center; ) svg (байрлал: үнэмлэхүй; дээд: 50%; зүүн: 50%; захын дээд: -60px; зүүн талын ирмэг: -60px; ) .logo ( бөглөх: $primary; ) .clip ( хөдөлгөөнт дүрс: слайд 8с хязгааргүй; ) @keyframes слайд (-аас ( хувиргах: translateY(-135px); ) 50% (хувиргах: translateY(-5px); ) хүртэл ( хувиргах: translateY(-135px) ;))

Үр дүн

Чөлөөт зам дагуух хөдөлгөөнт дүрс: Элемент

- энэ бол SMIL хөдөлгөөнт дүрсний миний хамгийн дуртай элемент юм. Та үүнийг элементийг зам дагуу зөөхийн тулд ашиглаж болно. Та миний одоо хэлэх хоёр аргын аль нэгийг ашиглан хөдөлгөөний замыг тодорхойлж, дараа нь тухайн замаар шилжих элементийг тохируулж болно.

Бүрэлдэхүүн Өмнө дурьдсан элементүүдтэй ижил шинж чанаруудыг, нэмээд гурван түлхүүрийг авдаг: түлхүүрийн цэгүүд, эргүүлэх, зам. Нэмж дурдахад calcMode атрибуттай холбоотой нэг ялгаа бий. Элементийн хувьд түүний өгөгдмөл шугаман бус хурдтай байна.

Замын шинж чанарыг ашиглан хөдөлгөөний замыг зааж өгч байна

Замын шинж чанарыг хөдөлгөөний замыг зааж өгөхөд ашигладаг. Энэ нь ижил форматаар дүрслэгдсэн бөгөөд замын элементийн d атрибуттай ижил аргаар тайлбарлагддаг.

Замын дагуу хөдөлгөөнийг хөдөлгөөнтэй болгохын үр нөлөө нь холбогдох объектын одоогийн матрицад нэмэлт хувиргах матрицыг нэмэх бөгөөд энэ нь одоогийн хэрэглэгчийн координатын системийн х ба у тэнхлэгийн дагуух объектын хөдөлгөөнийг тодорхойлох боломжийг олгодог. Цаг хугацааны хором бүрийн X ба Y утгууд.

Өөрөөр хэлбэл, заасан замыг тухайн элементийн одоогийн байрлалтай харьцуулан тооцоолж, замын өгөгдлийг ашиглан элементийг өөр өөр замын байрлалд тохирох хуулбар болгон хувиргадаг.

Бид тойргоо дараах байдлаар хөдөлгөхийг хүсч байна.

Энэ зам дагуу тойргийг хөдөлгөх код нь дараах байдалтай байна.

Би таны анхаарлыг татахыг хүсч буй нэг зүйл байна: замын өгөгдөл дэх координатууд. Зам нь (M) координаттай (0, 0) цэг рүү шилжих замаар эхэлдэг бөгөөд дараа нь муруйг (c) өөр цэг рүү дүрсэлж эхэлдэг.

(0, 0) цэг нь хөдөлж буй хөдөлгөөнт дүрсийн эхэнд байгаа газраас үл хамааран тойргийн анхны байрлал гэдгийг та ойлгох нь чухал - энэ нь координатын системийн зүүн дээд булан БИШ. Дээр дурдсанчлан замын атрибутын координатууд нь тухайн элементийн байрлалтай холбоотой байдаг!

Дээрх кодын гаралт дараах байдалтай байна.
HTML:

CSS:

* ( хайрцагны хэмжээ: хилийн хайрцаг; ) .cont ( өндөр: 100vh; дэвсгэр: 20vmin; -webkit-шүүлтүүр: тодосгогч(10); дэвсгэр өнгө: цагаан; ) svg ( өргөн: 100%; өндөр: 100% ; тунгалаг байдал: 0.9; -webkit-шүүлтүүр: бүдэгрүүлэх (3px);)

Үр дүн

Хэрэв та замын эхлэлийг (0, 0) -ээс өөр координаттай цэг дээр зааж өгсөн бол хөдөлгөөн эхлэхээс өмнө тойрог нь заасан координат дээрх цэг рүү огцом үсрэлт хийх болно.

Жишээлбэл, та Illustrator дээр зам зурж, дараа нь тухайн замын өгөгдлийг хөдөлгөөний зам болгон ашиглахаар экспорт хийсэн гэж бодъё ( Би анх удаа энэ элементтэй ажиллахдаа үүнийг хийсэн); Экспортолсон зам нь иймэрхүү харагдах болно:

Энэ тохиолдолд замын эхлэлийн цэг нь (100.4, 102.2) байх болно. Хэрэв бид энэ өгөгдлийг хөдөлгөөний зам болгон ашиглах юм бол хөдөлгөөнт дүрс эхлэхээс өмнө тойрог гэнэт баруун тийш 100 нэгж, доошоо 102 нэгж үсэрч, дараа нь шинэ байрлалтай харьцуулахад зам дагуу хөдөлж эхэлнэ. Тиймээс хөдөлгөөнт замыг хөдөлгөөнт дүрсэнд бэлтгэхдээ өгөгдлийг сайтар шалгаарай.

from, by, to болон утгын шинж чанарууд ( ашигласан бол) хөдөлгөөний замыг төлөөлж буй одоогийн зурагны хэлбэрийг заана.

Элемент ашиглан хөдөлгөөний замыг зааж өгөх

Хөдөлгөөний замыг тодорхойлох өөр нэг арга бий. Холбогдох замын шинж чанарыг ашиглахын оронд элементийг ашиглан гадаад зам руу хандаж болно . - элементийн хүүхэд элемент , энэ нь xlink:href шинж чанарыг ашиглан гадаад зам руу холбогдож болно:

Хөдөлгөөний замнал баримт бичгийн аль ч хэсэгт тодорхойлж болно; Үүнийг бүр элемент дотор тодорхойлж болно мөн зотон дээр огт буулгаж болохгүй. Ихэнх тохиолдолд та элементийн хөдөлж буй замыг харуулахыг хүсч болох тул дараах жишээнд замыг харуулав.

Тодорхойлолтын дагуу дараахь зүйлийг анхаарна уу.

Хэлбэрийн янз бүрийн цэгүүд (x, y) нь объекттой холбогдох нэмэлт CTM хувиргах матрицыг бий болгож, хэлбэр (x, y) утгыг тооцоолох замаар хэрэглэгчийн одоогийн координатын системийн x ба у тэнхлэгийн дагуу хөдөлгөөнийг бий болгодог. цаг хугацааны сегмент бүрийн хувьд. Ийм байдлаар тухайн объектын хөдөлгөөний зам нь одоогийн хэрэглэгчийн анхны координатын систем рүү шилжсэнээр холбогдох объектыг тодорхой хугацааны турш хөдөлгөдөг. Нэмэлт хувиргалтыг зорилтот элементийн хувиргах шинж чанарын ачаар аливаа хувиргалтыг шилжүүлэх, эсвэл зорилтот элементийн animateTransform элементийн ачаар тухайн шинж чанарын хөдөлгөөнт дүрсийг шилжүүлэхэд ашигладаг.

Дахин хэлэхэд тойрог нь замын өгөгдлийн координатын дагуу бусад цэгүүдэд "үрждэг" эсвэл "өөрчлөгддөг".

Дараах жишээнд бид зурагны дунд зам байна. Тойрог замын эхэнд байрлуулна. Гэсэн хэдий ч, энэ замыг ашиглах үед тойрог одоогийн байрлалаасаа хөдөлж эхэлдэггүй. Илүү сайн ойлгохын тулд демо хувилбарыг үзээрэй. Тойрог дээр дарж хөдөлгөөнтэй болгоно.

HTML:

Анимацийг эхлүүлэхийн тулд тойрог дээр дарна уу.

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

Тойрог хэрхэн ижил хэлбэртэй мөртлөө өөр байршилд байгааг харж байна уу? Учир нь тойргийн байрлалыг замын өгөгдлийн утгын дагуу хөрвүүлдэг.

Энэ асуудлыг шийдэх нэг арга бол тойргийг (0, 0) болгож өөрчлөхөд замын өгөгдлийг ашиглах үед хөдөлж эхлэх бөгөөд хүлээгдэж буй байдлаар хөдөлдөг.

Өөр нэг арга бол тойргийн координатыг "дахин тохируулах" хувиргалтыг хэрэгжүүлэх бөгөөд ингэснээр замыг ашиглахаас өмнө тэдгээрийг тэг болгож тохируулах явдал юм.

Доорх нь хаалттай замыг ашигладаг, хөдөлгөөнт хөдөлгөөнт дүрсийг хязгааргүй олон удаа давтдаг дээрх үзүүлэнгийн өөрчилсөн хувилбар юм.

HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

Дүрмүүдийг дахин тодорхойлох

animateMotion-д ижил зүйлийг хийх хэд хэдэн арга байдаг тул ямар утгыг өөр утгуудаар солихыг зааж өгөх дүрмийг хүчингүй болгох нь зүйтэй юм.

animateMotion-н дүрмийг хүчингүй болгох:

• Хөдөлгөөний замыг тодорхойлоход mpath элемент нь замын шинж чанарыг дарж, энэ нь утгуудыг дарж, утгууд нь -аас, by, -ээс дардаг;
• KeyTimes шинж чанаруудтай харгалзах цэгийг тодорхойлохын тулд keyPoints шинж чанар нь замын атрибутыг, зам нь утгуудыг дарж, , -ээс, -ээс утгыг дарна.

Эргүүлэх аргыг ашиглан хөдөлгөөний замын дагуух элементийн чиглэлийг тохируулах

Өмнөх жишээн дээр зам дагуу хөдөлгөх хөдөлгөөнт дүрсийг тохируулах элемент нь тойрог байв. Гэхдээ бид машины дүрс гэх мэт тодорхой чиг баримжаатай элементийг хөдөлгөж байвал яах вэ?

Дараах жишээн дээрх машины дүрсийг Freepik бүтээсэн.

Энэ жишээнд би тойргийг бүлгийг бүрдүүлэгч элементийг агуулсан "машин" танигчтай бүлгээр сольсон.

Дараа нь дээр дурдсан замын хөдөлгөөний бэрхшээлээс зайлсхийхийн тулд би машиныг тодорхой зайд хөдөлгөж, анхны байрлалыг (0, 0) болгож хувиргасан.

Өөрчлөлтийн доторх утгууд нь үнэндээ машины анхны траекторийг тавьж эхлэх цэгийн координатууд юм ( шилжих командын дараа шууд М).

Дараа нь машин траекторийн дагуу хөдөлж эхэлнэ. Гэхдээ... энэ хөдөлгөөн дараах байдалтай байна.
HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

Тээврийн хэрэгслийн чиглэл нь тогтмол бөгөөд траекторийн дагуу ямар ч үед өөрчлөгддөггүй. Үүнийг өөрчлөхийн тулд бид rotate шинж чанарыг ашиглах хэрэгтэй.

Эргүүлэх шинж чанар нь гурван утгын аль нэгийг авдаг:

• auto: объектыг чиглэл рүү өнцгөөр эргүүлж байгааг илтгэнэ ( тэдгээр. шүргэгч вектор) хөдөлгөөний замнал;
• автоматаар урвуу: объектыг чиглэл рүү өнцгөөр эргүүлж байгааг илтгэнэ ( тэдгээр. шүргэгч вектор) хөдөлгөөний замнал нэмэх 180 градус;
• тоо: Эргэлтийн өнцөг нь заасан тоотой градусаар тэнцүү байх зорилтот элементэд тогтмол эргэлтийн хувиргалт хийхийг заана.

Дээрх жишээн дээрх машины чиглэлийг тохируулахын тулд бид эргэлтийн утгыг auto гэж тохируулж эхэлнэ. Мөн бид дараах үр дүнг авна.

HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

Хэрэв та машиныг замын талбайн гадна талд шилжүүлэхийг хүсвэл энэ нь автоматаар урвуу утгыг ашиглан хийгддэг.

Тойрог дээр дарж хөдөлгөөнтэй болгоно.

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

Энэ нь хамаагүй дээр, гэхдээ бидэнд нэг асуудал байсаар байна: машин дээшээ доошоо явж байна! Үүнийг өөрчлөхийн тулд бид үүнийг өөрийн у тэнхлэгийн дагуу эргүүлэх ёстой. Үүнийг энэ тэнхлэгийн дагуу "-1" дахин өсгөх замаар хийж болно.

Хэрэв бид ID машинтай g-д өөрчлөлт хийвэл машин бидний хүссэнээр хөдөлнө. Хэмжээний хувиргалт нь зөвхөн бидний өмнө хэрэглэж байсан хувиргалттай солигдох ёстой.

Эцсийн демо нь иймэрхүү харагдах болно:
HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1эм автомат; ) p (өнгө: #aaa; текстийг зэрэгцүүлэх: төвд; зах: 2эм 0; )

Үр дүн

KeyPoints ашиглан хөдөлгөөнт замаас хөдөлгөөнт дүрсний зайг хянах

KeyPoints шинж чанар нь заасан keyTimes утгууд тус бүрийн хөдөлгөөний замаас зайг тодорхойлох боломжийг бидэнд олгодог. Хэрэв keyPoints шинж чанарыг зааж өгсөн бол энэ нь keyPoints-ийн утгыг утгын атрибутын массив эсвэл замын атрибутын цэгүүдэд заасан цэгүүдээс илүүтэйгээр keyPoints утгуудад хэрэглэхэд хүргэдэг.

keyPoints нь 0-ээс 1 хүртэлх аравтын бутархайн утгуудын цэгийг таслалаар тусгаарласан жагсаалтыг авч, тухайн объектыг харгалзах keyTimes утгуудаар заасан хугацаанд хөдөлгөөний замаас хэр хол явахыг зааж өгнө.

Зайны тооцоог хөтөчийн алгоритмаар тодорхойлно. Жагсаалтын дараагийн утга бүр нь thekeyTimes шинж чанарын жагсаалтын утгатай тохирч байна. Хэрэв keyPoints жагсаалтыг зааж өгсөн бол энэ нь keyTimes жагсаалттай яг ижил тооны утгыг агуулсан байх ёстой.

Үүнийг бичиж байх үед keyPoints шинж чанарыг Chrome болон Firefox-д дэмждэггүй. Энэ нь миний өмнө дурдсан техникийн бусад хэсгүүдийн адил хэрэгжээгүй байна.

Текстийг дурын замаар зөөх

Текстийг тусгай зам дагуу зөөх нь бусад SVG элементүүдийг зам дагуу зөөхөөс өөр юм. Текстийг хөдөлгөөнтэй болгохын тулд элементийг ашиглах шаардлагатай болно , гэхдээ үгүй .

Эхлээд замын дагуу зарим текстийг байрлуулцгаая. Үүнийг элементийг үүрлэх замаар хийж болно элемент дотор .

Замын дагуу байрлуулах текстийг элемент дотор тодорхойлно , хүүхэд шиг биш .

textPath нь өмнөх жишээнүүдийн адил бидний ашиглахыг хүссэн бодит замыг заана. Замыг мөн адил зураг дээр харуулах эсвэл дотооддоо тодорхойлж болно . Доорх кодыг шалгана уу:
HTML:

CSS:

Үр дүн

Энэ замаар хөдөлж буй текстийг хөдөлгөөнтэй болгохын тулд бид элементийг ашиглана startOffset атрибутыг хөдөлгөөнтэй болгох.

startOffset нь замын дагуух текстийн офсетийг харуулдаг. 0% бол аялалын эхлэл; 100% бол төгсгөл. Жишээлбэл, хэрэв офсетийг 50% гэж тохируулсан бол текст нь замын дундаас эхэлнэ. Цаашид юу хийхээ та аль хэдийн таамагласан байх гэж бодож байна.

startOffset-ийг хөдөлгөөнт болгосноор бид зам дагуу хөдөлж буй текстийн эффектийг бий болгоно. Дараах демогийн кодыг харна уу.

HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1em auto; ) текст ( дүүргэх: deepPink; үсгийн хэмжээ: 2em; )

Үр дүн

Хөдөлгөөнт дүрсийг хувиргах: Элемент

Бүрэлдэхүүн Зорилтот элементийн хувиргах шинж чанарыг хөдөлгөж, ингэснээр хөдөлгөөнт дүрсийг хөдөлгөөн, масштаб, эргүүлэх болон/эсвэл хазайлтыг хянах боломжийг олгоно. Энэ нь тухайн элементэд жагсаасан шинж чанаруудыг хүлээн авдаг , нэмэлт шинж чанар: төрөл .

Төрөл шинж чанар нь бидний хөдөлгөөн хийж буй хувиргалтын төрлийг тодорхойлоход хэрэглэгддэг. Энэ нь таван утгын аль нэгийг авна: орчуулах, масштаблах, эргүүлэх, skewXмөн хазайсан.

from, by, to шинж чанарууд нь энэ хөрвүүлэлтийн төрөлд ашиглах боломжтой ижил синтакс ашиглан илэрхийлсэн утгыг авна:

• + type="translate"-ын хувьд утга тус бүрийг дараах байдлаар илэрхийлнэ [,];
• + type="scale"-ын хувьд тус бүрийн утга тус бүрийг дараах байдлаар илэрхийлнэ [,];
• + Төрөл="эргүүлэх"-ийн хувьд утга тус бүрийг [ гэж илэрхийлнэ. ];
• + type="skewX" ба type="skewY"-ийн хувьд тус бүрийн утга тус бүрийг дараах байдлаар илэрхийлнэ .

Элемент ашиглан ягаан тэгш өнцөгтийг эргүүлсэн өмнөх үзүүлэн рүүгээ буцъя . Эргэлтийн код дараах байдалтай байна.

-ээс болон хүрэх шинж чанарууд нь эргэлтийн өнцөг (эхлэл ба төгсгөл) болон эргэлтийн төвийг зааж өгдөг. Аль алиных нь хувьд эргэлтийн төв нь мэдээжийн хэрэг хэвээр байна. Хэрэв та төвийг заагаагүй бол энэ нь SVG зургийн зүүн дээд буланд байх болно. Дээрх кодын демо нь дараах байдалтай байна.
HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1em автомат; )

Үр дүн

Габриэлийн бүтээсэн ганц animateTransform-ийн өөр нэг хөгжилтэй жишээг доор харуулав.

HTML:

CSS:

* ( зах: 0; дэвсгэр: 0; ) html, их бие ( өндөр: 100%; ) их бие ( дэвсгэр: #FC0; ) svg ( байрлал: тогтмол; дээд: 20%; өндөр: 60%; зүүн: 20%; өргөн: 60%; )

Үр дүн

Ганц хувиргалтыг хөдөлгөөнт болгох нь маш энгийн боловч олон хувиргалтыг идэвхжүүлсэн үед бүх зүйл үнэхээр төвөгтэй, төөрөгдөлд ордог. Ялангуяа нэг animateTransform элемент нь нөгөө элементийг дарж чаддаг тул тогтмол цуврал эффектүүдийн оронд бид огт эсрэг зүйлтэй болж магадгүй юм.

Энэ нь SVG координатын систем, хувиргалт нь хэр төвөгтэй байдгаас гадна юм. Маш олон тооны янз бүрийн онцгой тохиолдлууд байж болох бөгөөд тэдгээрийг авч үзэх нь энэ өгүүллийн хамрах хүрээнээс гадуур юм.

SVG-г хувиргахын тулд би CSS хувиргалтыг ашиглахыг зөвлөж байна. Хамгийн сүүлийн үеийн шийдлүүд нь SVG-тэй маш сайн ажилладаг тул SVG-д хувиргалтыг хөдөлгөөнд оруулахын тулд танд SMIL огт хэрэггүй байж магадгүй юм.

Бүрэлдэхүүн

Тогтоосон элемент нь тодорхой хугацааны туршид шинж чанарын утгыг тохируулах энгийн арга хэрэгслийг өгдөг. Энэ нь бүх төрлийн атрибутуудыг дэмждэг, үүнд стринг, булиан зэрэг интерполяц хийх боломжгүй.

Суулгасан элементийг хавсаргах боломжгүй. Нэмэгдсэн болон хуримтлагдсан шинж чанаруудыг зөвшөөрөхгүй бөгөөд хэрэв заасан бол үл хэрэгсэх болно.

Учир нь нь тухайн элементийг тодорхой хугацаанд тодорхой утгаар тохируулахад хэрэглэгддэг ба энэ зааварт өмнө дурдсан бүх шинж чанарыг хүлээн зөвшөөрдөггүй. Жишээлбэл, тодорхой хугацааны туршид тэдгээрийн утгууд аажмаар өөрчлөгддөггүй тул энэ нь from эсвэл by шинж чанаруудыг агуулдаггүй.

Тогтоосон элементийн хувьд та зорилтот элемент, атрибутын нэр, төрөл, to утга, цагийн хөдөлгөөнт дүрсийг зааж өгөх боломжтой бөгөөд үүнийг дараах байдлаар удирдаж болно. start, dur, end, min,max, restart, repeatCount, repeatDurба дүүргэх.

Хулганы товшилтын дараа эргэдэг тэгш өнцөгтийн өнгийг цэнхэр болгож тохируулах жишээг доор харуулав. Өнгө нь 3 секундын турш цэнхэр хэвээр байх бөгөөд дараа нь анхны утга руугаа буцна. Тэгш өнцөгт дээр дарах тоолонд хөдөлгөөнт дүрс эхлэх ба өнгө нь 3 секундын турш өөрчлөгдөнө.

HTML:

CSS:

svg (хүрээ: 3px хатуу #eee; дэлгэц: блок; захын зай: 1em автомат; )

Үр дүн

Хөдөлгөөнт хөдөлгөөн хийх боломжтой элементүүд, шинж чанарууд, шинж чанарууд

Бүх SVG шинж чанаруудыг хөдөлгөөнтэй болгох боломжгүй, мөн бүх хөдөлгөөнт элементүүдийг ашиглан хөдөлгөөн хийх боломжтой бүх шинж чанаруудыг хөдөлгөөнт болгох боломжгүй.

Хөдөлгөөнтэй болгож болох бүх шинж чанаруудын бүрэн жагсаалтыг, мөн тэдгээрийг хөдөлгөөнд оруулахад ямар элементүүдийг ашиглаж болохыг харна уу. SVG хөдөлгөөнт дүрслэлийн энэ хэсэг.

Дүгнэлт

SMIL нь маш их боломжуудтай бөгөөд би зөвхөн зарим үндсэн зарчим, техникийн талуудын гадаргууг зурж үзсэн. Тодорхойлолтыг ашиглан та маш олон гайхалтай эффектүүдийг бий болгож чадна, ялангуяа хувиргах, хэлбэрийг өөрчлөх.

Цувралын өмнөх хичээлүүдэд бид вектор график ашиглах талаар авч үзсэн SVG HTML дээр. Одоо хөдөлгөөнт дүрсийг үзэх цаг болжээ SVG.

Үндсэн мэдээлэл

SVG хөдөлгөөнт дүрсийг элемент ашиглан хийдэг :

Бид элемент нэмнэ доторбүрэлдэхүүн

attributeName: Энэ нь хөдөлгөөнт дүрст оролцох шинж чанарыг тодорхойлдог.

-аас: нэмэлт шинж чанар. Эхлэх утгыг тодорхойлдог бөгөөд одоогийн утгыг анхдагчаар ашигладаг.

руу: Энэ шинж чанар нь хөдөлгөөнт дүрсийн чиглэлийг тодорхойлдог. attributeName шинж чанарт заасан утгаас хамааран үр дүн нь өөр байж болно. Дээрх жишээнд элементийн өндөр өөрчлөгдөх болно.

dur: Хөдөлгөөний үргэлжлэх хугацааг тодорхойлно. Энэ утгыг Clock Value Syntax форматад зааж өгөх ёстой. Жишээлбэл, 02:33 нь 2 минут 33 секунд, 3 цаг нь 3 цагтай тохирч байна. Бидний жишээн дээр бид хөдөлгөөнт дүрсний үргэлжлэх хугацааг 3 секунд гэж тодорхойлдог.

Бид элементтэй ижил зүйлийг хийдэг , гэхдээ энэ нь радиус (r) шинж чанарыг идэвхжүүлнэ.

Хөдөлгөөнт элементүүд

SVG элементүүдийг зөөхийн тулд та зөвхөн x ба y координатыг зааж өгөх хэрэгтэй.

Жишээн дээр бид тэгш өнцөгтийг 0-ээс 200 хүртэл 3 секундын дотор шилжүүлдэг. Мөн бид дүүргэх шинж чанарыг элементэд нэмнэ . Энэ шинж чанар нь дууссаны дараа хөдөлгөөнт дүрс хэрхэн ажиллахыг тодорхойлдог. Жишээн дээр, утгыг хөлдөөх нь элементийг хөдөлгөөнт дүрс дууссан газар хэвээр байлгахад хүргэдэг.

Элементэд мөн адил хамаарна , гэхдээ үүний тулд бид cx эсвэл cy шинж чанаруудыг өөрчлөх болно:

Олон шинж чанарыг хөдөлгөөнтэй болгох

Мэдээжийн хэрэг, элементэд Бид зөвхөн нэг шинж чанарт өөрчлөлт оруулах боломжтой, гэхдээ элементүүдийн хувьд Бид хэд хэдэн зүйлийг тодорхойлж болно. Үүнтэй адил, жишээ нь:

Энд бид элементийн шинж чанарыг хөдөлгөөнт болгож байна - цус харвалтын радиус ба өргөн.

Бид хуудсууд дээр SVG элементүүдийн хөдөлгөөнт дүрсний талаар видео хийнэ гэж удаан амласан боловч ямар нэг байдлаар бүтсэнгүй. Өнөөдөр бид CSS, SMIL болон JavaScript ашиглан (жишээ нь Snap.svg ашиглан) SVG хөдөлгөөнт дүрсний сонголтуудын талаар танд хэлэх цувралын эхний видеог танилцуулж байгаадаа баяртай байна.

Үнэн хэрэгтээ энэ бичлэгээр Мистралтай адилхан байсан. Бичлэг хийх ямар ч нөхцөл байдал байгаагүй. За, одоо эцэслэн шийдэгдлээ.

SVG хөдөлгөөнт дүрсүүд

Бүгдийг холбоосоор нэгтгэхийг дахин оролдъё. Хуудас дээрх SVG элементүүдийг хөдөлгөөнтэй болгох гурван арга байдаг бөгөөд тэдгээрийн хоёр нь HTML элементүүдэд мөн хамаарна. Би мэдээж CSS болон JavaScript хөдөлгөөнт дүрсүүдийн талаар ярьж байна. Гэхдээ SVG-ийн хувьд та SMIL (Synchronized Multimedia Integration Language) хөдөлгөөнт дүрсийг бас ашиглаж болно.

SMIL хөдөлгөөнт дүрс

Хэрэв бид замуудыг хөдөлгөөнтэй болгож, бүгдийг нь нэг SVG файлд хадгалах шаардлагатай бол энэ нь маш гайхалтай технологи юм. Тиймээ, CSS хөдөлгөөнт дүрсийг файлд оруулах боломжтой, гэхдээ тэдгээрийг замуудын d шинж чанарыг хөдөлгөөнд оруулахад ашиглах боломжгүй тул SMIL нь илүү сонирхолтой технологи болж хувирав. Үнэндээ JavaScript-ийг SVG файлд шууд оруулах боломжтой боловч хөтөчийн дэмжлэг нь арай өөр тул та юу, хэрхэн ашиглах талаар бодох хэрэгтэй.

SMIL нь эрт дээр үеэс (эхний хувилбарууд) бүх хөтчүүдэд дэмжигдсээр ирсэн бөгөөд одоог хүртэл эдгээр хөдөлгөөнт дүрсийг дэмждэггүй Internet Explorer-ээс бусад.

CSS хөдөлгөөнт дүрс

Энд бүх зүйл маш тодорхой байна, бид HTML элементүүдийн жижиг хөдөлгөөнт дүрслэлд CSS-г удаан хугацаагаар ашиглаж дассан. SVG-тэй ижил зүйлийг хийж болно: ихэнх шинж чанаруудыг хөдөлгөөнт байдлаар дүрслэх боломжтой бөгөөд хөтчийн дэмжлэг илүү сайн байдаг. Яагаад гэвэл ядаж Internet Exporer 10 нь CSS хөдөлгөөнт дүрс гэх мэт үзэгдлийн талаар олж мэдсэн.

JavaScript хөдөлгөөнт дүрс

Хамгийн найдвартай, тохиромжтой шийдэл бол үргэлж JavaScript бөгөөд үүнээс зугтах боломжгүй юм. Интерфейсүүдтэй ажиллахдаа энэ нь ямар нэг зүйлийг скрипт хийх цорын ганц сонголт юм. Аз болоход SVG-тэй ажиллахад зориулагдсан маш олон номын сангууд аль хэдийн бий болсон.

Зарим нь Snap.svg гэх мэт хөдөлгөөнт дүрсийг багтаасан байдаг. Олон хүмүүс Velocity.js-тэй ажиллаж дассан ч энэ номын санг хүн бүрт санал болгож байна.

Цувралын өмнөх хичээлүүдэд бид вектор график ашиглах талаар авч үзсэн SVG HTML дээр. Одоо хөдөлгөөнт дүрсийг үзэх цаг болжээ SVG.

Үндсэн мэдээлэл

SVG хөдөлгөөнт дүрсийг элемент ашиглан хийдэг :

Бид элемент нэмнэ доторбүрэлдэхүүн

attributeName: Энэ нь хөдөлгөөнт дүрст оролцох шинж чанарыг тодорхойлдог.

-аас: нэмэлт шинж чанар. Эхлэх утгыг тодорхойлдог бөгөөд одоогийн утгыг анхдагчаар ашигладаг.

руу: Энэ шинж чанар нь хөдөлгөөнт дүрсийн чиглэлийг тодорхойлдог. attributeName шинж чанарт заасан утгаас хамааран үр дүн нь өөр байж болно. Дээрх жишээнд элементийн өндөр өөрчлөгдөх болно.

dur: Хөдөлгөөний үргэлжлэх хугацааг тодорхойлно. Энэ утгыг Clock Value Syntax форматад зааж өгөх ёстой. Жишээлбэл, 02:33 нь 2 минут 33 секунд, 3 цаг нь 3 цагтай тохирч байна. Бидний жишээн дээр бид хөдөлгөөнт дүрсний үргэлжлэх хугацааг 3 секунд гэж тодорхойлдог.

Бид элементтэй ижил зүйлийг хийдэг , гэхдээ энэ нь радиус (r) шинж чанарыг идэвхжүүлнэ.

Хөдөлгөөнт элементүүд

SVG элементүүдийг зөөхийн тулд та зөвхөн x ба y координатыг зааж өгөх хэрэгтэй.

Жишээн дээр бид тэгш өнцөгтийг 0-ээс 200 хүртэл 3 секундын дотор шилжүүлдэг. Мөн бид дүүргэх шинж чанарыг элементэд нэмнэ . Энэ шинж чанар нь дууссаны дараа хөдөлгөөнт дүрс хэрхэн ажиллахыг тодорхойлдог. Жишээн дээр, утгыг хөлдөөх нь элементийг хөдөлгөөнт дүрс дууссан газар хэвээр байлгахад хүргэдэг.

Элементэд мөн адил хамаарна , гэхдээ үүний тулд бид cx эсвэл cy шинж чанаруудыг өөрчлөх болно:

Олон шинж чанарыг хөдөлгөөнтэй болгох

Мэдээжийн хэрэг, элементэд Бид зөвхөн нэг шинж чанарт өөрчлөлт оруулах боломжтой, гэхдээ элементүүдийн хувьд Бид хэд хэдэн зүйлийг тодорхойлж болно. Үүнтэй адил, жишээ нь:

Энд бид элементийн шинж чанарыг хөдөлгөөнт болгож байна - цус харвалтын радиус ба өргөн.