Javascript animasiyası PHP kodunun icrasını gözləyir. JavaScript-də animasiya yaratmaq. Zamanlama funksiyaları
“Animasiya” dedikdə biz daha çox cizgi filmlərini – uşaqlıqdan sevdiyimiz “cizgi filmlərini” nəzərdə tuturuq. Amma izahlı lüğətə nəzər salsaq görərik ki, fransız dilindən tərcümədə “dirçəliş”, “animasiya” mənasını verir. Və burada belə çıxır ki, bu məna təəccüblü dərəcədə dəqiqliklə təkcə kino sənayesinə deyil, həm də veb texnologiyalarına uyğun gəlir.
Müxtəlif animasiya effektlərinin (keçidlər, hərəkətlər, çevrilmələr və s.) istifadəsi vebsaytı əhəmiyyətli dərəcədə “canlandırır”, istifadəçinin diqqətini idarə etməyə, onu tələb olunan elementə keçirməyə və müəyyən vizual işarələr verməyə imkan verir.
Animasiya haqqında danışarkən, Disney studiyasının animatorları tərəfindən tərtib edilmiş məşhur 12 prinsipi qeyd etməmək olmaz ki, onlardan istifadə animasiya effektlərinin ağlabatan və keyfiyyətli istifadəsi üçün son dərəcə vacibdir.
Veb səhifələrdə animasiyadan istifadə etməyə imkan verən texnologiyalardan danışarkən bir neçəsini qeyd edə bilərik, lakin bəlkə də heç biri . Cəmi bir neçə il əvvəl Flash animasiya texnologiyası nəhəng rəqib idi və çox məşhur idi. Amma indi, deyəsən, onun ən yaxşı illəri arxada qalıb və o, tədricən saytların səhifələrindən daha güclü və çevik Java skriptləri ilə əvəzlənir. Veb saytınızda animasiyadan ciddi şəkildə istifadə etmək qərarına gəlsəniz, JavaScript-ə etibar etməlisiniz. Ağıllı kitabxana seçimi etmək üçün bugünkü araşdırmanı etdim.
Dynamics.jsMən Dynamics.js ilə başlayacağam. Bu, fiziki cəhətdən real animasiya yaratmağa imkan verən ciddi və güclü bir kitabxanadır (məsələn, vebsaytın əsas səhifəsində nöqtənin harmonik sönümlü salınımları). Kitabxana istənilən DOM elementinin xassələrini idarə etməyə qadirdir. Dynamics.js menyular, düymələr, proses göstəriciləri, markerlər yaratmaq üçün istifadə olunur. Bu halda, tezlik, sönümləmə azalması, elastikliyi və ya prosesin müddətini xarakterizə edən parametrlər və s. kimi geniş çeşidli parametrlər mövcuddur.
CSS3 animasiyalarının meydana çıxması ilə HTML sənədləri daha cəlbedici oldu və işlənməsi daha asan oldu. @keyframes qaydasından istifadə edərək, HTML elementinin mövqeyi və ölçüsü daxil olmaqla, müxtəlif parametrləri asanlıqla müəyyən edə bilərsiniz. Animasiya parametri, öz növbəsində, müəyyən parametrlərdən asılı olaraq əsas kadrların işə salınması və köçürülməsi üçün cavabdehdir. Javascript və plaginlərə ehtiyac olmadan biz bütün müasir brauzerlərdə çox rahat işləyəcək ən mürəkkəb animasiyaları belə asanlıqla yarada bilərik.
CSS3 animasiyalarını inkişaf etdirmək üçün javascriptdən istifadə etmək lazım olduqda problemlər yaranır. Hamımız bilirik ki, javascript əksər hallarda fərdi dəyərləri və ya bütövlükdə animasiya prosesini hesablamağa imkan verən ilk zərurətdir.
Yeni animate() metodundan istifadə edərək CSS və javascript-in birləşdirilməsi
Yeni javascript animate() metodu bizə skript vasitəsilə animasiyaları idarə etməyə imkan verir. Əlbəttə ki, biz hələ də əsas kadrlarımızı müəyyən etmək üçün bütün CSS parametrlərindən istifadə etməliyik.
(hündürlük: "0"),
(hündürlük: "100%")
], {
müddəti: 3000,
təkrarlama: 2,
gecikmə: 1000
});
Yuxarıdakı misalda biz elementə animate() metodu əlavə edirik. Kvadrat mötərizədə biz verilən parametrin bizə lazım olan qədər vəziyyətini təyin edirik və nümunəmizdə hündürlük üzərində işləyəcəyik. Hər bir dəyər obyekt hərfi kimi yazılır və dəyərlər yalnız bir fərdi parametr üçün istifadə olunur. Genişlik və hündürlük kimi birləşmələrə icazə verilmir. Qeyd edək ki, dəyərlərin özləri sitat gətirilməli və javascript-uyğun sintaksisdə formatlaşdırılmalıdır ki, bu da “fon rəngi” əvəzinə “backgroundColor” istifadə etmək deməkdir. Obyektin başqa hərfində kvadrat mötərizələri bağladıqdan dərhal sonra sonrakı animasiyanı təyin edirik. Müddətdən istifadə edərək animasiyanın uzunluğunu, iterasiyadan istifadə edərək təkrarların tezliyini dəyişdirmək istəyirik və gecikmə parametrindən istifadə edərək gecikməni istəyə görə təyin edə bilərik - bu parametr animasiyanın başlamalı olduğu anı müəyyənləşdirir. Bütün vaxt dəyərləri millisaniyələrlə müəyyən edilir.
Biz əsas çərçivələr dəstini və onların müddətini idarə edirik
Dəyişdirməli olduğumuz hər bir parametrdən ayrıca animate() metodunu işlətməliyik. Bu o deməkdir ki, əgər hündürlüyü və eni dəyişmək istəsək, animate() funksiyasını yenidən işə salmalı olacağıq.
Document.getElementById("element").canlandır([
(en: "0", ofset: 0),
(en: "10%", ofset, 1/3),
(eni: "100%", ofset: 1)
], {
müddəti: 3000,
təkrarlama: 2,
gecikmə: 1000
});
Yuxarıdakı nümunədə elementin enini dəyişdiririk. Genişlik 0-dan başlayaraq 10 faizə qədər dəyişməli və sonra 100 faizə çatdıqda bitməlidir. Bütün bunlar təbii olaraq hamar animasiya ilə müşayiət olunacaq. Əlavə ofset parametri müəyyən edir ki, 0-dan 10 faizə qədər olan dəyişikliklər ümumi animasiya vaxtının 1/3 hissəsini, 10-dan 100-ə keçid isə ümumi animasiya vaxtının 2/3 hissəsini alacaq. Və eyni zamanda, animasiyanın ümumi müddəti duration parametri ilə müəyyən edilir. Bu halda birinci hissə bir saniyə ərzində, ikinci hissə isə 2 saniyə ərzində baş verəcək.
Dəyəri kəsr kimi göstərmək əvəzinə, ondalıq hissələrdən də istifadə edə bilərsiniz. 0-dan 1-ə qədər rəqəmlərdən istifadə etməlisiniz. Məsələn, 1/3 əvəzinə 0.33-dən istifadə edə bilərsiniz.
Daha çox animasiya variantları
Əgər siz CSS3 animasiya parametri ilə tanışsınızsa, o zaman yəqin ki, bilirsiniz ki, animate() metodu sizə animasiya prosesini idarə etməyə imkan verir. Siz animasiyanın istiqamətini, həmçinin sürətini və sürətini dəyişə bilərsiniz. Bitirdikdən sonra animasiyanın əvvəlinə qayıtmalı olduğunu müəyyən etmək istəyirsinizsə, bunu edə bilərsiniz.
Document.getElementById("element").canlandır([
…
], {
müddəti: 3000,
təkrarlama: 2,
gecikmə: 1000,
istiqamət: "əks",
asanlaşdırma: "rahatlıq",
doldurun: "irəli"
});
İstiqamət dəyəri animasiyanın istiqaməti haqqında məlumatları ehtiva edir. Əgər onu tərsinə təyin etsəniz, animasiya tərsinə oynayacaq. Alternativ dəyər animasiyanı standart istiqamətdə, sonra isə əks istiqamətdə oynamağa imkan verəcək. Və alternativ tərs dəyər son iki dəyəri birləşdirir.
Yüngülləşdirmə dəyəri sizə CSS3-dən yaxşı məlum olan ən ümumi modifikasiya funksiyalarından istifadə etməyə imkan verir, çünki siz asanlıqla daxil olmaq, asanlaşdırmaq və s. tapa bilərsiniz. Varsayılan olaraq, hər bir animasiya sürətlənmə və ya yavaşlama olmadan xətti olaraq işləmək üçün qurulur. Doldurma dəyəri animasiya bitdikdən sonra nə təqdim ediləcəyini müəyyən edir. Varsayılan olaraq, animasiya başlanğıc nöqtəsinə qayıtmalıdır. İrəli dəyərdən istifadə edərkən animasiya son açar kadrda dayanacaq.
Animasiyaya nəzarət
Dəyişəndə animate() istifadə etmək bizə javascript vasitəsilə animasiyanı idarə etməyə imkan verir. Biz öz mülahizəmizlə başlaya və dayandıra bilərik.
Var animasiya = document.getElementById("element").animate([
(hündürlük: "0"),
(hündürlük: "100%")
], {
müddəti: 3000,
təkrarlama: 2,
gecikmə: 1000
});
document.getElementById("animation_start").addEventListener("klik", funksiya() ()
animation.play();
), yalan);
document.getElementById("animation_pause").addEventListener("klik", funksiya() ()
animation.pause();
), yalan);
Nümunəmizdə animasiyanı animasiya dəyişəninə əlavə edirik, qəribədir. Sonra id animation_start və animation_pause olan elementlərə 2 hadisə dinləyicisini əlavə edirik. Bu dinləyicilər kliklədikdə müəyyən funksiyaların yerinə yetirilməsi ilə məşğul olacaqlar. Play animasiyanı işə salır, fasilə artıq onun nə etdiyi aydındır və tərs sizi dərhal son əsas kadra aparacaq və animasiyanı tamamilə dayandıracaq.
Hey, bu javascriptdir. Təbii ki, animasiyanın sonuna reaksiya verməyə imkan verən hadisə dinləyicimiz var. Bunu finişidən istifadə edərək həyata keçirə bilərik. Daxili bitirmə üçün müvafiq funksiyanı təyin etməlisiniz.
Animation.addEventListener("finish", function() (
alert("Animasiya bitdi.");
), yalan);
Yuxarıdakı misalda biz sadəcə olaraq animasiyanın tamamlandığını bildirən mesaj göndəririk.
Brauzer dəstəyi
animate() hazırda ilkin inkişaf mərhələsindədir və hazırda "eksperimental" etiketi ilə istifadə olunur. Bu seçim üçün dəstək Chrome-da 36-cı versiyadan başlayaraq görünəcək. Əgər onu indi sınamaq istəyirsinizsə, Chrome Canary-ni endirib quraşdıra bilərsiniz.
Bu il #ChromeDevSummit edə bilməzsiniz? Canlı yayımda bütün məzmunu (və daha çoxunu!) izləyin və ya yaxınlıqdakı məkanda CDS Genişləndirilmiş tədbiri üçün həmyaşıdlarınıza qoşulun. Ətraflı məlumat üçün Chrome Dev Summit 2019 vebsaytına baxın.
CSS və JavaScript AnimasiyalarPaul Dizayn və Mükəmməllik Vəkilidir
Google-da Tərtibatçı Əlaqələri komandasında Chrome və mobil interneti təbliğ edir.
İnternetdə animasiya yaratmağın iki əsas yolu var: CSS və JavaScript ilə. Hansı birini seçdiyiniz həqiqətən layihənizin digər asılılıqlarından və hansı növ effektlərə nail olmağa çalışdığınızdan asılıdır.
TL;DR- UI element dövlətlərinin dəyişdirilməsi kimi daha sadə "bir vuruşlu" keçidlər üçün CSS animasiyalarından istifadə edin.
- Sıçrama, dayandırma, dayandırma, geri sarma və ya yavaşlatma kimi təkmil effektlərə sahib olmaq istədiyiniz zaman JavaScript animasiyalarından istifadə edin.
- JavaScript ilə animasiya etməyi seçsəniz, Web Animasiya API-dən və ya rahat olduğunuz müasir çərçivədən istifadə edin.
Əsas animasiyaların əksəriyyəti ya CSS, ya da JavaScript ilə yaradıla bilər, lakin səy və vaxtın miqdarı fərqlidir (həmçinin bax CSS və JavaScript Performansı). Hər birinin öz müsbət və mənfi cəhətləri var, lakin bunlar yaxşı təlimatlardır:
- UI elementləri üçün daha kiçik, müstəqil dövlətləriniz olduqda CSS-dən istifadə edin. CSS keçidləri və animasiyaları yan tərəfdən naviqasiya menyusunu gətirmək və ya alət ipucunu göstərmək üçün idealdır. Siz vəziyyətləri idarə etmək üçün JavaScript-dən istifadə edə bilərsiniz, lakin animasiyalar özləri CSS-də olacaq.
- Animasiyalar üzərində əhəmiyyətli nəzarətə ehtiyacınız olduqda JavaScript-dən istifadə edin. Web Animations API bu gün əksər müasir brauzerlərdə mövcud olan standartlara əsaslanan yanaşmadır. Bu, mürəkkəb obyekt yönümlü tətbiqlər üçün ideal olan real obyektləri təmin edir. JavaScript həmçinin animasiyalarınızı dayandırmaq, dayandırmaq, yavaşlatmaq və ya geri qaytarmaq lazım olduqda faydalıdır.
- Bütün səhnəni əl ilə təşkil etmək istədiyiniz zaman birbaşa requestAnimationFrame istifadə edin. Bu, qabaqcıl JavaScript yanaşmasıdır, lakin siz oyun qurursanız və ya HTML kətanına rəsm çəkirsinizsə faydalı ola bilər.
Alternativ olaraq, əgər siz artıq jQuery-nin .animate() metodu və ya GreenSock-un TweenMax vasitəsilə kimi animasiya funksionallığını özündə birləşdirən JavaScript çərçivəsini istifadə edirsinizsə, o zaman animasiyalarınız üçün buna riayət etmək daha rahat ola bilər.
CSS ilə canlandırınCSS ilə animasiya ekranda hərəkət edən bir şey əldə etməyin ən sadə yoludur. Bu yanaşma kimi təsvir edilir deklarativ, çünki siz nə olmasını istədiyinizi müəyyənləşdirirsiniz.
Aşağıda elementi həm X, həm də Y oxlarında 100px hərəkət etdirən bəzi CSS-lər var. Bu, 500 ms çəkəcək CSS keçidindən istifadə etməklə həyata keçirilir. Hərəkət sinfi əlavə edildikdə, çevrilmə dəyəri dəyişdirilir və keçid başlayır.
Qutu ( transform: translate(0, 0); keçid: transform 500ms; ) .box.move ( transform: translate(100px, 100px); )
Keçid müddəti ilə yanaşı, seçimlər də var yüngülləşdirmə, əslində animasiya necə hiss olunur. Yüngülləşdirmə haqqında daha çox məlumat üçün asanlaşdırmanın əsasları bələdçisinə baxın.
Yuxarıdakı fraqmentdə olduğu kimi, siz animasiyalarınızı idarə etmək üçün ayrıca CSS sinifləri yaradırsınızsa, o zaman hər bir animasiyanı yandırıb söndürmək üçün JavaScript-dən istifadə edə bilərsiniz:
Box.classList.add("köçür");
Bunu etmək, tətbiqləriniz üçün gözəl bir tarazlıq təmin edir. Siz JavaScript ilə vəziyyəti idarə etməyə diqqət edə bilərsiniz və sadəcə olaraq brauzeri animasiyaları idarə etmək üçün buraxaraq hədəf elementlər üzrə müvafiq siniflər təyin edə bilərsiniz. Bu marşrutla enirsinizsə, elementdə keçid hadisələrini dinləyə bilərsiniz, lakin yalnız Internet Explorer-in köhnə versiyaları üçün dəstəkdən imtina edə bilsəniz; versiya 10 bu hadisələri dəstəkləyən ilk versiya idi. Bütün digər brauzerlər bir müddətdir ki, tədbiri dəstəkləyir.
Keçidin sonunu dinləmək üçün tələb olunan JavaScript belə görünür:
Var qutusu = document.querySelector(".box"); box.addEventListener("keçid", onTransitionEnd, false); onTransitionEnd() funksiyası ( // Keçid tamamlanmasını idarə edin. )
CSS keçidlərindən istifadə etməklə yanaşı, ayrı-ayrı animasiya əsas kadrları, müddətləri və təkrarlamaları üzərində daha çox nəzarət etməyə imkan verən CSS animasiyalarından da istifadə edə bilərsiniz.
Qeyd: Əgər animasiyalarda yenisinizsə, əsas kadrlar əl ilə çəkilmiş animasiyalardan köhnə termindir. Animatorlar bəzi hərəkətin ən ekstremal hissəsi kimi şeyləri çəkən əsas kadrlar adlanan fəaliyyət parçası üçün xüsusi çərçivələr yaradacaq və sonra əsas kadrlar arasında bütün fərdi kadrları çəkməyə başlayacaqdılar. Bu gün CSS animasiyaları ilə oxşar bir prosesimiz var, burada biz brauzerə verilmiş nöqtələrdə CSS xüsusiyyətlərinin hansı dəyərlərə sahib olması lazım olduğunu öyrədirik və o, boşluqları doldurur.Siz, məsələn, keçidlərlə eyni şəkildə qutunu canlandıra bilərsiniz, lakin klik kimi heç bir istifadəçi əlaqəsi olmadan və sonsuz təkrarlarla onu canlandırın. Eyni zamanda birdən çox xassələri də dəyişə bilərsiniz:
Box ( /* Animasiyanı seçin */ animation-name: moveBox; /* Animasiyanın müddəti */ animasiya-duration: 1300ms; /* Animasiyanın işləməsini istədiyimiz vaxtların sayı */ animation-iteration-count: sonsuz; /* Hər tək təkrarlamada animasiyanın tərsinə çevrilməsinə səbəb olur */ animasiya istiqaməti: alternativ; % (çevir: tərcümə (100px, 100px); qeyri-şəffaflıq: 0.2; ) 100% (çevir: tərcümə (30px, 30px); qeyri-şəffaflıq: 0.8; ) )
CSS animasiyaları ilə siz hədəf elementdən asılı olmayaraq animasiyanın özünü müəyyən edirsiniz və tələb olunan animasiyanı seçmək üçün animasiya adı xassəsindən istifadə edirsiniz.
Əgər CSS animasiyalarınızın köhnə brauzerlərdə işləməsini istəyirsinizsə, satıcı prefikslərini əlavə etməlisiniz. Bir çox alətlər sizə lazım olan CSS-nin prefiksli versiyalarını yaratmağa kömək edə bilər, bu da sizə mənbə fayllarınızda prefikssiz versiyanı yazmağa imkan verir.
JavaScript və Web Animasiyalar API ilə animasiya edinJavaScript ilə animasiyalar yaratmaq, müqayisə üçün, CSS keçidləri və ya animasiyalar yazmaqdan daha mürəkkəbdir, lakin o, adətən tərtibatçılara əhəmiyyətli dərəcədə daha çox güc verir. Siz xüsusi CSS xassələrini canlandırmaq və ya birləşdirilə bilən effekt obyektləri yaratmaq üçün Web Animasiyaları API-dən istifadə edə bilərsiniz.
Salam! Bu dərslikdə biz JavaScript-də animasiyalara baxacağıq. JavaScript animasiyası uyğun olmayan yerlərdə istifadə olunur.
Məsələn, kətan üzərində Bezier əyrilərindən kənara çıxan xüsusi vaxt funksiyası ilə mürəkkəb trayektoriya üzrə animasiya. Köhnə IE-də animasiya üçün də istifadə olunur. Xüsusilə mobil cihazlarda resurslara qənaət etmək üçün CSS animasiyalarından istifadə etmək daha məqsədəuyğundur.
Əvvəlcə animasiyanı təyin edək. Beləliklə, HTML/CSS nöqteyi-nəzərindən animasiya DOM elementinin üslubunun tədricən dəyişməsidir. Məsələn, style.left koordinatını 0px-dən 100px-ə artırmaq elementi sola sürüşdürür.
Metoddan istifadə edərək, saniyədə 50 dəyişiklik edərək sol xassəni 0-dan 100-ə qaldırsanız, hamar bir hərəkət kimi görünəcəkdir. Film sənayesində olduğu kimi eyni prinsip: animasiya üçün saniyədə 24 və ya daha çox setInterval zəngləri kifayətdir.
Animasiya kodu belə görünür:
Var fps = 50; // saniyədə 50 kadr var timer = setInterval(funksiya () (əgər (vaxt bitdisə) clearInterval(taymer); başqa bir az sola artır), 1000 / fps)
Budur animasiya kodunun daha tam nümunəsi:
Var start = Date.now(); // başlanğıc vaxtını yadda saxla var timer = setInterval(function() ( // animasiya başlayandan nə qədər vaxt keçdiyini hesablayın var timePass = Date.now() - start; if (timePassed >= 2000) ( clearInterval( timer); // 2 saniyə qayıtdıqdan sonra bitir; // timePassed 0-dan 2000-ə qədər getdiyi halda // sola 0-dan 400px-ə qədər dəyərlər qəbul edilir draw(timePass) funksiyası ( train.style.left = timePass / 5 + "px"; )
AnimationFrame sorğusuƏgər sizdə birdən çox belə setInterval varsa, lakin kodun müxtəlif yerlərdə bir neçəsi varsa, o zaman brauzer eyni 20 ms-də səhifə ilə bir dəfədən çox işləməlidir. Ancaq setInterval ilə yanaşı, başqa hərəkətlər də var, məsələn, səhifəni sürüşdürmək, onları da çəkmək lazımdır.
Bütün yenidən çəkmə hərəkətləri müstəqil olaraq həyata keçirilirsə, onda çoxlu ikiqat iş görüləcəkdir.
Performans baxımından bütün yenidən çəkilişləri bir yerə qruplaşdırmaq və hamısını birlikdə mərkəzləşdirmək daha yaxşıdır.
Bunun üçün animasiyanı dəstəkləyən JavaScript çərçivələrində tək taymer var:
SetInterval(function() ( /* bütün animasiyaları çəkmək */ ), 20);
Belə bir çərçivənin işə saldığı bütün animasiyalar qlobal ümumi siyahıya əlavə edilir və hər 20 ms-dən bir tək taymer onu yoxlayır, cariləri işə salır və tamamlanmışları silir.
Müasir brauzerlər, IE9-dan başqa, Animasiya vaxtı standartını dəstəkləyir, bu da bu istiqamətdə növbəti addımdır. Bu, bütün animasiyaları daxili səhifə yeniləmə mexanizmləri ilə sinxronlaşdırmağa imkan verir. Yəni təkcə bizim animasiyalar deyil, həm də CSS animasiyaları və digər brauzerlərin yenidən çəkilişləri qruplaşdırılacaq.
Bu halda, qrafik sürətləndirici mümkün qədər səmərəli istifadə ediləcək və səhifənin eyni bölmələrinin təkrar işlənməsi aradan qaldırılacaqdır. Bu o deməkdir ki, CPU yükü daha az olacaq və animasiya özü daha hamar olacaq.
Bunun üçün requestAnimationFrame funksiyasından istifadə olunur.
Funksiya sintaksisi:
Var requestId = requestAnimationFrame(geri zəng)
Belə bir zəng, brauzer animasiyanı yerinə yetirməyi mümkün hesab etdikdə, geri çağırış funksiyasının yaxın gələcəkdə işləməsini planlaşdırır.
Geri çağırışda bir növ rəsm planlaşdırırsınızsa, o, digər requestAnimationFrames və brauzerin daxili yenidən çəkilişləri ilə qruplaşdırılacaq.
Başlamağı ləğv etmək üçün requestId-də qaytarılan dəyər lazımdır:
// yuxarıda planlaşdırılan icranı ləğv etmək, geri çağırış cancelAnimationFrame(requestId);
Geri çağırış funksiyası bir arqument alır - səhifənin yüklənməsinə başlayan vaxtdan, performance.now() çağırışının nəticəsi.
Bir qayda olaraq, geri zəng çox tezliklə işə salınır. Prosessorda ağır yük varsa və ya laptopun batareyası demək olar ki, boşdursa, daha az tez-tez.
Bu kodu işlətsəniz, requestAnimationFrame proqramının ilk 20 buraxılışı arasında boşluqlar görəcəksiniz. Bir qayda olaraq, bu 10-20 ms-dir, lakin daha çox və ya daha az ola bilər. Bu, brauzer baxımından optimal animasiya tezliyidir.
var əvvəlki = performance.now(); var dəfə = 0; requestAnimationFrame(funksiya ölçüsü(vaxt) ( document.body.insertAdjacentHTML("beforeEnd", Math.floor(zaman - əvvəlki) + " "); əvvəlki = vaxt; əgər (dəfə++)< 10) requestAnimationFrame(measure); })
RequestAnimationFrame əsasında animasiya funksiyası:
// Draw funksiyası çəkir // Animasiya müddəti funksiyasının müddəti animate(draw, duration) ( var start = performance.now(); requestAnimationFrame(function animate(time) ( // başlanğıcdan nə qədər vaxt keçdiyini müəyyənləşdirin animasiya var timePassed = time - start; // bir az vaxt artıqlığı ola bilər, bu halda, əgər (timePassed > müddəti) timePassed = müddəti // animasiya vəziyyətini timePassed draw(timePassed ); // əgər animasiya vaxtı bitməyibsə, başqa bir kadr təyin edin, əgər ( timePassed< duration) { requestAnimationFrame(animate); } }); }
Animasiya strukturuRequestAnimationFrame əsasında siz daha güclü, lakin eyni zamanda sadə animasiya funksiyası yarada bilərsiniz.
Animasiya üç əsas parametrə malikdir:
Müddət Animasiyanın davam etdiyi ümumi vaxt, ms ilə. Məsələn, 1000. timing(timeFraction) -a bənzər, cari vaxta əsasən animasiya vəziyyətini hesablayacaq zamanlama funksiyası.
O, giriş kimi davamlı artan sayda timeFraction alır - 0-dan 1-ə qədər, burada 0 animasiyanın başlanğıcını, 1 isə onun sonunu bildirir.
Onun nəticəsi Bezier əyrilərində CSS keçidlərində y koordinatına uyğun gələn animasiya tamamlama dəyəri olmalıdır.
Həmçinin, keçid vaxtı funksiyasına bənzətməklə, aşağıdakı şərtlər yerinə yetirilməlidir:
- vaxt (0) = 0
- timing(1) = 1...Yəni animasiya (0,0) nöqtəsində başlayır - sıfır vaxt və sıfır irəliləyiş və (1, 1) nöqtəsində bitir - tam vaxt keçdi və proses tamamlandı. düz funksiya vahid inkişaf prosesi deməkdir: funksiya xətti(timeFraction) ( qaytarılma vaxtıFraksiya; )
- Onun cədvəli:
- Gördüyünüz kimi, onun qrafiki keçid vaxtı funksiyası ilə tamamilə üst-üstə düşür: xətti və təsiri tamamilə eynidir, başqa, daha maraqlı variantlar var, onları daha ətraflı nəzərdən keçirəcəyik.
Animasiyanı həqiqətən həyata keçirən bu funksiyadır.
Məsələn, bir elementi köçürə bilər:
Function draw(progress) ( train.style.left = progress + "px"; ) Prinsipcə, istənilən seçim mümkündür, siz hər şeyi və istədiyiniz şəkildə canlandıra bilərsiniz.
Müvəqqəti funksiyalarYuxarıda biz ən sadə, xətti zaman funksiyasını gördük.
Müxtəlif zamanlamadan istifadə edərək hərəkət animasiya nümunələrinə baxaq.
Güc nBudur başqa bir sadə hal - n-in gücünə irəliləyiş. Xüsusi hallar – kvadrat, kub funksiyalar və s.
Kvadrat funksiya üçün:
Dördlü funksiya (tərəqqi) ( Math.pow (tərəqqi, 2) qaytarın)
Kvadrat funksiyanın qrafiki:
Dərəcənin artması sürətlənməyə təsir göstərir. Məsələn, 5-ci dərəcə üçün qrafik: 
Funksiya:
circ(timeFraction) funksiyası (qaytarmaq 1 - Math.sin(Math.acos(timeFraction)) )
Cədvəl: 
Bu funksiya bir yay prinsipi ilə işləyir: əvvəlcə "simli çəkirik", sonra "atırıq".
Əvvəlki funksiyalardan fərqli olaraq, bu, “elastiklik əmsalı” olan əlavə x parametrindən asılıdır. O, yayının “geri çəkildiyi” məsafəni müəyyənləşdirir.
Funksiya geri(x, timeFraction) ( qaytarın Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x) )
x = 1.5 üçün qrafik: 
Təsəvvür edin ki, siz topu buraxırsınız, o, yerə düşür, bir neçə dəfə sıçrayır və dayanır.
Sıçrama funksiyası eyni şeyi edir, yalnız tərsinə: "sıçrayış" dərhal başlayır.
Bu funksiya əvvəlkilərdən bir az daha mürəkkəbdir və əmsallardan istifadə edir:
Funksiya sıçrayışı(timeFraction) ( üçün (var a = 0, b = 1, nəticə; 1; a += b, b /= 2) ( əgər (timeFraction >= (7 - 4 * a) / 11) ( qaytarmaq - Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2) ) )
Elastik animasiyaBu funksiya ilkin diapazonu təyin edən əlavə x parametrindən asılıdır.
Funksiya elastik(x, timeFraction) ( qaytarın Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction) )
x=1.5 üçün qrafik: 
Beləliklə, bizdə vaxt funksiyaları toplusu var.
Onların istifadəsi "easeIn" adlanır.
Bəzən animasiyanı əks rejimdə göstərmək lazımdır. Bu effekti yaradan funksiya transformasiyası "easeOut" adlanır.
easeOut“EaseOut” rejimində vaxt dəyəri düsturla hesablanır: timingEaseOut(timeFraction) = 1 — timing(1 — timeFraction)
Məsələn, “easeOut” rejimində sıçrayış funksiyası:
// normal versiya funksiyası bounce(timeFraction) ( üçün (var a = 0, b = 1, nəticə; 1; a += b, b /= 2) ( əgər (timeFraction >= (7 - 4 * a)) / 11 ) ( return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2); ) ) ) // easeOut funksiyasına çevirici makeEaseOut(timing) ( qaytarma funksiyası (timeFraction) ( return 1 - timing(1 - timeFraction); ) ) var bounceEaseOut = makeEaseOut(bounce);
Tam bir nümunə - bounceEaseOut-da sıçrayış indi başlanğıcda deyil, sonundadır (və bu daha gözəldir):
Bu qrafik easeOut çevrilməsinin funksiyanın davranışını dəyişdirdiyini göstərir: 
Əgər sıçrayış kimi animasiya effekti varsa, o, başlanğıcda deyil, sonunda (və ya əksinə, başlanğıcda, sonunda deyil) göstəriləcək.
Qırmızı normal seçimi, mavi isə easeOut-u göstərir.
- Adətən cizgi obyekti əvvəlcə yavaş-yavaş aşağı tullanır, sonra isə birdən zirvəyə çatır...
- Və easeOut-dan sonra - əvvəlcə ayağa qalxır, sonra yavaş-yavaş aşağı tullanır.
Siz həm də animasiyanın əvvəlində və sonunda effekti göstərmək üçün bunu edə bilərsiniz. Müvafiq transformasiya "easeInOut" adlanır.
Onun kodu belə görünür:
Əgər (timeFraction 1) timeFraction = 1; // cari animasiya vəziyyəti var progress = options.timing(timeFraction) options.draw(progress); əgər (zaman fraksiya< 1) { requestAnimationFrame(animate); } }); }
Əsas parametrlər:
- müddət – ms ilə animasiya müddəti.
- zamanlama hər bir kadrın animasiya vəziyyətini təyin edən funksiyadır. 0-dan 1-ə qədər zaman kəsirini alır, 0-dan 1-ə qədər animasiyanın tamamlanmasını qaytarır.
- draw animasiya vəziyyətini 0-dan 1-ə çəkən funksiyadır.
Bu funksiya, məsələn, animasiyanın sonunda çağırılacaq tam geri çağırış əlavə etməklə təkmilləşdirilə bilər.
Zamanlama və transformasiya easeOut, easeInOut üçün bir sıra nümunələrə baxdıq ki, bu da onları şaxələndirməyə imkan verir. Bezier əyriləri ilə məhdudlaşmadığımızdan fərqli olaraq, istədiyiniz hər şeyi həyata keçirə bilərsiniz.
Eyni şey çəkmə funksiyasına da aiddir.
Animasiyanın bu tətbiqi üç əsas tətbiq sahəsinə malikdir:
- CSS çərçivəsinə uyğun gəlməyən qeyri-standart tapşırıqlar və tələblər.
- IE9 dəstəyi.
- Qrafika, kətan üzərində rəsm.
JavaScript istifadə edərək HTML animasiyaları yaratmağı öyrənin.
Əsas veb səhifəJavaScript ilə HTML animasiyalarının necə yaradılacağını nümayiş etdirmək üçün sadə veb-səhifədən istifadə edəcəyik:
Konteyner animasiyasının yaradılmasıBütün animasiyalar konteyner elementinə nisbətən olmalıdır.
Stil ElementləriKonteyner elementi style="position:relative" ilə yaradılmalıdır.
Animasiya elementi style="position:absolute" ilə yaradılmalıdır.
misal#konteyner (
eni: 400px;
hündürlük: 400px;
mövqe: nisbi;
fon: sarı;
}
#canlandır (
eni: 50px;
hündürlük: 50px;
mövqe: mütləq;
fon:qırmızı;
}
JavaScript animasiyaları elementin üslubunda tədricən dəyişikliklərin proqramlaşdırılması ilə həyata keçirilir.
Dəyişikliklər taymerdən istifadə etməklə həyata keçirilir. Taymer intervalı kiçik olduqda, animasiya davamlı görünür.
Əsas kod:
misalfunksiya çərçivəsi () (
əgər (/* bitmiş üçün test */) (
clearInterval(id);
) başqa (
/* element üslubunu dəyişdirmək üçün kod */
}
}
myMove() funksiyası (
var elem = document.getElementById("canlandır");
var pos = 0;
var id = setInterval(çərçivə, 5);
funksiya çərçivəsi () (
əgər (pos == 350) (
clearInterval(id);
) başqa (
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
