Óra (css-animáció és javascript)
Először is szükségünk van egy kis HTML.
Eredetileg volna használni három elemet (egy-egy minden a nyilak). De aztán újra és elhelyezni az egyes nyíl a tároló elemet. Annak ellenére, hogy több, mint egy egyszerű HTML-kód jön fel a bázis, a CSS-animációk, konténer elemei szükségünk lesz, ha azt akarjuk, hogy animálni és állítsa be a kezét.
Kezdjük egy egyszerű karóra kerek számlappal és egyszerű nyilak (óra, perc, másodperc).
Tudod letölt a SVG-háttér van. Ezen kívül, azt hozzá kell létrehozni pszeudoelem közepén egy tömör fekete kör. Akkor tudjuk rendezni a nyilak az ilyen ál-ahogy kell.
Ennek eredményeként, mi kell valami ilyesmi.
Hozzáadása előtt a lövő, meg kell helyezni a konténerek.
Így teszünk az egyes tartályokat a számlapon. Ezt követően, akkor hozza létre a nyíl.
óramutató
Az ingatlan «pozíció» minden nyíl van beállítva, hogy abszolút. helyezkedik el, ez a „00:00” helyzetbe. Kezdjük az óramutató járásával megegyező.
percmutató
A percmutató hasonló az óra, de ez hosszabb és vékonyabb.
használt
A használt még vékonyabb. Ezen túlmenően, ez alatti, túl a központ határértékeket. Ehhez mi meg átalakítani eredetű tulajdonság értékének 80% -át. Most 20% -át a nyíl a kép középső határértékeket.
Megállt az óra mutatja a pontos időt, naponta kétszer. Adjunk hozzá néhány animációt mi órák több, mint az igazi.
Egyes órák minden második ugrás, forgalomba hozatalához, ugyanabban az kattanó hangot. Egyes órák csendesen dorombolni, és kezüket mozognak simán. Igyekszünk mindkét lehetőséget. Kezdeni, hogy a tű simán.
Mi lehet állítani egy keyframe az ingatlan Kulcsképek. hogy a nyíl elvégzésére forgása 360 fok (a kiindulási helyzetbe, amikor ez az érték 0%).
Ez keyframe említett elem, hogy végre kell hajtania a forgatás animációs 360 fokban, ha a keret került sor, hogy az elem tulajdonság animáció. Mi lesz alkalmazni a nyilak ideiglenes lineáris függvény típusú (lineáris), hogy őket simán.
A óramutató órán megállapítani egy teljes fordulatot meg 12 órával (43200 másodperc). A percmutató tesz egy fordulatot óránként, míg a második - egy perc alatt.
Tedd össze az egészet, és már készített egy Motion Tween!
Ha nagyon éles látás, akkor is látni, hogy mozog a percmutató. A teljes forgalom lenne szükség egy óra, és óramutató egy teljes fordulatot kell 12 órán keresztül.
A használt tesz be 60 másodpercen belül, így könnyebb észrevenni a mozgást.
A hozzáadott „lépések”
A mozgalom a lövő több, mint egy igazi órát, tudjuk, hogy a használt, hogy nem egy teljes elfordulás 60 különböző mozgásokat. Legyen egyszerű. Most egy időfüggvény lépés (lépés). Ebben az esetben, az animáció tulajdonság minden egyes nyilak a következő lesz:
Most a perc, másodperc, egy teljes forradalom 60 lépést. A böngésző automatikusan kiszámítja, hogy mekkora kell minden egyes ilyen 60 lépést.
Beállítása a pontos időt
Ez a függvény az időt (óra, perc, és a második) a megfelelő szögben az egyes nyilak. Aztán elindultunk a ciklusban az egyes nyilak kívánt szögben érték az ingatlan, amelynek értéke style.transform rotateZ.
Ez a megközelítés működik a legtöbb böngészőben, kivéve a Safari böngészőt, és azokat, amelyek megkövetelik a böngésző előtagokat. Hogy támogassa őket, akkor használja a tulajdonság style.webkitTransform.
Így állítsa be az órát az aktuális rendszeridőt.
Pozíciójának beállítása a második és a percmutató
Gondoskodnunk kell arról, hogy a mozgás a percmutató akkor jelentkezik, amikor a második viszont átmegy a jel „00:00”.
Mielőtt rátérnénk a percmutató, meg kell, hogy jelezze, hogy hány másodperc telt el a kezdetektől a percet. Lehet figyelni ezeket a sorokat.
Meg kell vizsgálni, hogy a nyíl „perc”, és ha igen, akkor létrehozott «adatok» attribútumot az aktuális szög a használt.
Beállítása «adatok» attribútum, fel tudjuk használni ezeket az adatokat számítani, amikor meg kell mozgatni a percmutató.
hozzáadása fellendülés
Ezek az átmenetek fogják alkalmazni az átalakítás tulajdonság, és használja az idő függvényében harmadfokú Bézier görbe (harmadfokú Bézier görbe). Ezúttal a funkció egy enyhe fellendülés irányába.
Az óra a stílus iOS 7
Én nagy rajongója a minimalizmus órán használt iOS 7 Apple-től. Azóta, hogy nőtt a hossza a nyilat, de szeretem a rövidebb változat.
Meghatározza a stílus a nyílra, és adjunk hozzá egy hátteret a számok, akkor könnyen újra ezt a képet.
Önmagában ez a kialakítás evolúció a svájci vasúti órát Hans Hilfiker. Kicsit változik a stílus, és új háttérképet, akkor alakítsuk órát ezt a stílust.
Ha jön más lehetőség, csak szólj.
használata Moment.js
Az egyik ötletek merültek, amikor elhatároztam, hogy megírom ezt a bejegyzést az volt a pihenés a kép órán át a szálloda, amikor a három órát mutat különböző időzónák.
A legegyszerűbb módja, hogy állítsa be az órát a különböző időzónák, hogy használja Moment.js időzóna csodálatos könyvtár.
böngésző támogatása
Modern böngésző képes dolgozni ebben az oszlopban CSS-átmenetek és animációk. IE10 +, a legújabb változat a Chrome és a Firefox támogatja őket anélkül, eleji, és a Safari megköveteli az előtag -webkit.
Ui Azt is érdekelhetnek:
Kevesebb, mint hat hónappal a legutóbbi változás W3C munkafolyamatban, mint a vezető a konzorcium kapott javaslatot, hogy ezt az új eljárást végül az ügyben. És írd le lényegtelen HTML specifikáció a múzeumban, így nem zavart a fejlesztők, „mintha” kapcsolódnia.
Tovább CSS modul, mely azt mondták csendesen érett állapotát, amellyel a W3C azt tanácsolja, hogy indítsa el a rutinszerű használata az új termékek. tartalmazzák a tulajdonság lehetővé teszi, hogy korlátozzuk a változás a fa rajz, újrarajzoláskor CSS-dobozokat, és változtatni a méretét az elemen belül. Ezért olyan fontos, ...
TÖBB
Paris (a képen), amely a közelmúltban elfogadott CSS munkacsoport ülésén, megérkezett szórakoztató hírek: Properties grid-row-rés és rács-oszlop-szakadék, valamint a csökkentés rácsos rés ...