Css vagy js animáció - gyorsabb, mint a sebesség!
Az elrendezés lelassításának elkerülése érdekében elég csak a DOM-kérelmek és a DOM-frissítések csoportosítása:
Ennek alapján lehetséges az ideális 1000 ms / 60 (fps) = 16,7 ms-os intervallum kiszámítása
És mi következik ebből?
- A setTimeout () és a setInterval () nem foglalkozik azzal, hogy mi történik a böngészőben. Az animációs oldal megtalálható az inaktív böngésző lapon. És miközben továbbra is használja a processzor erőforrásait. Jelenleg csak a Chrome animált intervallumot készít 1fps sebességgel a rejtett lapokon.
- A SetTimeout () és a setInterval () megkövetelik, hogy az oldal nem redukálódjon, amikor a számítógép nem (és ezt rendszeresen teszi). Ez azt jelenti, hogy a böngészőnek szinkronizálnia kell az animációt a teljes képernyőfrissítéssel, és ha frekvenciája nem szinkronizálódik a teljes képernyő frissítésével, akkor nagyobb feldolgozási teljesítményre van szüksége. És ez a CPU-használat, a mobilkészülék akkumulátorának fogyasztása és a twitchy animáció.
- A legnagyobb probléma az, amikor egyszerre több elemet kell animálni. Megpróbálhatja szinkronizálni mindezt, de ez egy újabb rémálom lesz egy változatos animáció esetén, amely egyszerre megy végbe.
Ehelyett a Mozilla fejlesztői javasolják a requestAnimationFrame (RAF) funkció használatát, amely nem igényli a meglévő kód jelentős feldolgozását. Összehasonlíthatja a RAF és a setInterval alapvető végrehajtását:
A RAF a lehető legnagyobb hatást gyakorolja az animáció teljesítményére, amit csak egy hely a kódban változtathat meg. Az RAF az összes animációt csoportosítja egyetlen böngészőalapú festés során. Ez megtakarítja a CPU erőforrásait, és lehetővé teszi, hogy a készülék gyorsabban és hosszabb ideig éljen.
Ha a requestAnimationFrame-t használja, minden animációja sima és gyönyörű lesz, a GPU-val szinkronizálva, és sokkal kevesebb CPU-erőforrást igényel.
CSS átmenetek
A CSS átmenet felülmúlja a jQuery sebességét, köszönhetően az animációs logikának közvetlenül a böngészőmotorba történő továbbításához, amely a következő esetekben hatékony:
- A DOM-interakció és a memóriafelhasználás optimalizálása a böngészőben a jerkelés elkerülése érdekében
- Fejlesztések a RAF algoritmusokban
- A hardveres gyorsítás (a GPU teljesítményével az animáció teljesítményének növelése érdekében)
Biztonságosan elmondhatjuk ezt:
A népszerű animációs könyvtárak teljesítményének összehasonlítása, beleértve a A Transit, amely CSS átmeneteket használ, keresse meg a Velocity dokumentációt.
- A DOM szinkronizálása a veremhez
- A DOM-lekérdezések minimalizálására szolgáló tulajdonságértékek gyorsítótárazása (ez a legnagyobb probléma a DOM animációs teljesítményben)
- Az átváltott mértékegységek gyors tárolása (például px,%, em stb.) Egymással összekapcsolt elemek segítségével
- Lefagy a stílusok frissítése, ha nem kell vizuális frissítésre.
A Velocity.js a legjobb módszereket használja az animáció végső értékeinek gyorsítótárba történő újrahasznosítására, mint a következő animáció következő indítási értékei - ezáltal elkerülve a DOM újrafuttatását:
Ebben a példában a Velocity már tudja, hogy a második hívásnak opacitással kell kezdenie: 1 átlátszatlanságot és 50% -os felső értéket.
Végezetül, hasonlítsunk össze két könyvtárat - Velocity. Js és GSAP
- GSAP - gyors, az animációs platform nagyszerű tulajdonságaival. A Velocity egy egyszerű eszköz az UI animációk és munkafolyamatok teljesítményének drámai javításához
- A GSAP kereskedelmi könyvtár. egy bizonyos összeget költ. A Velocity egy nyílt forráskódú könyvtár az MIT engedélyével.
- A teljesítmény szempontjából a Velocity. A Js és a GSAP valós projektekben megkülönböztethetetlen.
Így, GSAP kell használni, ha a szükség szabályozni a végrehajtási időt (n-p, remapping, Szünet / Folytatás / léptetés), a mozgás (pl, Bezier görbék) vagy összetett csoport. Ezek a funkciók döntő szerepet játszanak a játékok és niche alkalmazások fejlesztésében, de kevésbé gyakoriak a webes alkalmazásokban, amikor weboldalakat fejlesztenek.
Velocity.js
Az a tény, hogy sok időt adtak a GSAP-nak, nem jelenti azt, hogy a Velocity funkciókat nem fogják elmondani. Éppen ellenkezőleg. A 7 kb sűrített kódot, a Velocity nemcsak megismétli az egész funtsionalnost $ .animate () a jQuery, hanem kiegészíti azt a részét az animáció, az átalakítás, forgatás, simaságát, és a görgetés.
A sebesség nagyobb, mint a jQuery, a jQuery UI és a CSS átmenet kombinációja.
A jQuery metódust használja - $ .queue (), és így könnyedén kölcsönhat egymással a $. Anima (), $ .fade () és a $ .delay jQuery függvényekkel. A Velocity szintaxis hasonlít a $. Anima () függvényhez, és nem szükséges módosítani az oldal egyik kódját.
Nézzük a Velocity.js példát
A Velocity-ben három egyszerű kódsorral lehet létrehozni a 3D animációval rendelkező összetett görgető jeleneteket:
A Velocity célja továbbra is a teljesítmény animációjának és kényelmének vezetője.
Alexey egy nagyon tapasztalt programozó és egy jó ember. Mindig mindent megtesz az időben, és néha gyorsabb, mint az ígéretek. A munka minősége 5 az 5-ből. Gyakran alternatívát vagy jobb lehetőséget kínál. Ami nagyon fontos, mindig hívható (majdnem éjjel-nappal). Mindig figyelmet szentel a kis dolgoknak, amelyeket gyakran nem talál a fejlesztők. Felelős. Normál árak. Általában néhány pozitív érzelem a munkafolyamatból és eredményekből. Alexey, köszönöm a minőségi munkát! Azt javaslom.
Maxim Ivanov, az ACIDWEAR.ru ifjúsági ruházat igazgatója