A megsemmisítést a mítoszok vs css animáció
Miután a legtöbb fejlesztő használja jQuery animálni elemek a böngésző. Deszaturációhoz azt, nyúlik - egyszerű dolgokat. De amikor az interaktív projektek egyre agresszívabb, és a mobil eszközök robbant be a jelenetet, a teljesítmény kezdett játszani a legfontosabb szerepet.
Flash-fokozatosan zátonyra futott, és tehetséges animátorok HTML5 kénytelen csinálni a dolgokat, hogy ő még soha. Szükségük jobb eszközök komplex hatása és az első osztályú teljesítményt.
jQuery egyszerűen nem erre tervezték. Böngészők érleltek és elkezdték kínálni megoldásokat.
A legszélesebb körben ismert megoldás lett CSS-animációk. CSS animációt a kedvence az IT-iparban, több éve, végtelenül konferenciákon megvitatták, ahol olyan kifejezéseket, mint „hardveres gyorsítást” és „felhasználóbarát mobil eszközök” mézédes közönséget.
Mivel azok, akik lenyűgözte (a pont megszállottság, sőt), az animáció és a teljesítmény, nézek rohant karjaiba CSS. És mielőtt tudtam menni amennyire azt találtuk, számos komoly probléma, hogy senki sem mondta. Megdöbbentem.
A hiányzó független felügyeletet skála / forgatás / pozíció
animáció skála, forgatás és helyzetét az elem rendkívül gyakori. A CSS-ben az összes ezeket a paramétereket összebújva a transzformációs tulajdonság, ami lehetetlenné teszi, hogy hozzon létre egy külön animációs minden paramétere egy elemet.
Például, ha azt szeretnénk, hogy egy animációs forgatás és méretarányos egymástól függetlenül, különböző számítási végrehajtási időt és csökkentési feladatokat?
Véleményem szerint ez egyértelműen a gyenge oldalán CSS, de ha egy egyszerű animációt, amely magában foglalja majd a teljes átalakítási bármikor, akkor az idő nem lesz probléma az Ön számára.
termelékenység
A leggyakrabban idézett oka a CSS animáció - a „hardveres gyorsítást.” Hangok étvágygerjesztő, igaz?
Nézzük bontani két részből áll:
Magával ragadó grafikus processzor
A grafikus processzor (GPU) erősen optimalizált feladatokat, mint a mozgó pixel, átlátszóság és az transzformációs mátrix, így a modern böngészők megpróbálják műszak ezeket a feladatokat egy központi processzor (CPU) a GPU.
A titok az, hogy válassza animációs elemeket saját rétegek GPU, mert ha a réteg jön létre (azzal a feltétellel, hogy ez nem változtatja meg az eredeti képpont) GPU nem nehéz mozgatni a pixel és összekapcsolják őket.
Kiszámítása helyett minden egyes pixel másodpercenként 60-szor, a GPU tárolhatja pixel csoportok (a két réteget), és egyszerűen azt mondják: „műszakban ez a csoport a 10 pixel és lefelé 5 képpont” (vagy valami hasonló).
Szintén fontos megjegyezni, hogy nem minden CSS tulajdonságok GPU gyorsítás a CSS-animációk. Sőt, a legtöbb a gyorsulás csak nem értem. Conversion (skála, forgatni, nyírás és ponyva) és az átláthatóság alapvető műveleteket javát GPU gyorsítás.
Az újraelosztás számításai másik szál
Egy másik része a „hardveres gyorsítás” jár, hogy képesek a különböző CPU szálak tartozó számításokat animáció. Ismét, ez jól hangzik elméletben, de nem megy anélkül, hogy a költségek, és a fejlesztők gyakran túlbecsülik származó előnyök.
Először is, csak azokat a tulajdonságokat, amelyek nem befolyásolják az áramlás a dokumentum valóban átvihető egy másik téma.
Ezért újra, átalakítás, és az átláthatóság - a fő kedvezményezettjei előnyöket. Amikor az ág patakok jelennek rezsiköltségek kezelésével összefüggő ezt a folyamatot.
Mivel a grafikus renderelés dokumentum elrendezését és fogyasztani a legtöbb számítási erőforrások (sokkal nagyobb) a legtöbb animációk (ide nem értve a közbenső értékek animációs tulajdonságokat), az előnye a különálló áramlási interpolációs minimális.
Például, ha 98% -a munka egy adott animáció grafikus renderelő és dokumentum elrendezése, és 2% - a megállapítás új értékeket a pozíció / elforgatás / átláthatóság / valami mást is, kiszámításához 10-szer gyorsabb, általában látni fogja, csak a mindent 1 % -os sebesség növekedést.
teljesítmény összehasonlítása
Stressz teszt alatti, létrehoz egy bizonyos számú képelemek (pixel), és beállítja őket a mozgásban, a közepétől egy véletlen helyen, közel a határok segítségével tetszőleges késések, ezáltal a hatása repülés a csillagok.
Állítsa be a nagy számú pontot, és nézd jQuery összehasonlítást. GSAP és Zepto.
Mivel Zepto CSS átalakulás minden animációk, a teljesítmény legyen a legjobb, igaz?
Az eredmények megerősítik, amit széles körben ünnepelték az interneten - CSS animáció sokkal gyorsabb, mint a jQuery.
felső, bal, szélesség, magasság
A Windows Surface RT, iPhone 5S (iOS7), iPad 3 (iOS 6), iPad 3 (iOS7), Samsung Galaxy Tab 2, Chrome, Firefox, Safari, Opera, Kindle Fire HD, IE11
A Windows Surface RT, iPhone 5S (iOS7), iPad 3 (iOS7), Samsung Galaxy Tab 2, Firefox, Opera, IE11
IPAD 3 (iOS6), Safari, Chrome
Mennyivel gyorsabb? Kezdeti tesztverzió volt gróf a képkockák száma másodpercenként, így kvantitatív eredményeket, de hamar kiderült, hogy nincs igazán pontos módon mérni ez a mutató minden böngészőben, különösen CSS-animációk, és néhány böngésző kaptak megtévesztő adatot, így eltávolítottam ezt a funkciót.
Bár könnyen értékeli a relatív teljesítmény növelésével a pontok száma közötti váltás a motorokat, és megfigyeljük, hogy a végrehajtása animációk (mozgás egyenletességét, egyenletes időközönként, a pontok elosztására, stb.) A végén, a fő cél az, hogy egy szalonképes animáció.
Bár reméljük, hogy ez változni fog. Bármi is volt, a legtöbb valós projektek, akkor nem veszik észre a különbséget a teljesítményt.
Arra kérem, hogy végezzen saját vizsgálatok, hogy melyik technológia biztosítja simább animáció egy adott projekt (ek).
Ne vásároljon a mítosz, hogy a CSS animáció mindig gyorsabb, és nem feltételezik, hogy a vizsgálati sebesség felett, azt tükrözi, amit látni fogja az alkalmazás. Teszt, teszt, és ismét teszteltük.
Controls végrehajtása és rendezvények
Néhány böngésző lehetővé teszi, hogy állítsa le vagy indítsa újra a CSS animáció kulcsképkockák, de ugyanakkor - mindent.
Nem lehet hivatkozni egy adott helyen az animáció, valamint a nem egyenletesen változik a menetirány területén animáció, vagy módosítsa az időskálán vagy add visszahívások bizonyos helyeken, vagy csatolni egy gazdag meg a lejátszás eseményeket.
Modern animáció nagyon szoros kapcsolatban áll az interaktivitás, így hihetetlenül hasznos, hogy képes legyen elvégezni az animáció a változó kezdeti értéke a változó végén (például attól függően, hogy a felhasználó rákattint az egérrel), vagy megváltoztatni valamit a „röptében”, de deklaratív animációs CSS alapú ezt nem teszik lehetővé.
munkafolyamat
Egyszerű átmenet két állapot között (pl puccsok és a nyilvánosságra hozatalt a menü, stb) kiváló CSS átalakulás.
Azonban az események sorrendjét akkor általában kell használni CSS animációt kulcskockákat, ami szükségszerűen kell határozni a szelektor kamat formájában, mint például:
De amikor létrehoz animációk, nem célzás segítségével rések helyett érdeke? Például: „az átláthatóság növelése 1 másodpercig, majd mozgassa jobbra belül 0,75 másodpercig, majd tegye egy ugrás le a megmaradt második”.
Mi történik, ha egy pár órát kiszámításához komplex sorrendben százalékos, majd az ügyfél azt mondja: „Tedd ezt a közepén a 3 másodperccel tovább?” Hú, meg kell számolni minden érdeklődést!
Jellemzően animációk szerkezet tartalmaz nagyszámú kísérletek, főleg az idő múlásával, és enyhíteni funkciókat.
Ez igaz, ha a kereső () metódus azt találták, hogy nagyon hasznos. Képzeld létre egy 60 másodperces animációs apránként, majd hónolás utolsó 5 másodpercben: meg kellett volna, hogy üljön ki az első 55 másodpercben minden alkalommal szeretnénk látni az eredményeket a módosításokat az utolsó részt.
Huh! A módszer keresik () akkor lehetett volna a folyamat egyszerűen utal egy meghatározott helyre animációs bejutni a részben a munka, majd távolítsa el azt, amikor befejezte. Ez jelentős időmegtakarítást eredményez.
Fogadja elterjedt létrehozása animációk tárgyak alapján a vásznon, és egyéb tárgyak a harmadik féltől származó könyvtárak, de sajnos, CSS animációk felhasználása csak DOM elemeket.
Ez azt jelenti, hogy ha egy csomó időt és energiát a CSS-animációk, ezek nem vihetők át más típusú projektek.
El kell változtatni egy sor eszközt animáció.
Számos hasznos eszközt kapcsolódó munkafolyamatok, amelyek hiányoznak a CSS-animációk:
korlátozott hatása
Ön nem tehet semmit az alábbi listából a CSS-animációk:
- Animáció görbe vonal mentén (például, Bezier görbe);
- Az érdeklődési enyhítő funkciók, mint például elasztikus, rugalmas vagy bruttó enyhítésére. Van harmadfokú Bézier görbe () opciót. de ez csak akkor teszi lehetővé két fő pont, ami jelentősen korlátozza a lehetőségeket;
- Mozgalom a fizika törvényei. Például egy egyenletes mozgást alapuló tehetetlenség és könnyen visszatér végre ebben Húzható demo;
- Animáció scroll helyzetben;
- Irányított forgatóképesség (például „forduljon pontosan 270 fokkal a legrövidebb irányba, az óramutató járásával megegyező, vagy az óramutató járásával ellentétes irányban”);
- Animáció attribútumok.
kompatibilitás
A CSS alapú animációk nem működnek az IE9 és a böngésző korábbi verzióiban. Legtöbbünk utálja az elavult böngészők (különösen az IE) támogatását, de a valóság az, hogy némelyikünknek vannak olyan ügyfelei, amelyek megkövetelik.
Számos böngésző használatához előtagokat kell használni, de az előfeldolgozó eszközök használatával elkerülhető, hogy kézzel kell írni őket.
következtetés
A CSS-animációk rosszak? Határozottan nem. Valójában kiválóan alkalmasak az államok közötti egyszerű átmenetekre (például átfordulásra), amikor a régi böngészőkkel való kompatibilitás nem szükséges.
A 3D átalakítások általában jó teljesítményt nyújtanak (az iOS7 figyelemre méltó kivétel), és a CSS animációk nagyon vonzóak lehetnek a fejlesztők számára, akik inkább az animációk és prezentációk logikáját helyezik a CSS rétegbe.
Megértem, miért olyan vonzó a CSS animációk a jQuery.animate () függvényében. Ki a megfelelő elméjükben nem élte meg a lehetőséget, hogy 10-szeres termelékenységnövekedést érjen el?
Ráadásul a CSS animációk egyes szempontjait is fel akartam deríteni, amelyek frusztrációt okoznak (amelyről senki sem beszél), így most tájékozottabb döntést hozhat animációk készítéséről.
A webes animációk specifikációja megoldja a meglévő problémákat?
A W3C konzorcium egy új "Web Animations" (webanimáció) specifikációval foglalkozik, amelynek célja a CSS animációk és átalakítások sok hiányosságának kezelése, amely jobb végrehajtási és kiegészítő funkciókat biztosít.
Persze, úgy tűnik, hogy ez egy lépés előre sok tekintetben, de még mindig számos hiányosság (melyek valószínűleg nem lehet megoldani, hogy támogatni kell a régebbi verziójú meglévő CSS leírások, így például a független komponensek a menedzsment átalakítása nem valószínű).
Bár ez egy teljesen más történet. Meg kell várnunk a dolgok kiderülését. Természetesen okos fickók dolgoznak ezen a specifikáción.