Animáld dom segítségével
Nem fogom szétszedni az összes rész könyvtár és ásni a kódot. Ehelyett azt fogja vizsgálni az összes könyvtár szemszögéből aki dolgozik, elsősorban a CSS, de tudni akarta, mit tud nyújtani szempontjából JS DOM animáció. Ezért fogok keresni eszközök manipulálják a DOM tökéletesen, dinamikusan hozzáadása és eltávolítása, CSS stílusok és / vagy osztályok létrehozására animáció szintaxist, ami ismerős CSS fejlesztő.
Animáció az interneten
Ahogy Sarah Drasner webes animációs kell különböztetni animáció interface / felhasználói élmény és a független animáció.
Kutatások bizonyítják, hogy az emberek sokkal nyitottabbak a világra alapján mozgó képeket. Vagyis, mi is jobban megértsék és elsajátítsák az információt, amikor azt bemutatják formájában valami mozog, nem a forma az egyszerű képeket és egy sor statikus képek.
A jelenlegi trendek és megközelítések webfejlesztés
Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési
Ezzel szemben egy független animáció ... „használják, hogy bemutassa a koncepció szervezetben az oldal, vele együtt vagy külön-külön.” Sarah Drasner - a slide a konferencia a CSS
Sarah szemlélteti a ponton CodePen demo.
A különbség nagyon fontos. Az animáció során felületen próbál segíteni a felhasználók számára, hogy bizonyos műveleteket, amelyek összhangban vannak a céljait az oldalon. És ha létre független animációk próbál megnyitni egy bizonyos fogalom a lehető legteljesebb mértékben.
Azonban mindkét animációs kell hozni az embereket öröm. Ezért, amikor animációkat minden attól függ, a teljesítmény és a rendelkezésre állás. Ezek a tényezők az eredménye animáció, ami örömet, bosszantani vagy akár fáj.
Ma, CSS-hez sima átmenetek, és animációk. Azonban JS is elfoglalja az első helyet a létrehozása egy animáció. De miért? Most már nem az animáció tiszta CSS, miért akar bárki valaha is használni ezt JS?
Annak érdekében, hogy választhat a CSS és JS Rachel Nabors már összeállított egy listát a különbségeket. Animáció lehet:
Statikus: az animáció az elejétől a végéig nélkül történik elágazás logika. Példaként rakodógépek CSS. Ez az animáció felírható tiszta CSS;
A perzisztencia: egy jó példa - az oldalsáv, amely nyitni és zárni a gombra kattintva. Ez a fajta animációs lehet írni a CSS JS tarkított kis hozzáadására és eltávolítására osztályok, megfelelő állapotban az animáció;
Dinamikus: ez az animáció befejeződhet másképp. Attól függ, hogy a felhasználó akciók, rendezvények a DOM, animáció államok más elem a dokumentumban, stb Ez a fajta animáció nem hozható létre a segítségével CSS, itt a legjobb barátja - JS.
Amellett, hogy a dinamikus animáció JS lehet használni, ha az egyik a következő esetekben:
meg kell összefűzni, vagy osztott az animáció több terméket. Ebben az esetben minden egyes animációs kell kezdeni, miután az előzőt. Ezt meg lehet tenni a tiszta CSS, felíró mindenhol késleltetheti tulajdon. De ha ki kell cserélni csak egy értéket, akkor rendkívül kellemetlen, hogy átírják az összes többit;
animálni kívánt SVG grafika. Itt a fő hátránya, hogy a CSS animációt SVG egyenlőtlenül támogatott böngészők;
ha a projekt támogatása régebbi böngészők nem működnek a CSS animáció, JS megbízható megoldást nyújt jó támogatást.
A hosszú távú csere: Web animációk API
W3C dolgozik egy specifikáció, amely összehozza a CSS, SVG és JS animációk egyetlen egységes nyelv nélkül további JS könyvtárak. API hívják Web animációk és nagy létrehozására dinamikus animációk, ahol CSS nem tehet semmit, hogy megállítsa. Elolvashatja hasznos bevezető cikket a Web API animációk Dudley Storey közvetlenül SitePoint honlapján.
A munka a webes animációk API tisztességesen egyenletes ütemben, és a böngészők, amelyek nem támogatják az API, ott Polyphemus.
Minden hangzik, és azt aktívan ösztönözni mindenkit, hogy kísérletezzenek WAAPI. Ugyanakkor ebben az írásban, böngésző támogatja vegyes társaság, és a specifikáció még lehet módosítani. Tehát, ha WAAPI most nem alkalmas a projekt, akkor kapcsoljuk be a JS könyvtárat.
Könyvtár dinamikus animáció DOM
A hálózat tele van JS könyvtárak animáció. Abban az időben az írás, a legnépszerűbb a GreenSock vagy GSAP (GreenSock animáció Platform) és Velocity.js.
Főbb jellemzői Anime
A név abból a japán anime animáció, számítógépes és kézi Anime.js ... «rugalmas, ugyanakkor könnyű JS könyvtárat animáció. Együttműködik CSS, Egyedi transzformációk, SVG, DOM attribútumok és JS tárgyakat. "
Anime.js a következő böngészőket támogatja: Chrome, Safari, Opera, Firefox, az Internet Explorer 10
Sok könyvtár, miért Anime?
«GSAP sokkal többre képes, mint az Anime. De ez a könyvtár sokkal nehezebb. A célom az volt -, hogy tartsa az API könnyű összpontosítani, amit igazán szükség (több időzítést, funkciók animáció lejátszási vezérlők ...), miközben a lehető legkisebb súly (9KB-og a minifitsirovannom formában). "
hacker News
Röviden, Anime tökéletes, ha szükség van, hogy dinamikus animációk HTML és az SVG elemek, amelyek nem igényelnek minden jellemzője GSAP vagy egyéb nagy könyvtárak.
Hogyan kell használni Anime.js
Alább írtam egy pár sornyi kódot, hogy bemutassa, hogyan kell csatlakoztatni Anime.js. A legtöbb animációs késik demonstrációs célokra.
Csatlakozó Anime.js nem különbözik JQuery vagy bármely más JS könyvtárat.
Töltse le a .zip fájlt a projekt oldalára GitHub. kivonat fájlokat és sorolja fel a anime.min.js a script tag belsejében html:
Vagy meg tudod csinálni a NPM vagy Bower:
Egy animáció egyik eleme: a pattogó labda
Telepítése után Anime.js projekt lehet kezdeni a legegyszerűbb animáció: csak az egyik eleme, labda, fel-le ugrált. Az első lépés - hívja anime, átadva egy objektumot egy sor animációs beállításokat. Normál szerkezete:
Most a cél, kitöltve a szükséges utasításokat, hogy meghatározza, hogy az animációs, animációs, időtartamát stb
A célok ingatlan reagál anime a tétel animálni kívánt. Megadhat egy CSS választó, mint én fent vagy az egyik az alábbi lehetőségek közül:
DOM-elem, például document.querySelector ( 'el.');
Nodelist, például document.querySelectorAll ( 'el.');
A jelenlegi trendek és megközelítések webfejlesztés
Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési
JS tömb, például [ '.ball'].
Ha a célok ingatlan regisztrálni kell egynél több jelentése, vagyis fogsz animációt több elemet, akkor egy tömböt:
A második tulajdonság a fenti példában az elem függőlegesen mozog a translateY, az ingatlan ismerős lesz azoknak, akik dolgoztak CSS. Tiffany Brown és más fejlesztők azt tanácsolják, hogy a fordítás és méretezése mozogni és változtatni a méretét, hanem tulajdonságok, amelyek felelősek az elem szélessége vagy magassága. Ez az eljárás növeli a termelékenységet és a minőséget az animáció, mert az oldalt a böngésző nem építették újra.
Az alábbi tulajdonság a fenti példában - időtartamát. Ez felelős az animáció anime. Ha különböző időintervallumokban részt több animációt, akkor is jól jöhet késleltetési tulajdonságot.
loop ingatlan az Anime felelős az ismétlések számát animáció. Alapesetben az értéke hamis, azaz az animáció fut egyszerre. Az animációk lehet végtelenítve segítségével értékeit igaz, akkor is a pontos ismétlések számát, meghatározva a kívánt számot.
irányba ingatlan képviselt CSS, valamint az Anime, be lehet állítani, hogy ugyanazt az értéket, amely a különálló CSS: normál, fordított és kitérő. Az utolsó érték átvált a rendes animáció az ellenkező, tökéletes pattogó labdát.
És végül, az utolsó tulajdonság a kódot - lazítás. animáció sebessége állandó legyen? Talán az animációs kell kezdeni és lassan gyorsul véget? Muszáj hozzá a végén a fellendülés? Megfelelő működését animáció - az egyik fő összetevő csiszolt és látványos animáció.
Minden funkció az animáció megtekinthető az alábbi kódot:
Add a második animációs a pattogó labda
Tegyük fel, hogy szeretné, hogy a labda kissé összenyomódik, amikor üti az alsó széle a tartály. Az Anime hozzáadásával történik különleges animációs paraméterek formájában JS objektumot. A példa a labdát, ez hogyan csináld:
A fenti, új ingatlan scaleX, ami a labda széles. Az érték maga formájában adják egy tárgy szó bizonyos kulcs, amellyel beállítható az animációt.
A legfontosabb érték lehetővé teszi, hogy módosítsa a szélesség az elem a vízszintes tengelyen, és a késedelem időtartamát, és ezek felelősek az animáció és a kiindulási pont befejezése után egy korábbi animáció.
Ha vizsgáljuk meg a elemet a kedvenc Fejlesztői irányítópult, akkor láthatjuk, hogy Anime élő elem, hozzátéve inlaynovy style attribútum és dinamikusan frissíti a az ingatlan értéke átalakítani.
Animáció szekvenciája két elem: rúgja labdát
Az alábbi kód - csak egy példa arra, hogyan lehet életre kelteni a két elem. A mi esetünkben ez a két kép között. A második animáció indul az első után.
A labda elkezd mozogni csak az ütközés után. A Anime.js megadhat további animáció segítségével a teljes () módszer, amelyben a jelen esetben, a második objektum tárolja utasításokkal animált el.
Persze, CSS létrehozhat egy statikus változatát az animációt. Ez szüksége van némi keyframe'ov és bizarr harmadfokú Bezier funkciót. Ebben az esetben a JS egyáltalán nem szükséges, és az animáció sima és alapból fut majd. Demo tiszta CSS:
Kapcsolja, szüneteltetése és újraindítása animáció
Anime.js amivel kezdeni, leállítani és újraindítani az animáció segítségével a .play () metódust. pause () és .restart (). Például így lehet ellenőrizni az animáció a labdát ütő.
A kód, meg kell, hogy egy pár hozzászólás:
ellenőrzésére és a kapufáról a gombokkal hoztam létre két különböző tárgyat. Lehetséges lenne, hogy a labdát a sztrájk animáció animáció, de a tapasztalat azt mutatja, hogy ha a gombok csak a fő animáció, vagyis sztrók;
Az animáció nem indul el automatikusan, miután egy teljes oldal betöltése, be kell állítani az automatikus lejátszás false;
és végül, az animáció elindításához, egyszerűen hívja .play () metódus a tárgyak és Kickball movingBall.
Kezdve az animáció és a szünet, akkor gyorsan újra a CSS tulajdonságait animáció-play-state és egy csipet JS. Azonban ez a módszer nem fog működni, hogy újra az animáció újraindítását annak befejezését követően, vagy hátrafelé futáshoz animáció bárhonnan.
Animáld inlaynovye SVG attribútumok használatával Anime.js
Az utolsó bemutató megmutatja, hogyan kell animálni attribútumok inlaynovoy SVG grafika. Ekkor egy példa lenne egy aranyos kiscica játszik egy labda.
A demo CSS osztályokat különböző módon és formában, amelyből az SVG rajzolt cica. Így sokkal könnyebb keresni elemeket a kódot.
Ez hogyan lehet animálni a macska szeme:
A fenti kód le a macska szeme, a változó értéke az attribútum cy tartomány - macska tanuló.
Ha észreveszi, hogy a szemek mozognak következetesen. Szándékosan tette, hogy mutassa meg egy másik módja annak, hogy hozzon létre egy animációsor Anime.js. késleltetési tulajdonságot lehet egy szám, hanem a funkciót. Ha egy függvény a fenti kódot, akkor programozott ellenőrzés megkezdése az animációt. A függvény ellenőrzi, hogy az elemet kell animált, az első (a nulla pozícióban célokat a tömb), azaz a bal szem, az animáció lesz késés 300 ms. Ha az elem nem az első, akkor a késleltetést az eredménye megszorozzuk az index (azaz 1), hogy 500ms.
következtetés
Elkezdtem ezt a cikket egy rövid áttekintést, hogyan kell használni animáció az interneten. Következő megbeszéljük mikor kell használni JS, CSS animációt és mikor. Fluent átsétált a webes animációk API.
Azt is be te Anime.js, az első könyvtár ebben a sorozatban. Megmutattam neked a lehetőséget, és létrehozott egy demo.
Nagyon élvezem dolgozik Anime.js: azt a képességét, hogy fedezze egy csomó módon a kérelmet, a szintaxis nagyon egyszerű, valamint a könyvtár, akkor létre sima, szép hatásokat.
Azok számára, akik korábban nem tud a könyvtár, azt mondanám, hogy az egyetlen dokumentumok - ez README.md fájl GitHub.
§ kérdések GitHubról találsz néhány választ magának. Ezt a témát aktívan figyeli az alkotója Anime, Julian Garnier.
Felülvizsgálat: Team webformyself.
A jelenlegi trendek és megközelítések webfejlesztés
Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési
A legtöbb IT hírek és webfejlesztés A csatorna-távirat