SVG Animasiya Bələdçisi (SMIL). SVG Animasiya Bələdçisi (SMIL) svg Nümunələrində Sadə Animasiya
Müəllifdən: sizə desəm ki, GIF kimi işləyən, ancaq vektor qrafikası ilə işləyən bir şəkil formatı var? Mən sizə desəm ki, bu formatda animasiyanın istiqamətini dəyişə bilərsiniz? Əgər belədirsə, bir təsviri əsas götürüb onun müxtəlif hissələrini ayrı-ayrılıqda və müxtəlif sürətlə canlandıra bilərsinizmi? Bəli, belə bir format artıq mövcuddur və bu SVG-dir. Sadəcə bir az cəsarətli olmaq lazımdır.
Bu yazıda mən köhnəni yeni ilə qarışdıracağam, primitiv bir şey götürüb ona yeni həyat nəfəs verəcəyəm. Sass iş prosesinizi asanlaşdırmağa və ola bilsin ki, avtomatlaşdırmanı nümayiş etdirməyə kömək edəcək. Bəzən avtomatlaşdırma yaradıcılığın xidmətində ola bilər.
Animasiya, köhnə yanaşmalar
Mən animasiya üzrə mütəxəssisdən uzağam, amma həqiqətən nəyi bəyəndiyimi bilirəm: hər şey hərəkət edəndə. Çox sadədir, mən veb-dizaynerəm və veb animasiya işimin bir hissəsidir. Animasiyaya dəstək artıq o qədər geniş yayılmışdır ki, biz diqqətimizi animasiyanın məqsədi və mənası kimi daha yüksək şeylərə yönəldə bilərik.
Təbiətinə görə animasiya ifadəli və çevik bir şey olmaq üçün nəzərdə tutulsa da, hamısı hamar yelkənli deyil. Bu məqalədə müzakirə olunan animasiyanın mən doğulmamışdan çox əvvəl son dərəcə populyar olması bir az üzücüdür.
Davamlı cazibə
"Hətta kompüterdən istifadə edərkən də hər şeyi özünüz edin."- Hayao Miyazaki
Hayo Miyazakinin "Studio Ghibli", o cümlədən "Spirited Away", "Howl's Moving Castle" və "Princess Mononoke" kimi bir çox möhtəşəm əsərlər istehsal etmiş, ənənəvi əl animasiya texnikasına, laylı animasiyaya sadiq qalır. CGI və ya CSS istifadə edərək əsas kadr animasiyasından fərqli olaraq, bu yanaşma daha çox vaxt aparır.
Miyazaki həm də uğur naminə gecə gec saatlarında animasiya işçiləri üçün şəxsən ramen əriştə hazırlaması ilə tanınır.
Bununla belə, Studio Ghibli əl ilə işləmir, çünki bu, keçmişin bir növ fetişidir. Kameranın ixtirasından bəri animasiyanın bu qədər populyar qalmasının səbəbi, həyata bir neçə vuruşla baxa bilməyinizdir. Bütün bunlar animasiyaya aiddir, burada hər bir kadr vektor artefaktı olmaqdansa, tamamilə rəssam tərəfindən çəkilir. Son məhsul daha zəngindir. Əl ilə rəsm çəkməyin danışılmamış bir ənənəsi var, buna görə də hər bir çərçivə bəzi məlumatları çatdırır.
Sol, hamar animasiya əsas kadr çevrilmələrindən istifadə etməklə hazırlanır, sağ tərəf isə bir-birinin ardınca üç müstəqil çərçivəyə əsaslanır. Firefix istifadəçiləri transformasiya mənşəli xassəsinin yuxarıdakı animasiyaya tətbiq edilmədiyini fərq etmiş ola bilər, hamısı səhvə görədir.
Əlverişsiz SMIL
İnternetdə laylı veb animasiyalar yaratmaq texnologiyasının olmadığını desəniz, yalan olar. Synchronized Multimedia Integration Language (SMIL) adlanan bu dil animasiya yaratmaq üçün nəzərdə tutulmuşdur. Jonathan Ingram, nümunə kimi Mortal Kombat personajlarından istifadə edərək laylı və dövrəli animasiya yaratmaq üçün SMIL-dən istifadə ilə bağlı əla dərsliyə malikdir:
< animate id = "çərçivə2" attributeName = "göstərmək" dəyərlər = "heç biri; daxili; heç biri; heç biri" keyTimes = "0;0,33;0,66;1" dur = "1s" başlamaq = "0s" repeatCount = "qeyri-müəyyən" / > |
Animasiya elementi əsas elementin animasiya vəziyyətini təyin etmək üçün istifadə olunur.
Bununla belə, ciddi problemlərdən də məhrum deyil. Kifayət qədər köhnə təsnifat olmasına baxmayaraq, SMIL hələ də IE-də dəstəklənmir. Üstəlik, IE12, 15 və hətta 38-də dəstək də planlaşdırılmır. Eyni zamanda, dil köhnəlir və Chrome-da dəstək azalır. Google-dan Paul Kinlan, Chrome 45 beta-nın əslində SMIL-in köhnəlməsi ilə bağlı xəbərdarlıqlara göz yumduğunu söylədi.
SMIL dəstəyi azalmaqda davam edir və animasiya yaratmaq üçün XML işarələməsindən istifadə etməyi bir az qəribə hesab edirəm. Mən animasiyamın ayrıca üslublar faylında olmasına öyrəşmişəm və məncə, o, oraya aiddir. Axı biz elementi canlandırarkən onun yalnız vizual mövqeyini dəyişirik, lakin işarələməyə təsir etmirik. Bu, yalnız JavaScript-də mümkündür.
Təəssüf ki, CSS-də laylı animasiyalar yaratmaq üçün açıq və ya sürətli bir yol yoxdur, lakin mən nadir hallarda istifadə olunan CSS açar kadr xüsusiyyətlərinə əsaslanan metodu təsvir edəcəyəm.
Gəlin başlayaq
@keyframe animasiyası animation-timing-function xassəsindən istifadə etməklə işləyir, siz bəzi zamanlama funksiyaları haqqında bilməlisiniz. Məsələn, asanlıq xüsusiyyəti tamamlanmağa yaxınlaşdıqca animasiyanın sürətini azaldır.
Nadir hallarda istifadə olunan step() funksiyası da bizim üçün maraqlıdır, çünki o, seğirmə effektini simulyasiya edir, sanki animasiya bir-birinin ardınca oynayan ayrı-ayrı təbəqələrdən ibarətdir. Məsələn, addımlar(5) beş ayrı təbəqənin kifayət qədər hamar animasiyasını həyata keçirəcək.
Step() funksiyasının bütün dəyərləri əsas kadr animasiyasını simulyasiya edir; Sehrli çərçivə keçidi yoxdur. Lakin, addımlardan (1) istifadə etsəniz, heç bir animasiya olmadan sadəcə kadrlar arasında keçid edə bilərsiniz. Qeyri-şəffaflıq xassəsini 1-dən 0-a dəyişdirməklə, animasiya elementini bir addımda göstərib gizlədə bilərik: burada o, orada yox. Bu, yaratmaq üzrə olduğum laylı animasiyanın qurulmasında çox vacib bir addımdır.
Elementlər ayrı təbəqələr kimi
İndiyə qədər məni yalnız bir element və ya təbəqə narahat edir, hansı ki, özü heç bir animasiya etmir və bu Miyazaki əriştəsinə layiq deyil. Bu zaman şəkil sadəcə görünür və yox olur.
Tam hüquqlu bir animasiya yaratmaq üçün daha çox şəkil yaratmalı olacağıq: animasiyanı təşkil edəcək təbəqələr dəsti. Bu mərhələ çox uzun və asan deyil, lakin mən bundan şikayət etməyəcəyəm: hər bir təbəqənin çəkilməsi bu növ animasiyanı xüsusi edir. Daha sonra animasiya məntiqinin yazılması ilə bağlı köməyə ehtiyacım olacaq.
İşarələmə
Bunun üçün mənə SVG lazımdır. Texniki olaraq istədiyiniz qədər təbəqə ola bilər, lakin SVG-də biz asanlıqla bir sıra yol elementləri müəyyən edə və onları bir-birinin üstünə qatlaya bilərik. Aşağıdakı nümunədə mən SVG elementindən istifadə edərək animasiya konteyneri yaratdım
< g class = "animation-name" > < path d = "" > < / path > < path d = > < / path > < path d = "" > < / path > < / g > |
Qatların yaradılması
SVG ilə işləmək üçün çoxlu qrafik redaktorları var, lakin Inkscape bu formatla işləmək üçün xüsusi olaraq yaradılmışdır və həmçinin daxili XML redaktə panelini ehtiva edir. Bu, həyatımızı çox asanlaşdıracaq. Həm də pulsuzdur. Mexanikanı nümayiş etdirmək üçün SVG-dən tez keçək. Yeni Inkscape sənədi yaradın və aşağıdakı şəkildəki kimi üç forma çəkin. Onların tam olaraq eyni olması lazım deyil.
Bütün formaları bir-birinin üstünə qoyun və sənədin ölçüsünü formaların ölçüsünə uyğunlaşdırın. Bunu etmək üçün Fayl->Sənəd Xüsusiyyətləri seçin və sonra rəsm və ya seçim üçün səhifənin ölçüsünü dəyişdirin. Heç bir fərdi formanın seçilmədiyinə əmin olun, əks halda sənəd həmin xüsusi formaya uyğun ölçüdə olacaq.
Sonra bütün formaları seçin və Obyekt->Qrup düyməsini sıxın, qrup elementi yaradılacaq
Əla, indi SVG faylını yadda saxlayın. Siyahıdan Optimized SVG seçin və Baxış qutusunu aktivləşdirin yanındakı qutuyu işarələyin. İndi SVG animasiya üçün tamamilə hazırdır.
Optimallaşdırma qeydləri
Bizim kimi sadə formalardan istifadə etməklə SVG məlumatları minimuma endirilir. Bu halda, animasiya edilmiş SVG-nin ölçüsü (sonra yazacağımız CSS daxil olmaqla) cəmi 2,3 KB olacaq. Sadəcə olaraq, hər bir təbəqədəki forma nə qədər sadə olsa, bir o qədər çox təbəqə əldə edə bilərsiniz. Bu məqalədə istifadə edəcəyimiz karalamalar kimi daha mürəkkəb şəkilləri canlandırmaq üçün Jake Archibald-ın SVGOMG alətindən istifadə etməyi məsləhət görürəm.
Qatlama
Yuxarıda yazdığım kimi, addımlardan (1) istifadə edərək qeyri-şəffaflıqdan istifadə edərək elementin görünməsini dəyişə bilərsiniz. Ekran xüsusiyyəti ilə eyni effekti əldə edə bilməzsiniz, çünki o, yalnız xüsusi dəyərləri qəbul edir (canlandırmaq üçün heç bir şey yoxdur). Əvvəlcə konteynerdəki bütün təbəqələri qeyri-şəffaflığa təyin edək:0.
Formalar > * ( qeyri-şəffaflıq: 0; animasiya müddəti: 0,75s; animasiya-iterasiya-say: sonsuz; animasiya-vaxt funksiyası: addımlar(1); )
Formalar > * ( qeyri-şəffaflıq: 0; animasiya - müddəti: 0.75s; animasiya - iterasiya - count : sonsuz ; animasiya - vaxt - funksiya : addımlar ( 1 ); |
Addım-addım vaxt funksiyalarının qurulmasında olduğu kimi, animasiya müddəti 0,75 saniyə olan sonsuz sayda iterasiya seçdim. Hər bir kadr eyni vaxt ərzində göründüyünə və üç kadrımız olduğuna görə, hər bir kadr 0,25 saniyə və ya saniyədə 4 kadr görünməlidir.
Beləliklə, qeyd edildiyi kimi, hər bir çərçivə bir-birinin ardınca görünür? Hər bir element 0,75 saniyəlik animasiya müddəti təyin olunmalı və sonra bütün kadrları eyni vaxtda işə salmalı və rəvan şəkildə birini digərinin üstündə göstərməlidir. Üç təbəqə ilə hər biri vaxtın üçdə birində görünməlidir. Mən faizlərdən istifadə etdim (@keyframe sintaksisində) və hər n-ci uşaq üçün fərqli animasiya tətbiq etdim.
@keyframes şekil-1 ( 0% ( qeyri-şəffaflıq: 1; ) 33.33333% ( qeyri-şəffaflıq: 0; ) .şəkillər > :nth-child(1) ( animasiya adı: shapes-1; ) @keyframes shapes-2 ( 33.33333 % ( qeyri-şəffaflıq: 1; ) 66,66667% ( qeyri-şəffaflıq: 0; ) .şəkillər > :nth-child(2) ( animasiya adı: shapes-2; ) @keyframes shapes-3 ( 66,66667% ( qeyri-şəffaflıq: 1; ) 100% ( qeyri-şəffaflıq: 0; ) .şəkillər > :nth-child(3) ( animasiya adı: şekiller-3; )
@keyframes forması - 1 ( 0 % { qeyri-şəffaflıq: 1; 33.33333 % { qeyri-şəffaflıq: 0; Formalar > : n-ci - uşaq (1 ) ( animasiya - ad: şekiller - 1; @keyframes formaları - 2 ( 33.33333 % { qeyri-şəffaflıq: 1; 66.66667 % { qeyri-şəffaflıq: 0; Formalar > : n-ci - uşaq (2 ) ( animasiya - ad: şekiller - 2; @keyframes formaları - 3 ( 66.66667 % { qeyri-şəffaflıq: 1; 100 % { qeyri-şəffaflıq: 0; Formalar > : n-ci - uşaq (3 ) ( animasiya - ad: şekiller - 3; |
Yerləşdirmə və əlaqə
İndi genişlənə bilən GIF animasiyamı yaratmaq üçün nəhayət SVG faylına üslublar əlavə edə bilərəm. Kompüterimdə tapşırıq icraçısı olmadığından, satıcı prefikslərini avtomatik əlavə etmək üçün avtoprefiksatorun onlayn versiyasından istifadə etdim.
< svg viewBox = "0 0 100 100" >
< g class = "animation-name" > < path d = "" > < / path > < path d = "" > < / path > < path d = "" > < / path > < / g > < / svg > |
Bəzi, lakin bütün brauzerlər img teqi vasitəsilə SVG-ni daxil etsəniz belə, animasiya oynayacaq. Obyektdən istifadə etmək daha etibarlıdır.
< object type = "image/svg+xml" data = "path_to/shapes.svg" role = "img" aria - label = "shapes animation" > < div role = "img" class = "shapes-fallback" aria - label = "shapes animation" > < / div > < / object > |
Qeyd edək ki, img dəyəri ilə WAI-ARIA rolu və həm obyektdə, həm də DIV elementində aria-label atributundan semantik dəqiqlik üçün istifadə olunur. Mən img ilə köhnə brauzerlər üçün geri dönüş etmədim, çünki bəzi brauzerlər SVG-ə əlavə olaraq bu teqi yükləyir. Amma əlbəttə ki, element.shapes-fallback-dəki background-image xassəsindən istifadə edərək CSS vasitəsilə statik fon şəkli əlavə etməlisiniz.
Bir şəkil, çoxlu animasiya
Ölçeklenebilirliğe əlavə olaraq, SVG-nin GIF-dən daha bir üstünlüyü var və bu, bir təsvirin ayrı-ayrı hissələrini - müxtəlif animasiya sürətləri və müxtəlif müddətləri canlandırmaq qabiliyyətidir. Aşağıdakı köpəkbalığı nümunəmdə quyruq və gözlər müxtəlif sürətlərdə və müxtəlif sayda təbəqələrlə canlandırılır.
Riyazi dildə desək, burada maraqlı bir şey baş verir: eyni faylda iki ayrı animasiyanız varsa, animasiyanın ümumi müddəti fərdi komponentlərdən daha uzun olacaq. Beləliklə, əgər bir animasiya üç, digəri isə dörd kadrdan ibarətdirsə, onda ümumi uzunluq 12 kadr olacaq - iki ayrı animasiyanın ən uzunundan üç dəfə uzun.
Hər bir çərçivənin birbaşa təbəqə ilə əlaqəli olduğu GIF-də bu effekti yalnız yeni şəkillər əlavə etməklə əldə etmək olar. Müvafiq olaraq, fayl ölçüsü artır.
Dəyişən animasiya
Shark.svg nümunəmdə həm bulanan quyruq, həm də yanıb-sönən gözlər alternativ, simmetrik animasiyadan istifadə edir, burada bütün təbəqələr əvvəl irəli, sonra geri və qeyri-müəyyən müddətə davam edir. Hər bir laylı animasiya elementi eyni vaxtda hərəkət etməyə başlayır və animasiya istiqamətindən istifadə edərək sonsuz animasiya effekti yaradır: hər təbəqə üçün alternativ xüsusiyyət:
Quyruq > * ( animasiya istiqaməti: alternativ; )
Quyruq > * ( animasiya - istiqamət: alternativ; |
Bu yanaşma çəkiyə qənaət edir. GIF-də eyni effekti əldə etmək üçün şəkilləri iki dəfə əlavə etməlisiniz: əvvəlcə normal qaydada, sonra tərs.
Həqiqətən laylı animasiya
Mən məqaləmə ənənəvi laylı animasiyanı müasir açar kadr animasiyası ilə müqayisə etməyin çətin olduğu qənaəti ilə başladım. Laylı animasiya yaranmazdan əvvəl hər bir kadr yalnız təsvirin cizgi hissəsi deyil, bütünlüklə çəkilirdi. Əgər təbəqələrdə yalnız animasiya edilmiş hissələri çəkirsinizsə, statik fonlar yenidən istifadə edilə bilər. Bu yanaşma vaxta qənaət etməklə yanaşı, hamarlığı da yaxşılaşdırır.
SVG işarələmənin bir çox "alt ağaclarına" bölünən mətn əsaslı şəkil formatıdır. Bu, bu formatı statik və animasiyalı şəkilləri birləşdirmək üçün ideal edir.
Sass ilə avtomatlaşdırma
Animasiyalarım getdikcə daha təkmilləşir və hər təbəqə üçün ayrıca animasiya dərsləri yaratmaq bir az yorucu olur. Ağır yükləri qaldırmaq üçün Sass-a qoşuldum. @for direktivindən və bəzi hesablamalardan istifadə edərək avtomatik olaraq animasiya yarada bildim:
$cels: 6; $fraksiya: 100 / $cels; @for $i 1-dən $cels ( $adı: şekiller; $start: ($fraksiya * $i) - $fraksiya; @keyframes #($name)-#($i) ( #($start * 1% ) ( qeyri-şəffaflıq: 1; ) #(($start + $fraksiya) * 1%) ( qeyri-şəffaflıq: 0; ) ) > :nth-child(#($i)) ( animasiya adı: #($adı)- #($i);
Seriyanın əvvəlki dərslərində vektor qrafikasından istifadəyə baxdıq SVG HTML-də. İndi animasiyaya baxmaq vaxtıdır SVG.
Əsaslar
SVG animasiyası elementdən istifadə etməklə həyata keçirilir
Bir element əlavə edirik
atribut adı: Bu, animasiyada iştirak edəcək atributu müəyyən edir.
-dan: isteğe bağlı atribut. Başlanğıc dəyərini təyin edir, cari dəyər standart olaraq istifadə olunur.
üçün: Bu atribut animasiyanın istiqamətini təyin edir. AttributeName atributunda göstərilən dəyərdən asılı olaraq nəticə dəyişə bilər. Yuxarıdakı nümunədə elementin hündürlüyü dəyişəcək.
dur: Animasiyanın müddətini təyin edir. Dəyər Saat Dəyəri Sintaksisi formatında göstərilməlidir. Məsələn, 02:33 2 dəqiqə 33 saniyəyə, 3h isə 3 saata uyğundur. Nümunəmiz üçün animasiya müddətini 3 saniyə olaraq təyin edirik.
Elementlə də eyni şeyi edirik
Hərəkət edən elementlər
SVG elementlərini köçürmək üçün yalnız x və y koordinatlarını təyin etməlisiniz:
Nümunədə düzbucaqlını 3 saniyə ərzində 0-dan 200-ə köçürürük. Elementə doldurma atributunu da əlavə edirik
Eyni şey elementə də aiddir
Çoxsaylı atributları canlandırın
Əlbəttə ki, elementdə
Burada elementin atributunu canlandırırıq
SVG yol elementinin canlandırılması
- Veb saytın inkişafı,
- Məlumatların vizuallaşdırılması
- Dərslik
Düşünürəm ki, çoxları yeni nəsil oyun konsollarının rəylərini görmüşlər Poliqon (Vox Media). Konsolların plan üslubunda çəkildiyi yerlər bunlardır:
Rəylər sərin, olduqca qeyri-adi və yeni görünürdü. Rəylərin əsas xüsusiyyətinin necə həyata keçirildiyini, SVG animasiyasını, bənzər bir şeyi özünüz necə edəcəyinizi və köhnə yaxşı SVG-nin yol elementinin animasiyası baxımından başqa hansı "gizli" imkanlarını gizlətdiyini öyrənə bilərsiniz.
Stroke-dasharray interpolyasiyası, nəzəriyyə
Ümumiyyətlə, belə bir xətt animasiyasının texnikası yeni deyil, sadəcə olaraq, son vaxtlara qədər SVG və onunla əlaqəli hər şey, mənim fikrimcə, ədalətsiz olaraq unudulmuşdu, amma xoşbəxtlikdən vəziyyət dəyişir. Beləliklə, yol elementini canlandırmaq üçün hiylə, yol elementinin vuruş-dasharray xüsusiyyəti sayəsində mümkündür. Bu xüsusiyyət nöqtəli xəttin parametrlərini, yəni vuruşun uzunluğunu və vuruşlar arasındakı boşluğu təyin etməyə imkan verir. Vuruşun uzunluğunu xəttin bütün uzunluğuna bərabər qoysaq, adi bir möhkəm xətt alırıq. Vuruşun uzunluğunu sıfıra bərabər təyin etsək və boşluğun uzunluğunu yenidən xəttin bütün uzunluğuna bərabər tutsaq, görünməz bir xətt alırıq. Və bütün xəttin uzunluğuna bərabər olan boşluq uzunluğu ilə vuruşun uzunluğunu tədricən artıraraq, onun rəsmini simulyasiya edə bilərik. Bu yanaşma ilə rəsm xəttin əvvəlindən baş verəcəkdir. Birdən sondan çəkmək lazımdırsa, onda daha bir xüsusiyyətdən istifadə etməlisiniz: stroke-dashoffset . Bu xüsusiyyət ilk vuruş üçün ofseti təyin edir. Beləliklə, ofseti azaltmaqla və vuruşun uzunluğunu artıraraq, xəttin sonundan rəsm alırıq.Oğlanlar Vox Media hibrid variantdan istifadə etdilər (mənim fikrimcə, bu, lazımsızdır), yeri gəlmişkən, bunu necə etdikləri barədə öz bloqlarında oxuya bilərsiniz (və etməlisən): Poliqon xüsusiyyət dizaynı: əyləncə və qazanc üçün SVG animasiyaları.
SVG animasiyasının tətbiqi
IN Vox Media onlar hamar animasiya üçün requestAnimationFrame-dən istifadə etməyi təklif edirlər, lakin bizim bir az fərqli məqsədlərimiz var, ona görə də biz daha sadə marşrut seçəcəyik, D3.js kitabxanasından və orada həyata keçirilən müddətə əsaslanan animasiyadan istifadə edəcəyik.Məqalənin əvvəlindən konsolu canlandırmaq üçün istifadə olunan faktiki iş kodu budur.
Queue() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(hazır); funksiya hazır(xəta, xml) ( //Svg faylımızın HTML sənədinə əlavə edilməsi var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("en"), svgHeight = svg.attr("yüksəklik") var yollar = svg.selectAll("yol") .call(keçid) ; funksiya keçid(yol) ( path.transition() .duration(5000) .attrTween("stroke-dasharray", tweenDash) .each("end", function() ( d3.select(bu).call(keçid) ; )); // sonsuz döngə ) funksiyası tweenDash() ( var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); // vuruşun interpolasiyası -dasharray attr qaytarma funksiyası(t) ( qaytarmaq i(t); ) )
Hələlik fırlanmadan, sadəcə xətt boyunca hərəkət etməklə başlayaq.
Queue() .defer(d3.xml, "wiggle.svg", "image/svg+xml") .await(hazır); funksiya hazır(xəta, xml) ( //Svg faylımızın HTML sənədinə əlavə edilməsi var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"); var yol = svg.select("yol#wiggle"), startPoint = pathStartPoint(yol) var marker ("dairə"); .attr("transform", "translate(" + startPoint + ")"); //marker funksiyasını yerləşdirmək üçün yolun başlanğıc nöqtəsi pathStartPoint(yol) ( var d = path.attr( "d"), dsplitted = d.split(" "); return dsplitted.split("," ) funksiyası keçid() ( marker.transition() .duration(7500) .attrTween("transform", translateAlong(path.node())) .each("son", keçid);// sonsuz döngə ) funksiyası translateAlong(yol) ( var l = path.getTotalLength(); qaytarılması funksiyası(i) ( qaytarılması funksiyası(t) ( var p = path.getPointAtLength(t) * l); "translate(" + p.x + "," + p.y + ")" qaytarın;//markeri köçürün ) ) )
Burada pathStartPoint(yol) xəttin başlanğıcının koordinatlarını yol elementinin atributundan çəkir. TranslateAlong(path) proqramında markerimizin koordinatları interpolatordan istifadə etməklə təyin edilir. Nümunəni burada görmək olar: D3.js ilə SVG yol elementi boyunca marker animasiyası. Siz həmçinin xətt çəkmə animasiyasını və marker hərəkətini birləşdirə bilərsiniz, bu belə görünə bilər: D3.js II ilə SVG yol elementi boyunca marker animasiyası;
Tapşırığı çətinləşdirək, fırlanma əlavə edək (yaxşı və markeri bir dairədən daha maraqlı bir şeyə dəyişdirin). Bir marker olaraq eni 48 və uzunluğu 24 olan bir raketimiz olacaq. Markerin standart lövbər nöqtəsi yuxarı sol künc olduğundan, biz onu ofset etməliyik ki, markerin mərkəzinə yapışsın. Fırlanan zaman bunu da nəzərə almalısınız, çünki bu, yuxarı sol küncdə də standart olaraq baş verir. Deyəsən, yerdəyişməni həll etmişik. İndi birbaşa fırlanmaya keçək, burada tangensin tərifi bizə kömək edəcək, arktangensdən istifadə edərək bucağı təyin edəcəyik.
İnterpolatoru təyin edən translateAlong(path) funksiyası belə görünəcək:
Function translateAlong(path) ( var l = path.getTotalLength(); var t0 = 0; return function(i) ( return function(t) ( var p0 = path.getPointAtLength(t0 * l);//əvvəlki nöqtə var p = path.getPointAtLength(t * l);////cari nöqtə var bucaq = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//tangens t0 = t üçün bucaq ; //mərkəzi raketin mərkəzinə köçürmək var centerX = p.x - 24, centerY = p.y - 12 "translate(" + centerX + "," + centerY + ")rotate(" + bucaq + " 24" + " 12; "+")"; )))
Tətbiqə burada baxa bilərsiniz.
SVG qrafikası animasiya elementlərindən istifadə etməklə canlandırıla bilər. Bu elementlər əvvəlcə SMIL animasiya spesifikasiyasında müəyyən edilmişdir; Bunlara daxildir:
— müəyyən müddət ərzində skalyar atributlar və xassələr üçün animasiya qurmağa imkan verir; animasiya üçün rahat stenoqramdır ki, bu da sizə görünmə xüsusiyyətləri kimi qeyri-rəqəm atributlarına və xassələrinə animasiya dəyərləri təyin etməyə imkan verir; — elementi hərəkət yolu boyunca hərəkət etdirir; - müəyyən müddət ərzində xüsusi atributların və ya xassələrin rəng dəyərini dəyişir. Xahiş edirik elementdən istifadə etdiyinizi nəzərə alın rəng dəyərləri ala biləcək xassələri müəyyən etmək üçün animasiya elementindən istifadə etməklə müqayisədə köhnəlmiş təcrübədir. SVG 1.1 spesifikasiyasında hələ də mövcud olsa da, həmin spesifikasiya onun köhnəldiyini açıq şəkildə ifadə etdi; SVG-2 spesifikasiyasından tamamilə çıxarıldı.
SMIL spesifikasiyasında müəyyən edilmiş animasiya elementlərinə əlavə olaraq, SVG SMIL animasiya spesifikasiyasına uyğun genişlənmələri ehtiva edir; bu uzantılara elementin funksionallığını genişləndirən atributlar daxildir
SVG uzantılarına aşağıdakılar daxildir:
— müəyyən müddət ərzində SVG transformasiya atributlarından birinə, məsələn transform atributuna animasiya təyin etməyə imkan verir; - yol (atribut) - İstənilən SVG yol məlumatının sintaksisi funksiyasının animateMotion elementinin yol atributunda göstərilməsinə imkan verir ( SMIL animasiyası yol atributunda yalnız SVG yol məlumatı sintaksisinin tabeli dəstindən istifadə etməyə imkan verir.).
Növbəti bölmədə animateMotion haqqında danışacağıq:
- hərəkət yolu kimi istifadə edilməli olan hərəkət yoluna istinad etmək üçün animateMotion elementi ilə birlikdə istifadə olunur. mpath elementi bağlanma teqindən əvvəl animateMotion elementinin içərisinə daxil edilir; - açar nöqtələr (atribut) - animateMotion üçün atribut kimi istifadə olunur ki, cizgi elementinin yol boyu hərəkət sürətinə dəqiq nəzarət təmin edilir;
- rotate(atribut) - Obyektin x oxu nöqtələrinin hərəkət yolunun tangens vektorunun istiqaməti ilə eyni (və ya əks) istiqamətdə fırlanması üçün avtomatik olaraq fırlanmasına nəzarət etmək üçün animateMotion üçün atribut kimi istifadə olunur. Bu atribut, istədiyiniz şəkildə işləyən yol boyunca hərəkət yaratmaq üçün açardır. Bu barədə daha ətraflı animateMotion bölməsində.
SVG animasiyaları təbiətinə görə CSS animasiyalarına və keçidlərinə bənzəyir. Cyframelər yaradılır, hər şey hərəkət edir, rənglər dəyişir və s. Bununla belə, CSS animasiyalarının edə bilmədiyi bəzi şeyləri edə bilər. Bunu bu təlimatda əhatə edəcəyəm.
SVG animasiya nə üçün istifadə olunur?
SVG-ni CSS (slaydlar) istifadə edərək tərtib etmək və canlandırmaq olar. Əsasən, HTML elementinə tətbiq oluna bilən istənilən transformasiya və ya keçid animasiyası SVG elementinə də tətbiq oluna bilər. Ancaq bəzi SVG xüsusiyyətləri var ki, onları CSS vasitəsilə canlandırmaq mümkün deyil, lakin bu, birbaşa SVG vasitəsilə edilə bilər.
Məsələn, SVG yolu həmin yolun formasını təyin edən verilənlər toplusu (d="" atributu) ilə müəyyən edilir. Bu məlumatlar SMIL vasitəsilə dəyişdirilə və canlandırıla bilər, lakin CSS vasitəsilə deyil.
Bunun səbəbi, SVG elementlərinin SVG təqdimat atributları kimi tanınan bir sıra atributlardan istifadə etməklə təsvir edilməsidir. Bu atributların bəziləri CSS-dən istifadə etməklə təyin edilə, dəyişdirilə və canlandırıla bilər, digərləri isə bunu edə bilməz.
Beləliklə, bir çox animasiya effektləri hazırda sadəcə CSS istifadə edərək həyata keçirilə bilməz. Bu boşluq ya JavaScript ilə, ya da SMIL-dən əldə edilən deklarativ SVG animasiyası ilə doldurula bilər.
Əgər JavaScript-dən istifadə etməyi üstün tutursunuzsa, mən Dmitri Baranovskinin "jQuery for SVG" adlanan snap.svg-ni tövsiyə edirəm.
Və ya animasiyaya daha cilalanmış yanaşmaya üstünlük verirsinizsə, bu dərslikdə əhatə edəcəyimiz SVG elementlərindən istifadə edə bilərsiniz!
SMIL-in JS animasiyasından başqa üstünlüyü ondan ibarətdir ki, SVG img kimi daxil edildikdə və ya CSS-də fon şəkli kimi istifadə edildikdə JS işləmir. SMIL animasiyası hər iki halda işləyir ( və ya tezliklə brauzerlər tərəfindən dəstəklənəcəyi gözlənilir).
Məncə, bu, əhəmiyyətli üstünlükdür. SMIL-i seçmək üçün özünüz üçün başqa səbəblər tapa bilərsiniz. Bu məqalə bu gün SMIL ilə başlamağınıza kömək edəcək bələdçidir.
Brauzer dəstəyi və alternativlər
SMIL brauzerlər tərəfindən kifayət qədər geniş şəkildə dəstəklənir. Internet Explorer və Opera Mini istisna olmaqla, bütün brauzerlərdə işləyir. Brauzer dəstəyi ilə bağlı hərtərəfli məlumat üçün müraciət edə bilərsiniz uyğunluq cədvəli və ya "İstifadə edə bilərəm".
SMIL animasiyaları üçün ehtiyat təmin etmək lazımdırsa, Modernizr istifadə edərək brauzer dəstəyini yoxlaya bilərsiniz. SMIL dəstəklənmirsə, bir növ alternativ təqdim edə bilərsiniz ( JavaScript animasiyası, alternativ yanaşma və s..).
Xlink:href istifadə edərək animasiya hədəfinin təyin edilməsi
Seçdiyiniz dörd animasiya elementindən hansını seçməyinizdən asılı olmayaraq, siz həmin element tərəfindən müəyyən edilmiş hədəf animasiyasını göstərməlisiniz.
Hədəfi müəyyən etmək üçün xlink:href atributundan istifadə edə bilərsiniz. Atribut bu animasiyanın obyekti olan və buna görə də zamanla dəyişəcək elementə URI istinadını götürür. Hədəf element sənədin cari SVG fraqmentinin bir hissəsi olmalıdır:
Əgər əvvəllər SVG animasiya elementləri ilə məşğul olmusunuzsa, yəqin ki, onlarla canlandırmalı olduqları başqa elementin içərisində yuvalanmış elementlər kimi qarşılaşmısınız. Bu spesifikasiya ilə təmin edilir.
Əgər xlink:href atributundan istifadə edilmirsə, o zaman hədəf element cari animasiya elementindən yuxarı birinci səviyyənin əsas elementi olacaq:
Beləliklə, əgər istəyirsinizsə " kapsullaşdırmaq» tətbiq olunduğu elementə animasiya, siz bunu edə bilərsiniz. Əgər siz animasiya elementlərinin sənəddə başqa yerdə saxlanmasını istəyirsinizsə, bunu xlink:href-dən istifadə edərək hər bir animasiya elementi üçün hədəf təyin etməklə edə bilərsiniz - hər iki üsul eyni dərəcədə yaxşı işləyir.
attributeName və attributeType istifadə edərək animasiyanın hədəf xassəsinin təyin edilməsi
Bütün animasiya elementləri daha bir atributla qarşılıqlı əlaqədə olur: attributeName. attributeName canlandırdığınız atributun adını təyin etmək üçün istifadə olunur.
Məsələn, mərkəzi mövqe üçün animasiya qurmaq istəyirsinizsə
attributeName yalnız bir dəyəri qəbul edir, lakin dəyərlərin siyahısını qəbul etmir, çünki siz bir anda yalnız bir atributu canlandıra bilərsiniz. Birdən çox atribut üçün animasiya təyin etmək istəyirsinizsə, həmin element üçün birdən çox animasiya effekti təyin etməlisiniz.
Bu, mənim çox xoşuma gəlməyən bir şeydir və məncə, CSS-in SMIL-dən üstünlüyü məhz buradadır. Ancaq yenə də digər animasiya atributları üçün mümkün olan dəyərlərə görə ( bu haqda daha sonra), eyni anda yalnız bir atribut adını təyin etməyin mənası var, əks halda daha bir neçə atribut dəyəri təyin etsəniz, onlar işləmək üçün çox mürəkkəb olacaq.
Atribut adını göstərərkən XMLNS prefiksi əlavə edə bilərsiniz ( XML ad sahəsi üçün qısa) atribut ad sahəsini göstərmək üçün.
Ad sahəsini attributeType atributundan istifadə etməklə də təyin etmək olar. Məsələn, bəzi atributlar CSS ad sahəsinə aiddir (bu o deməkdir ki, atribut CSS xüsusiyyəti kimi də tapıla bilər), digərləri - yalnız XML ad sahəsi.
Bu atributları sadalayan bir cədvəldir. Bu cədvəl bütün SVG atributlarını əhatə etmir, yalnız CSS istifadə edərək təyin edilə bilənləri əhatə edir. Bəziləri bu gün artıq CSS xassələri kimi mövcuddur.
Əgər attributeType dəyəri açıq şəkildə təyin edilməyibsə və ya avtomatik olaraq təyin edilibsə, brauzer əvvəlcə CSS xassələrinin siyahısını axtarmalı və heç nə tapılmadıqda elementin standart XML ad məkanında axtarış aparmalıdır.
Məsələn, aşağıdakı parça SVG düzbucaqlının qeyri-şəffaflığı üçün animasiya təyin edir. Qeyri-şəffaflıq atributu CSS xüsusiyyəti kimi də mövcud olduğundan, attributeType CSS ad sahəsinə təyin edilir:
Digər animasiya atributlarına aşağıdakı nümunələrdə baxacağıq. Bütün animasiya atributları başqa cür qeyd edilmədiyi təqdirdə bütün animasiya elementləri üçün ümumidir.
Son vəziyyəti göstərən elementin atributunu zamanla bir dəyərdən digərinə dəyişmək üçün animasiya qurun: from, by, to, dur və fill
Dairəni bir yerdən başqa yerə köçürməklə başlayaq. Biz bunu onun cx atributunun dəyərini dəyişdirməklə edəcəyik ( onun mərkəzinin x oxu boyunca mövqeyini təyin edən).
Bunun üçün elementdən istifadə edirik
Müəyyən müddət ərzində dəyəri bir dəyərdən digərinə dəyişmək üçün from, to və dur atributlarından istifadə edilir. Bunlara əlavə olaraq, siz animasiyanın başlanğıc atributundan istifadə etməyə nə vaxt başlamalı olduğunu da təyin edə bilərsiniz:
Yuxarıdakı misalda biz çevrəni təyin etdik və sonra həmin dairədə animasiya çağırdıq. Dairənin mərkəzi x oxu boyunca 50 vahid koordinatda olan ilkin mövqeyindən 450 vahid koordinatda olan nöqtəyə doğru hərəkət edir.
Başlanğıc atributunu klikləmək üçün təyin edirik. Bu o deməkdir ki, siçan kursoru basıldıqdan sonra dairə hərəkət etməyə başlayacaq. Bu atributu müəyyən vaxta təyin edə bilərsiniz. Məsələn, begin="0s" animasiyanı səhifə yükləndikdən dərhal sonra başlayacaq.
Siz müsbət vaxt dəyəri təyin etməklə animasiyanın başlamasını gecikdirə bilərsiniz, məsələn, begin="2s" animasiyanı səhifə yükləndikdən iki saniyə sonra başlayacaq.
Daha maraqlısı odur ki, siz start atributunu siçan kliklədikdən bir saniyə sonra animasiyaya başlayacaq click + 1s kimi dəyərlə təyin edə bilərsiniz!
Əlavə olaraq, digər animasiyaların müddətini və gecikməsini dəqiq hesablamadan animasiyanı sinxronlaşdırmağa imkan verən digər dəyərlərdən istifadə edə bilərsiniz. Bu haqda daha sonra.
dur atributu CSS animasiya-duration atributuna bənzəyir.
From və to atributları @keyframe CSS animasiya blokunun dən və açar kadrlarına bənzəyir:
@keyframes moveCircle ( ( /* animasiya başlanğıc dəyəri */ ) ilə ( /* animasiya son dəyəri */ ) )
atribut doldurma ( Təəssüf ki, elementin doldurma rəngini təyin edən başqa bir doldurma atributu ilə eyni adlanır) animasiya tamamlandıqdan sonra elementin ilkin vəziyyətinə qayıtmalı olub-olmamasını müəyyən edən animasiya doldurma rejimi xassəsinə bənzəyir.
SVG-dəki mənaları müxtəlif adların istifadəsi istisna olmaqla, CSS-də istifadə edilənlərə bənzəyir:
- dondurma: Effektin son animasiya müddəti dəyərində olduğu vəziyyətdə dondurulmasını təyin edən dəyər. Animasiya effekti sənəd bağlanana qədər dondurulur ( və ya animasiya yenidən başlayana qədər);
- sil: animasiya effekti silinir ( artıq tətbiq edilmir), müddətlə müəyyən edilmiş animasiya hərəkəti başa çatdıqdan sonra. Animasiya tamamlandıqdan sonra o, artıq hədəf elementə tətbiq edilmir ( animasiya yenidən başlamazsa).
Animasiyaya necə təsir etdiyini görmək üçün bu demodakı dəyərləri dəyişdirməyə çalışın:
HTML:
CSS:
Nəticə
by atributu animasiya üçün nisbi ofset təyin etmək üçün istifadə olunur. Adından göründüyü kimi, siz onu animasiyanın dəyişməsinə səbəb olacaq dəyəri təyin etmək üçün istifadə edə bilərsiniz.
Bu effekt əsasən CSS step() funksiyasının necə işlədiyi kimi animasiyanın müddətini bir sikldən digərinə dəyişdikdə nəzərə çarpır.
CSS step() funksiyasının SVG ekvivalenti calcMode="discrete" dir. Biz bir az sonra calcMode="discrete" atributuna keçəcəyik.
Yenidən başladın istifadə edərək animasiyanın yenidən başlaması
Aktiv olduqda animasiyanın yenidən başlamasını əngəlləməlisiniz. Bu məqsədlə SVG yenidən başladın atributunu təqdim edir.
Onu üç mümkün dəyərdən birinə təyin edə bilərsiniz:
- həmişə: Animasiya istənilən vaxt yenidən başlana bilər. Bu standartdır;
- whenNotActive: Animasiya yalnız qeyri-aktiv olduqda yenidən başlana bilər ( yəni animasiya müddəti başa çatdıqdan sonra). Animasiya davam edərkən animasiyanı yenidən başlatmaq cəhdlərinə məhəl qoyulmur;
- heç vaxt: Element əsas konteyneri yenidən işə salınmayana qədər yenidən işə salına bilməz. ( SVG vəziyyətində, əsas konteyner SVG sənəd fraqmenti olduğundan, sənəd yenidən yüklənənə qədər animasiya yenidən başlana bilməz.).
Animasiya adları və onların vaxtı
Tutaq ki, biz çevrənin mövqeyini və rəngini canlandırmaq istəyirik ki, hərəkət animasiyasının sonunda rəng dəyişsin. Bunu rəng dəyişikliyi animasiyasının başlanğıc dəyərini hərəkət animasiyasının müddətinə bərabərləşdirməklə edə bilərik; Bu, adətən CSS-də etdiyimiz şeydir.
Bununla belə, SMIL əla hadisə idarə etmə xüsusiyyətinə malikdir. Artıq qeyd etdim ki, start atributu klik + 5s kimi dəyərləri qəbul edir. Bu dəyər " adlanır hadisənin mənası“, və bu halda o, “saatın dəyəri” ilə müşayiət olunan hadisədən ibarətdir.
Burada ən maraqlı hissə ikinci hissədir - “saatın mənası”. Niyə sadəcə olaraq adlandırılmır? zaman dəyəri"? Cavab budur ki, siz bu dəyəri hərfi mənada, saat kimi istifadə edə bilərsiniz: siz onu "10min" və ya "01:33" kimi təyin edə bilərsiniz, bu da "" dəyərinə bərabər olacaq. 1 dəqiqə 33 saniyə", hətta "02:30:03" ( 2 saat, 30 dəqiqə və 3 saniyə). Bu yazıya görə, əksər brauzerlərdə saat dəyərləri tam tətbiq edilmir.
Belə ki, əgər əvvəlki demoda biz click + 01:30-dan istifadə etmişdiksə, o zaman brauzer dəstəyi həyata keçirilsəydi, animasiya siçan kliklədikdən 1 dəqiqə 30 saniyə sonra başlayacaqdı.
Bu atributun ala biləcəyi başqa bir dəyər növü hadisə təyinedicisinin izlədiyi başqa animasiyanın identifikatorudur. Əgər iki (və ya daha çox) animasiya effektiniz varsa ( eyni elementə tətbiq edilib-edilməməsindən asılı olmayaraq!) və onlardan biri digərinin icra mərhələsindən asılı olaraq başlaması üçün sinxronizasiya etmək istəyirsinizsə, digər animasiyanın müddətini belə bilmədən bunu edə bilərsiniz.
Məsələn, aşağıdakı misalda mavi düzbucaqlı dairə animasiyası başlayandan 1 saniyə sonra hərəkət etməyə başlayır. Bu, hər bir animasiya elementinə ID vermək və sonra aşağıdakı kodda göstərildiyi kimi başlanğıc hadisəsi ilə həmin ID-dən istifadə etməklə həyata keçirilir:
begin="circ-anim.begin + 1s"çevrə animasiyası başlandıqdan 1 saniyə sonra brauzerə düzbucaqlı animasiya etməyə başlamasını bildirir.
Bütün bunları bu demoda görə bilərsiniz:
HTML:
Dairənin animasiyasını və ondan 1 saniyə sonra düzbucaqlının animasiyasını başlamaq üçün üzərinə klikləyin.
CSS:
Nəticə
Siz həmçinin son hadisəsindən istifadə edərək dairəvi animasiya başa çatdıqda düzbucaqlı animasiyasını başlaya bilərsiniz:
Siz hətta çevrə animasiyası tamamlanmamış onu işə sala bilərsiniz:
RepeatCount istifadə edərək təkrarlanan animasiya
Əgər siz animasiyanı bir neçə dəfə işə salmaq istəyirsinizsə, bunu repeatCount atributundan istifadə edərək edə bilərsiniz. Siz onu neçə dəfə təkrarlamaq istədiyinizi təyin edə və ya animasiyanı qeyri-müəyyən müddətə təkrarlamaq üçün qeyri-müəyyən açar sözdən istifadə edə bilərsiniz.
Beləliklə, dairə animasiyasını iki dəfə təkrarlamaq istəyiriksə, kod belə görünməlidir:
Bunu demoda görə bilərsiniz. Mən dairə üçün təkrarların sayını 2, kvadrat üçün isə qeyri-müəyyən təyin etdim.
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; ) p (rəng: #aaa; mətni align: mərkəz; kənar: 2em 0; )
Nəticə
Nəzərə alın ki, animasiya döngə bitən zaman çatdığı dəyərdən deyil, orijinal dəyərindən başlayır. Təəssüf ki, SMIL bizə CSS animasiyasında olduğu kimi başlanğıc və son dəyərlər arasında gediş-gəliş yolunu müəyyən etməyə imkan vermir.
CSS-də animasiya-istiqamət xassəsi animasiyanın əks istiqamətdə oynamalı və ya hər dövrü sıfır nöqtəsindən başlayacağını müəyyən edir.
Məna animasiya istiqaməti: alternativ o deməkdir ki, cüt nömrəli animasiya ilmələri normal istiqamətdə, tək nömrəlilər isə əks istiqamətdə oynanılır. Bu o deməkdir ki, birinci dövrə başdan sona, ikinci dövrə başdan sona, üçüncü dövrə yenidən başdan sona qədər oynayacaq və s.
Bunu SMIL-də etmək üçün sizdən və atributların dəyərlərini dəyişdirmək üçün JavaScript-dən istifadə etməli olacaqsınız. John McPartland bir müddət əvvəl Big Bite Creative-dən məqalə dərc etdirmişdir, üzərində işlədiyi menyu ikonası animasiyası üçün bunu necə etdiyini təsvir edən.
Budur, Miles Elam tərəfindən yaradılmış gecikmədən istifadə edərək qeyri-müəyyən müddətə təkrarlanan möhtəşəm, sadə animasiya:
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; ) p (rəng: #aaa; mətni align: mərkəz; kənar: 2em 0; )
Nəticə
Əgər siz aralıq dəyərlər olmadan yalnız bütün animasiya üçün ümumi sürət tənzimləmə funksiyasını təyin etmək istəyirsinizsə, yenə də keyTimes atributundan istifadə edərək əsas kadrları təyin etməlisiniz, lakin siz yalnız 0 olan başlanğıc və son əsas kadrları təyin etməlisiniz; 1 - aralıq dəyərlər olmadan.
Əlavə edilmiş və yığılmış animasiyalar: əlavə və yığılır
Bəzən əvvəlki animasiyanın bitdiyi yerdən başlayan animasiya təyin etməliyik; və ya oynamağa başlamaq üçün dəyər kimi əvvəlki animasiyaların məcmu cəmindən istifadə edən animasiya. Bunu etmək üçün, SVG-də müvafiq olaraq adlandırılan iki atribut var: əlavə və toplama .
Tutaq ki, sizdə enini artırmaq istədiyiniz element və ya uzunluğunu artırmaq istədiyiniz bir xətt var. Və ya tutaq ki, müəyyən intervallarla addım-addım hərəkət etdirmək istədiyiniz elementiniz var. Bu funksiya xüsusilə animasiyaları təkrarlamaq üçün faydalıdır.
Hər hansı digər animasiyada olduğu kimi, siz "dan" və "to" dəyərlərini təyin etməlisiniz. Eyni zamanda, əlavə atributunu cəmi təyin etdikdə, bu dəyərlərin hər biri canlandırılan atributun orijinal dəyəri ilə əlaqələndiriləcəkdir.
Beləliklə, öz dairəmizə qayıdaq. Bunun üçün ilkin mövqe cx 50-dir. Əgər "0"-dan "100"-ə qədər dəyərlər təyin etsəniz, sıfır əslində 50-nin ilkin dəyərini, 100 isə 50+100-ün ilkin dəyərini bildirir. Yəni, praktikada məlum olur ki, siz “from="50″ to =="150" təyin edirsiniz.
Bunu etdikdən sonra aşağıdakı nəticəni əldə edirik:
HTML:
Animasiyaya başlamaq üçün dairəyə klikləyin.
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; ) p (rəng: #aaa; mətni align: mərkəz; kənar: 2em 0; )
Nəticə
Bütün əlavə atributun etdiyi budur. O, sadəcə olaraq, "dan" və "to" dəyərlərinin cari atribut dəyəri ilə əlaqəli olub olmadığını müəyyən edir. Atribut iki dəyərdən birini qəbul edir: cəmi və əvəz .
Sonuncu dəyər defoltdur və bu adətən o deməkdir ki, verilən və verilən dəyərlər cari/orijinal dəyərləri üstələyir, bu da animasiya elementinin animasiyanın başlanğıcında qəfil mövqeyini dəyişməsinə səbəb ola bilər.
(Yuxarıdakı misalda məbləği əvəz ilə əvəz etməyə çalışın və nə baş verdiyini görəcəksiniz).
Ancaq dəyərlərin əlavə edilməsini istəsək, ikinci animasiya dövrəsinin birincinin bitdiyi yerdə başlaması üçün nə etməli? Akkumulyasiya atributu bu işdə bizə kömək edəcək.
Toplanan atribut atributun əvvəlki son dəyərinin nəzərə alınıb-alınmamasına nəzarət edir. Varsayılan olaraq, onun dəyəri none-dir, bu o deməkdir ki, animasiya təkrarlananda, əvvəlki iterasiyanın sonunu saymadan əvvəldən bunu edir.
Bununla belə, siz onu cəm olaraq təyin edə bilərsiniz. Bu o demək olacaq ki, hər yeni animasiya dövrü əvvəlki dövrün bitdiyi yerə bağlıdır.
Beləliklə, əvvəlki animasiyaya qayıdıb accumulate="sum" təyin etsək, aşağıdakı nəticəni əldə edəcəyik:
HTML:
Animasiyaya başlamaq üçün dairəyə klikləyin.
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; ) p (rəng: #aaa; mətni align: mərkəz; kənar: 2em 0; )
Nəticə
Nəzərə alın ki, əgər hədəf atributunun dəyəri əlavəni dəstəkləmirsə və ya animasiya elementi təkrar etmirsə, toplama atributuna məhəl qoyulmur. Animasiya funksiyası yalnız bir atributla müəyyən edilərsə, bu da nəzərə alınmayacaq.
Son istifadə edərək animasiyanın sonunun təyin edilməsi
Animasiyanın nə vaxt başlamalı olduğunu müəyyən etməklə yanaşı, son atribut vasitəsilə onun nə vaxt bitəcəyini də təyin edə bilərsiniz. Məsələn, siz animasiyanı qeyri-müəyyən müddətə təkrar etmək üçün təyin edə bilərsiniz və sonra başqa element canlanmağa başlayanda onu dayandıra bilərsiniz.
Son atribut başlanğıc atributu ilə eyni dəyərlərə malikdir. Siz mütləq və ya nisbi zaman dəyərlərini/intervallarını, təkrar dəyərlərini, hadisə qiymətlərini və s. təyin edə bilərsiniz.
Məsələn, aşağıdakı demoda narıncı dairə yavaş-yavaş 30 saniyə ərzində kətanın digər tərəfinə keçir. Yaşıl dairə də animasiya olunur, lakin animasiya yalnız üzərinə kliklədiyiniz zaman başlayır.
Narıncı dairənin animasiyası yaşıl dairənin animasiyası başlayanda sona çatacaq - beləliklə, yaşıl dairəyə kliklədiyiniz zaman narıncı dairə dayanacaq.
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; )
Nəticə
Təbii ki, eyni elementə tətbiq olunan iki animasiya üçün eyni animasiya sinxronizasiyası edilə bilər. Məsələn, deyək ki, rəngin bir dəyərdən digərinə qeyri-müəyyən müddətə dəyişdiyi dairə rəng animasiyası qurduq.
Və sonra siçan kursoru ilə üzərinə kliklədiyiniz zaman dairəni hərəkətə gətirən animasiya. İndi biz elementin üzərinə kliklədikdən və hərəkət etməyə başlayandan sonra rəng dəyişikliyini dayandıracağıq.
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; )
Nəticə
Çoxlu başlanğıc və son qiymətlərdən istifadə edərək animasiya intervallarının müəyyən edilməsi
Əslində, həm başlanğıc, həm də son atributları vergüllə ayrılmış dəyərlər siyahısını qəbul edir. Başlanğıc atributunda hər bir dəyər aktiv və qeyri-aktiv animasiya intervalları yaradaraq, son atributda müvafiq dəyərə malik olacaq.
Bu, avtomobilin hərəkət etməsindən və ya dayanmasından asılı olaraq, təkərləri bir müddət aktiv və ya hərəkətsiz olan hərəkət edən avtomobil kimi düşünülə bilər.
Siz hətta müvafiq effektləri tətbiq etməklə hərəkət edən avtomobilin animasiyasını yarada bilərsiniz: biri avtomobili hərəkət etdirmək və ya əlavə və kumulyativ animasiyadan istifadə edən yol boyunca hərəkət etdirmək; ikincisi, təkərləri hərəkətlə sinxronlaşdırılacaq aralıqlarla fırlatmaqdır.
Çoxsaylı animasiya başlanğıc və bitmə vaxtlarının (yəni intervallar) təyin edilməsinə misal, aktivdən qeyri-aktivə keçən düzbucaqlının xüsusi intervallar əsasında fırlandığı aşağıdakı demodur.
(Animasiyanı əldən vermisinizsə demonu yenidən başladın).
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; )
Nəticə
Qeyd etmək lazımdır ki, yuxarıdakı nümunədə mən elementdən istifadə etdim
Onu da nəzərə alın ki, repeatCount-u qeyri-müəyyən olaraq təyin etsəniz belə, o, son dəyərlər tərəfindən ləğv ediləcək və animasiya qeyri-müəyyən müddətə təkrarlanmayacaq.
Min və max istifadə edərək elementin müddətini məhdudlaşdırmaq
Animasiyanın təkrar sayı və ya vaxtını məhdudlaşdıra bildiyiniz kimi, animasiyanın müddətini də məhdudlaşdıra bilərsiniz.
Min və max atributları müvafiq olaraq minimum və maksimum animasiya müddəti dəyərlərini təyin edir. Onlar bizə elementin müddəti üzrə aşağı və yuxarı hədləri tənzimləmək imkanı verir. Hər iki atribut saat qəbul edir.
min elementin müddəti ilə ölçülən animasiyanın minimum müddət dəyərini təyin edir. Bu atributun dəyəri 0-dan böyük və ya ona bərabər olmalıdır ( hərəkətin müddəti ümumiyyətlə məhdudlaşdırılmayan standart dəyər).
Maksimum olaraq, saatların dəyəri elementin müddəti ilə ölçülən hərəkət müddətinin maksimum dəyərinin dəyərini təyin edir. Onun dəyəri də 0-dan böyük olmalıdır. Maks üçün standart dəyər qeyri-müəyyəndir. Fəaliyyət müddətini qətiyyən məhdudlaşdırmır.
Hər iki atribut göstərilibsə, maksimum dəyər min dəyərdən böyük və ya ona bərabər olmalıdır. Bu tələb yerinə yetirilmirsə, hər iki atribut nəzərə alınmır.
Bəs elementin fəaliyyət müddətini nə müəyyənləşdirir? Daha əvvəl qeyd etdik ki, animasiya təkrarları üçün bir müddət var, bu "dan başqa" sadə müddət", təkrarlanmadan animasiya müddəti ( dur ilə göstərilir).
Beləliklə, hamısı birlikdə necə işləyir? Daha yüksək prioritet nədir? Bəs son atribut haqqında, o, dəyərləri yenidən təyin edir və ya sadəcə animasiyanı bitirir?
Hamısı belə işləyir. Brauzer əvvəlcə dur, repeatCount, repeatDur və end dəyərlərinə əsasən fəaliyyətin müddətini hesablayır. Bundan sonra minimum və maksimum qiymətlərə uyğun olaraq müddətin hesablanması başlayır.
Hesablamanın birinci mərhələsinin nəticəsi ikinci mərhələdə hesablanmış interval daxilində olarsa, birinci hesablanmış müddət qüvvədə qalır və dəyişdirilmir. Əks halda, iki ssenari mümkündür:
- İlk hesablanmış müddət maksimum dəyərdən böyükdürsə, elementin müddəti maksimum dəyərə bərabər olaraq müəyyən edilir;
- Əgər ilk hesablanan müddət min dəyərdən azdırsa, elementin müddəti min dəyərə bərabər olacaq və elementin davranışı aşağıdakı kimi olacaq;
- Əgər təkrarların müddəti ( və ya element təkrarlanmadıqda sadə müddət) element min -dən böyükdürsə, element hərəkət müddətinin standart vaxtında (daq daxil olmaqla) səsləndirilir;
- Əks halda, element standart təkrarlama müddəti ( və ya element təkrarlanmadıqda sadə müddət), sonra isə fill atributunun dəyərindən asılı olaraq donur və ümumiyyətlə çıxmır.
Bu, bizi brauzerin fəaliyyətin müddətini necə hesabladığı sualına gətirir. Qısalıq üçün təfərrüata varmayacağam.
Lakin spesifikasiyada dur , repeatCount , repeatDur və end atributlarının müxtəlif kombinasiyalarını və hər kombinasiya əsasında animasiya müddətinin necə təyin olunacağını göstərən çox ətraflı cədvəl var.
Bu cədvələ baxa və daha çox məlumat əldə edə bilərsiniz spesifikasiyanın bu bölməsi.
Nəhayət, əgər elementin əsas element başlamazdan əvvəl başlaması müəyyən edilibsə ( məsələn, sadəcə mənfi ofset dəyərindən istifadə etməklə), minimum müddət birinci mərhələdə hesablanmış dəyərlə müəyyən ediləcək və əsas elementin etibarlılıq intervalına daxil edilməyəcək.
Bu o deməkdir ki, min dəyəri elementin animasiyasına nəzərəçarpacaq təsir göstərməyəcək.
Misal : yolları çevirmək
SMIL vasitəsilə canlandırıla bilən atributlardan biri ( lakin bunun üçün CSS vasitəsilə animasiya təyin edə bilməzsiniz), atributudur
d atributunda yaratdığınız forma və ya formanın konturunu müəyyən edən məlumatlar var. Bu kontur məlumatları brauzerə yekun konturu təşkil edən nöqtələrin, qövslərin və xətlərin harada və necə çəkiləcəyini bildirən bir sıra əmr və koordinatlardan ibarətdir.
Bu atributun canlandırılması ilə biz SVG konturlarını çevirə və effektlər yarada bilərik fiqurların metamorfozu.
Lakin, formaları çevirə bilmək üçün başlanğıc, son və bütün aralıq formalar eyni sayda təpə/nöqtələrə malik olmalıdır və onlar eyni ardıcıllıqla görünməlidir. Müxtəlif formalı təpələrin sayı uyğun gəlmirsə, animasiya işləməyəcək.
Bunun səbəbi odur ki, formaların çevrilməsi əslində təpələri hərəkət etdirərək və onların mövqelərini interpolyasiya etməklə həyata keçirilir. Beləliklə, əgər bir təpə yoxdursa və ya ümumi çıxış sırasına uyğun gəlmirsə, kontur interpolyasiya edilə bilməz.
SVG konturunu canlandırmaq üçün biz atributName atributunu d olaraq təyin etməliyik və sonra başlanğıc və son formalarını təyin edən from və to dəyərlərini təyin etməliyik. Dəyər atributundan, transformasiya zamanı yolun götürməli olduğu hər hansı ara dəyərləri müəyyən etmək üçün də istifadə edə bilərsiniz.
Qısalıq naminə, bunu necə edəcəyimi təfərrüatlarına çatdırmayacağam. Bunun əvəzinə oxuya bilərsiniz Noah Blonun bu əla məqaləsi, burada o, transformasiya edən fiqurdan istifadə edərək necə yaratdığını izah edir
HTML:
CSS:
gövdə (hündürlük: 100vh; mətn düzülməsi: mərkəz; qutu ölçüsü: sərhəd qutusu; padding-top: calc(50vh - 56px); ) img, svg (ekran: inline-block; şaquli-align: orta; ) svg (hündürlük: 38px; eni: 38px; ekran: inline-blok; )
// Şəklin yeridilməsi onları sinxronlaşdırmağa kömək edir $(document).ready(function())( $("img").attr("src", "http://dab1nmslvvntp.cloudfront.net/wp-content/ yükləmələr /2014/08/1407310358spinner-cropped.gif"); ));
Nəticə
Feliks Ornoyun başqa bir dəyişmə nümunəsi:
HTML:
CSS:
Nəticə
Siz hətta ətrafdakı fonu kəsmək və müəyyən bir rəqəmi müəyyən etmək üçün transformasiya yolundan istifadə edə bilərsiniz. Heather Buşeldən bir nümunə:
HTML:
SCSS:
$baza: #C8C8A9; $ilkin: #FE4365; gövdə ( fon: $base; text-align: center; ) svg ( mövqe: mütləq; yuxarı: 50%; sol: 50%; kənar-yuxarı: -60px; sol kənar: -60px; ) .logo ( doldurun: $primary; ) .clip ( animasiya: slayd 8s sonsuz; ) @keyframes slide ( from ( transform: translateY(-135px); ) 50% ( transform: translateY(-5px); ) to ( transform: translateY(-135px) ))
Nəticə
Sərbəst yol boyu animasiya: Element
Element
Yol atributundan istifadə edərək hərəkət yolunun təyin edilməsi
Yol atributu hərəkət yolunu göstərmək üçün istifadə olunur. O, eyni formatda təmsil olunur və yol elementi üçün d atributu ilə eyni şəkildə şərh olunur.
Yol boyunca hərəkəti canlandırmanın təsiri əlaqəli obyektin cari matrisinə əlavə çevrilmə matrisini əlavə etməkdir ki, bu da obyektin cari istifadəçi koordinat sisteminin x və y oxları boyunca hərəkətini təyin etməyə imkan verir. Hər an üçün X və Y dəyərləri.
Başqa sözlə, göstərilən yol elementi müxtəlif yol mövqelərinə uyğun gələn nüsxələrə çevirmək üçün yol məlumatlarından istifadə edərək elementin cari mövqeyinə nisbətən hesablanır.
Bu kimi görünən bir yol boyunca hərəkət etmək üçün çevrəmizi canlandırmaq istəyirik:
Dairənin bu yolda hərəkət etməsi üçün lazım olan kod aşağıdakılardır:
Diqqətinizi çəkmək istədiyim bir şey var: yol məlumatındakı koordinatlar. Yol (M) koordinatları (0, 0) olan bir nöqtəyə hərəkət etməklə başlayır, bundan sonra başqa bir nöqtəyə əyri (c) təsvir etməyə başlayır.
Nöqtənin (0, 0) hərəkət animasiyasının başlanğıcında harada olmasından asılı olmayaraq, əslində dairənin ilkin mövqeyi olduğunu başa düşməyiniz vacibdir - bu, koordinat sisteminin yuxarı sol küncü DEYİL. Yuxarıda qeyd etdiyimiz kimi, yol atributunun koordinatları elementin cari mövqeyinə bağlıdır!
Yuxarıdakı kodun çıxışı aşağıdakı kimi olacaq:
HTML:
CSS:
* ( qutu ölçüsü: sərhəd qutusu; ) .cont ( hündürlük: 100vh; doldurma: 20vmin; -webkit-filtr: kontrast(10); fon rəngi: ağ; ) svg ( en: 100%; hündürlük: 100% ; qeyri-şəffaflıq: 0.9; -webkit-filter: blur(3px);)
Nəticə
Əgər siz yolun başlanğıcını (0, 0)-dan fərqli koordinatları olan bir nöqtədə göstərmisinizsə, onda çevrə animasiya başlamazdan əvvəl müəyyən edilmiş koordinatlardakı nöqtəyə kəskin sıçrayış edəcək.
Məsələn, tutaq ki, siz Illustrator-da bir yol çəkdiniz və sonra hərəkət yolu kimi istifadə etmək üçün həmin yolun məlumatlarını ixrac etmisiniz ( bu elementlə ilk dəfə işlədiyim zaman bunu etdim); ixrac edilmiş yol bu kimi görünə bilər:
Bu halda yolun başlanğıc nöqtəsi (100.4, 102.2) olacaqdır. Əgər bu məlumatı hərəkət yolu kimi istifadə etsək, animasiya başlamazdan əvvəl dairə qəfildən təxminən 100 vahid sağa və 102 vahid aşağı atlayacaq və sonra yeni mövqeyə nisbətən yol boyunca hərəkət etməyə başlayacaq. Buna görə də, animasiya üçün hərəkət yolunu hazırlayarkən məlumatları diqqətlə yoxlayın.
from, by, to və values atributları ( istifadə olunarsa) hərəkət yolunu təmsil edən cari kətanın formasını göstərir.
Bir elementdən istifadə edərək hərəkət yolunun təyin edilməsi
Hərəkət trayektoriyasını təyin etməyin başqa bir yolu da var. Əlaqədar yol atributundan istifadə etmək əvəzinə elementdən istifadə edərək xarici yola müraciət edə bilərsiniz
Hərəkət traektoriyası
Nəzərə alın ki, spesifikasiyaya uyğun olaraq:
Formanın müxtəlif nöqtələri (x, y) obyektlə əlaqə yaratmaq üçün əlavə CTM transformasiya matrisini təmin edir, nəticədə forma (x, y) dəyərlərinin hesablanması vasitəsilə istifadəçinin cari koordinat sisteminin x və y oxları boyunca hərəkət edir. hər zaman seqmenti üçün. Bu şəkildə, əlaqəli obyekt müəyyən bir müddət ərzində hərəkət edir, obyektin hərəkət yolu cari istifadəçinin orijinal koordinat sisteminə köçürülür. Əlavə çevrilmələr hədəf elementin transform xassəsi sayəsində istənilən transformasiyanın keçidində və ya hədəf elementin animateTransform elementi sayəsində həmin atributun hər hansı animasiyasının keçidində tətbiq edilir.
Yenə də dairə, yol məlumatlarının koordinatlarına uyğun olaraq, digər nöqtələrdə digər dairələrə "çoxalır" və ya "çevrilir".
Aşağıdakı nümunədə kətanın ortasında bir yolumuz var. Dairə yolun əvvəlində yerləşdirilir. Lakin bu yol tətbiq edildikdə, dairə indiki mövqeyindən hərəkətə başlamır. Daha yaxşı başa düşmək üçün demo versiyasına baxın. Dairəni canlandırmaq üçün üzərinə klikləyin.
HTML:
Animasiyaya başlamaq üçün dairəyə klikləyin.
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; ) p (rəng: #aaa; mətni align: mərkəz; kənar: 2em 0; )
Nəticə
Görürsünüzmü, çevrə eyni formanı izləyir, lakin fərqli yerdə necədir? Bunun səbəbi, dairənin mövqeyinin yol məlumatlarının dəyərlərinə uyğun olaraq çevrilməsidir.
Bu problemi həll etməyin bir yolu dairəni (0, 0) elə təyin etməkdir ki, yol məlumatı onu çevirmək üçün istifadə edildikdə, hərəkət etməyə başlayır və gözlənildiyi kimi hərəkət etsin.
Başqa bir yol, dairənin koordinatlarını "sıfırlayan" bir transformasiya tətbiq etməkdir ki, onlar yol tətbiq edilməzdən əvvəl sıfıra təyin olunsunlar.
Aşağıda qapalı yoldan istifadə edən və hərəkət animasiyasını sonsuz sayda təkrarlayan yuxarıdakı demonunun dəyişdirilmiş versiyasıdır.
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; ) p (rəng: #aaa; mətni align: mərkəz; kənar: 2em 0; )
Nəticə
Qaydaların yenidən müəyyən edilməsi
animateMotion üçün eyni şeyi etməyin bir neçə yolu olduğundan, hansı dəyərlərin başqa dəyərlərlə əvəz olunduğunu müəyyən etmək üçün qaydaları ləğv etmək yalnız məna kəsb edir.
animateMotion üçün qaydaları ləğv edin:
- Hərəkət yolunun müəyyən edilməsinə gəldikdə, mpath elementi yol atributunu üstələyir, bu da öz növbəsində dəyərləri üstələyir, dəyərlər isə -dən, ilə və üçün;
- KeyTimes atributlarına uyğun olan nöqtənin müəyyən edilməsinə gəldikdə, keyPoints atributu yol atributunu, yol dəyərləri, dəyərlər isə , ilə və ilə arasından əvəz edir.
Döndürmə ilə hərəkət yolu boyunca elementin oriyentasiyasını təyin etmək
Əvvəlki nümunəmizdə, yol boyunca hərəkət etmək üçün animasiya təyin etdiyimiz element dairə idi. Bəs biz xüsusi oriyentasiyası olan elementi canlandırırıqsa, məsələn, avtomobil ikonu kimi?
Aşağıdakı nümunədəki avtomobil simvolu Freepik tərəfindən yaradılmışdır.
Bu nümunədə dairəni qrupu təşkil edən elementi ehtiva edən "avtomobil" identifikatoru ilə qrupla əvəz etdim.
Sonra, yuxarıda qeyd olunan yol hərəkəti problemlərinin qarşısını almaq üçün, mən avtomobili müəyyən bir məsafədə hərəkət etdirən bir transformasiya tətbiq etdim ki, ilkin mövqe (0, 0) təyin olundu.
Dəyişikliklərin içərisindəki dəyərlər əslində avtomobilin ilk trayektoriyasının çəkilməyə başladığı nöqtənin koordinatlarıdır ( hərəkət əmrindən dərhal sonra M).
Sonra avtomobil trayektoriya boyunca hərəkət etməyə başlayır. Amma... bu hərəkətin necə göründüyü budur:
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; ) p (rəng: #aaa; mətni align: mərkəz; kənar: 2em 0; )
Nəticə
Avtomobilin oriyentasiyası sabitdir və trayektoriyanın heç bir nöqtəsində dəyişmir. Bunu dəyişmək üçün rotate atributundan istifadə etməliyik.
Döndürmə atributu üç dəyərdən birini alır:
- auto: obyektin istiqamətə bucaqla fırlandığını göstərir ( olanlar. tangens vektoru) hərəkət traektoriyaları;
- avtomatik tərs: obyektin istiqamətə bucaq altında fırlandığını göstərir ( olanlar. tangens vektoru) hərəkət trayektoriyası plus 180 dərəcə;
- sayı: Hədəf elementə sabit fırlanma transformasiyasının tətbiq edildiyini təyin edir, burada fırlanma bucağı dərəcələrdə göstərilən rəqəmə bərabərdir.
Yuxarıdakı nümunədə avtomobilin oriyentasiyasını tənzimləmək üçün fırlanma dəyərini avtomatik olaraq təyin etməklə başlayacağıq. Və aşağıdakı nəticəni alırıq:
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; ) p (rəng: #aaa; mətni align: mərkəz; kənar: 2em 0; )
Nəticə
Avtomobilin yolun kənarına keçməsini istəyirsinizsə, bu, avtomatik tərs dəyərdən istifadə etməklə həyata keçirilir.
Dairəni canlandırmaq üçün üzərinə klikləyin.
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; ) p (rəng: #aaa; mətni align: mərkəz; kənar: 2em 0; )
Nəticə
Bu, daha yaxşıdır, amma hələ də bir problemimiz var: avtomobil tərs hərəkət edir! Bunu dəyişmək üçün onu öz y oxu boyunca çevirməliyik. Bu, bu ox boyunca "-1" əmsalı ilə miqyaslaşdırmaqla edilə bilər.
Beləliklə, əgər şəxsiyyət vəsiqəsi ilə g-yə çevrilmə tətbiq etsək, avtomobil istədiyimiz şəkildə hərəkət edəcək. Şkala çevrilməsi yalnız əvvəllər tətbiq etdiyimiz transformasiya ilə növbələşməlidir.
Və son demo belə görünəcək:
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; ) p (rəng: #aaa; mətni align: mərkəz; kənar: 2em 0; )
Nəticə
KeyPoints istifadə edərək hərəkət yolundan animasiya məsafəsinə nəzarət
KeyPoints atributu bizə göstərilən keyTimes dəyərlərinin hər biri üçün hərəkət yolundan məsafəni təyin etməyə imkan verir. KeyPoints atributu göstərilibsə, bu, keyPoints atributunun dəyərlər atribut massivində və ya yol atribut nöqtələrində göstərilən nöqtələrə deyil, keyPoints dəyərlərinə tətbiq edilməsinə səbəb olur.
keyPoints 0-dan 1-ə qədər ondalık dəyərlərinin nöqtəli vergüllə ayrılmış siyahısını götürür və müvafiq keyTimes dəyərləri ilə müəyyən edilmiş vaxtda obyektin hərəkət yolundan nə qədər uzaqda hərəkət etməsi lazım olduğunu müəyyənləşdirir.
Məsafə hesablamaları brauzer alqoritmləri ilə müəyyən edilir. Siyahıdakı hər bir sonrakı dəyər thekeyTimes atribut siyahısındakı dəyərə uyğundur. KeyPoints siyahısı göstərilibsə, o, keyTimes siyahısı ilə eyni sayda dəyərdən ibarət olmalıdır.
KeyPoints atributu bu yazı zamanı Chrome və Firefox-da dəstəklənmir. Daha əvvəl qeyd etdiyim spesifikasiyanın digər hissələri kimi hələ həyata keçirilməyib.
Mətni ixtiyari yol boyunca köçürmək
Mətni fərdi yol boyunca köçürmək digər SVG elementlərini yol boyunca hərəkət etdirməkdən fərqlidir. Mətni canlandırmaq üçün elementdən istifadə etməlisiniz
Əvvəlcə yol boyunca bir neçə mətn yerləşdirək. Bu, bir elementin yerləşdirilməsi ilə edilə bilər
Yol boyunca yerləşdiriləcək mətn element daxilində müəyyən ediləcək
textPath daha sonra əvvəlki nümunələrdə etdiyimiz kimi istifadə etmək istədiyimiz faktiki yola istinad edəcək. Yol eyni şəkildə ya kətanda göstərilə bilər, ya da daxili olaraq müəyyən edilə bilər
HTML:
CSS:
Nəticə
Bu yolda hərəkət edən mətni canlandırmaq üçün elementdən istifadə edəcəyik
startOffset mətnin yol boyu ofsetini göstərir. 0% səyahətin başlanğıcıdır; 100% sondur. Beləliklə, məsələn, ofset 50% olaraq təyin olunarsa, mətn yolun ortasında başlayacaq. Düşünürəm ki, bundan sonra nə edəcəyimizi artıq təxmin etmisiniz.
startOffset-i canlandırmaqla biz yol boyu hərəkət edən mətnin effektini yaradacağıq. Aşağıdakı demo koduna baxın.
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; ) mətn (doldurma: deepPink; şrift ölçüsü: 2em; )
Nəticə
Transform Animasiya: Element
Element
Type atributu canlandırdığımız transformasiya növünü təyin etmək üçün istifadə olunur. Beş dəyərdən birini alır: tərcümə et, miqyas et, fırlat, skewX və əyri.
From, by və to atributları bu dönüşüm növü üçün mövcud olan eyni sintaksisdən istifadə edərək ifadə edilən dəyərləri qəbul edir:
- + type="translate" üçün hər bir fərdi dəyər kimi ifadə edilir
[, ]; - + type="miqyas" üçün hər bir fərdi dəyər kimi ifadə edilir
[, ]; - + Type="rotate" üçün hər bir fərdi dəyər [ kimi ifadə edilir
]; - + type="skewX" və type="skewY" üçün hər bir fərdi dəyər kimi ifadə edilir
.
Elementdən istifadə edərək çəhrayı düzbucağı fırlatdığımız əvvəlki demoya qayıdaq
From və to atributları fırlanma bucağını (başlanğıc və son) və fırlanma mərkəzini təyin edir. Hər ikisi üçün fırlanma mərkəzi təbii olaraq eyni qalır. Mərkəz göstərməsəniz, o, SVG kətanının yuxarı sol küncü olacaq. Yuxarıdakı kodun demosu belə görünür:
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; )
Nəticə
Aşağıda Gabriel tərəfindən yaradılan tək animateTransform ilə başqa əyləncəli nümunədir:
HTML:
CSS:
* ( kənar: 0; doldurma: 0; ) html, bədən ( hündürlük: 100%; ) bədən ( fon: #FC0; ) svg ( mövqe: sabit; yuxarı: 20%; hündürlük: 60%; sol: 20%; eni: 60%)
Nəticə
Tək bir transformasiyanı canlandırmaq olduqca sadədir, lakin birdən çox transformasiyanı aktiv etdikdə işlər həqiqətən mürəkkəb və çaşdırıcı ola bilər. Xüsusilə ona görə ki, bir animateTransform elementi digər elementi üstələyə bilər, buna görə də ardıcıl effektlər seriyası əvəzinə biz tamamilə əks bir şeylə nəticələnə bilərik.
Bu, SVG koordinat sistemi və çevrilmələrinin nə qədər mürəkkəb olduğuna əlavədir. Çox sayda müxtəlif xüsusi hallar ola bilər və onların nəzərdən keçirilməsi bu məqalənin əhatə dairəsindən kənardadır.
SVG-ni çevirmək üçün CSS çevirmələrindən istifadə etməyi məsləhət görürəm. Ən son həllər SVG ilə əla işləyir, ona görə də SVG-də transformasiyaları canlandırmaq üçün SMIL-ə ehtiyacınız olmaya bilər.
Element
Set elementi müəyyən bir zaman üçün atributun dəyərini təyin etmək üçün sadə bir vasitə təqdim edir. O, bütün növ atributları, o cümlədən sətirlər və booleanlar kimi interpolyasiya edilə bilməyənləri dəstəkləyir.
Set elementi əlavə edilə bilməz. Əlavə edilmiş və yığılmış atributlara icazə verilmir və göstərildiyi təqdirdə nəzərə alınmayacaq.
Çünki
Set elementi üçün siz hədəf elementi, atribut adını və növünü, dəyərini və zamanlama animasiyasını təyin edə bilərsiniz, bunlarla idarə oluna bilər: başlanğıc, dur, son, min, maks, yenidən başladın, təkrar say, təkrar Dur və doldurun.
Aşağıda siçan kliklədikdən sonra fırlanan düzbucaqlının rəngini maviyə təyin edən bir nümunə verilmişdir. Rəng 3 saniyə mavi qalır və sonra orijinal dəyərinə qayıdır. Siz hər dəfə düzbucaqlı üzərinə kliklədiyiniz zaman animasiya başlayacaq və rəng 3 saniyəyə dəyişəcək.
HTML:
CSS:
svg ( haşiyə: 3px bərk #eee; ekran: blok; kənar: 1em avtomatik; )
Nəticə
Animasiya edilə bilən elementlər, atributlar və xüsusiyyətlər
Bütün SVG atributları animasiya edilə bilməz və animasiya edilə bilən bütün atributlar bütün animasiya elementlərindən istifadə etməklə canlandırıla bilməz.
Animasiya edilə bilən bütün atributların tam siyahısı və onları canlandırmaq üçün hansı elementlərin istifadə oluna biləcəyi üçün müraciət edin SVG animasiya spesifikasiyasının bu bölməsi.
Nəticə
SMIL çox potensiala malikdir və mən yalnız bəzi əsas prinsiplərin və texniki aspektlərin səthini cızmışam. Spesifikasiyadan istifadə edərək çoxlu təsir edici effektlər yarada bilərsiniz, xüsusən də morfinq və forma çevrilməsi ilə.
- Dərslik
Düşünürəm ki, çoxları yeni nəsil oyun konsollarının rəylərini görmüşlər Poliqon (Vox Media). Konsolların plan üslubunda çəkildiyi yerlər bunlardır:
Rəylər sərin, olduqca qeyri-adi və yeni görünürdü. Rəylərin əsas xüsusiyyətinin necə həyata keçirildiyini, SVG animasiyasını, bənzər bir şeyi özünüz necə edəcəyinizi və köhnə yaxşı SVG-nin yol elementinin animasiyası baxımından başqa hansı "gizli" imkanlarını gizlətdiyini öyrənə bilərsiniz.
Stroke-dasharray interpolyasiyası, nəzəriyyə
Ümumiyyətlə, belə bir xətt animasiyasının texnikası yeni deyil, sadəcə olaraq, son vaxtlara qədər SVG və onunla əlaqəli hər şey, mənim fikrimcə, ədalətsiz olaraq unudulmuşdu, amma xoşbəxtlikdən vəziyyət dəyişir. Beləliklə, yol elementini canlandırmaq üçün hiylə, yol elementinin vuruş-dasharray xüsusiyyəti sayəsində mümkündür. Bu xüsusiyyət nöqtəli xəttin parametrlərini, yəni vuruşun uzunluğunu və vuruşlar arasındakı boşluğu təyin etməyə imkan verir. Vuruşun uzunluğunu xəttin bütün uzunluğuna bərabər qoysaq, adi bir möhkəm xətt alırıq. Vuruşun uzunluğunu sıfıra bərabər təyin etsək və boşluğun uzunluğunu yenidən xəttin bütün uzunluğuna bərabər tutsaq, görünməz bir xətt alırıq. Və bütün xəttin uzunluğuna bərabər olan boşluq uzunluğu ilə vuruşun uzunluğunu tədricən artıraraq, onun rəsmini simulyasiya edə bilərik. Bu yanaşma ilə rəsm xəttin əvvəlindən baş verəcəkdir. Birdən sondan çəkmək lazımdırsa, onda daha bir xüsusiyyətdən istifadə etməlisiniz: stroke-dashoffset . Bu xüsusiyyət ilk vuruş üçün ofseti təyin edir. Beləliklə, ofseti azaltmaqla və vuruşun uzunluğunu artıraraq, xəttin sonundan rəsm alırıq.Oğlanlar Vox Media hibrid variantdan istifadə etdilər (mənim fikrimcə, bu, lazımsızdır), yeri gəlmişkən, bunu necə etdikləri barədə öz bloqlarında oxuya bilərsiniz (və etməlisən): Poliqon xüsusiyyət dizaynı: əyləncə və qazanc üçün SVG animasiyaları.
SVG animasiyasının tətbiqi
IN Vox Media onlar hamar animasiya üçün requestAnimationFrame-dən istifadə etməyi təklif edirlər, lakin bizim bir az fərqli məqsədlərimiz var, ona görə də biz daha sadə marşrut seçəcəyik, D3.js kitabxanasından və orada həyata keçirilən müddətə əsaslanan animasiyadan istifadə edəcəyik.Məqalənin əvvəlindən konsolu canlandırmaq üçün istifadə olunan faktiki iş kodu budur.
Queue() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(hazır); funksiya hazır(xəta, xml) ( //Svg faylımızın HTML sənədinə əlavə edilməsi var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("en"), svgHeight = svg.attr("yüksəklik") var yollar = svg.selectAll("yol") .call(keçid) ; funksiya keçid(yol) ( path.transition() .duration(5000) .attrTween("stroke-dasharray", tweenDash) .each("end", function() ( d3.select(bu).call(keçid) ; )); // sonsuz döngə ) funksiyası tweenDash() ( var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); // vuruşun interpolasiyası -dasharray attr qaytarma funksiyası(t) ( qaytarmaq i(t); ) )
Hələlik fırlanmadan, sadəcə xətt boyunca hərəkət etməklə başlayaq.
Queue() .defer(d3.xml, "wiggle.svg", "image/svg+xml") .await(hazır); funksiya hazır(xəta, xml) ( //Svg faylımızın HTML sənədinə əlavə edilməsi var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"); var yol = svg.select("yol#wiggle"), startPoint = pathStartPoint(yol) var marker ("dairə"); .attr("transform", "translate(" + startPoint + ")"); //marker funksiyasını yerləşdirmək üçün yolun başlanğıc nöqtəsi pathStartPoint(yol) ( var d = path.attr( "d"), dsplitted = d.split(" "); return dsplitted.split("," ) funksiyası keçid() ( marker.transition() .duration(7500) .attrTween("transform", translateAlong(path.node())) .each("son", keçid);// sonsuz döngə ) funksiyası translateAlong(yol) ( var l = path.getTotalLength(); qaytarılması funksiyası(i) ( qaytarılması funksiyası(t) ( var p = path.getPointAtLength(t) * l); "translate(" + p.x + "," + p.y + ")" qaytarın;//markeri köçürün ) ) )
Burada pathStartPoint(yol) xəttin başlanğıcının koordinatlarını yol elementinin atributundan çəkir. TranslateAlong(path) proqramında markerimizin koordinatları interpolatordan istifadə etməklə təyin edilir. Nümunəni burada görmək olar: D3.js ilə SVG yol elementi boyunca marker animasiyası. Siz həmçinin xətt çəkmə animasiyasını və marker hərəkətini birləşdirə bilərsiniz, bu belə görünə bilər: D3.js II ilə SVG yol elementi boyunca marker animasiyası;
Tapşırığı çətinləşdirək, fırlanma əlavə edək (yaxşı və markeri bir dairədən daha maraqlı bir şeyə dəyişdirin). Bir marker olaraq eni 48 və uzunluğu 24 olan bir raketimiz olacaq. Markerin standart lövbər nöqtəsi yuxarı sol künc olduğundan, biz onu ofset etməliyik ki, markerin mərkəzinə yapışsın. Fırlanan zaman bunu da nəzərə almalısınız, çünki bu, yuxarı sol küncdə də standart olaraq baş verir. Deyəsən, yerdəyişməni həll etmişik. İndi birbaşa fırlanmaya keçək, burada tangensin tərifi bizə kömək edəcək, arktangensdən istifadə edərək bucağı təyin edəcəyik.
İnterpolatoru təyin edən translateAlong(path) funksiyası belə görünəcək:
Function translateAlong(path) ( var l = path.getTotalLength(); var t0 = 0; return function(i) ( return function(t) ( var p0 = path.getPointAtLength(t0 * l);//əvvəlki nöqtə var p = path.getPointAtLength(t * l);////cari nöqtə var bucaq = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//tangens t0 = t üçün bucaq ; //mərkəzi raketin mərkəzinə köçürmək var centerX = p.x - 24, centerY = p.y - 12 "translate(" + centerX + "," + centerY + ")rotate(" + bucaq + " 24" + " 12; "+")"; )))
Tətbiqə burada baxa bilərsiniz.
