Mai intai avem nevoie de un mic HTML.
Inițial, am vrut să folosesc trei elemente (câte unul pentru fiecare săgeată). Dar apoi și-a schimbat mintea și a plasat fiecare săgeată în elementul containerului. Chiar dacă codul HTML mai simplu ar fi potrivit pentru animațiile CSS de bază, avem nevoie de elementele containerului dacă vrem să animăm și să setăm poziția săgeților.
Să începem cu un ceas obișnuit cu un cadran rotund și săgeți simple (oră, minut și secundă).
Puteți descărca fundalul SVG aici. În plus, i-am adăugat un pseudo-element pentru a crea un cerc negru solid în centru. După aceea, putem aranja săgețile din spatele acestui pseudo-element, după cum avem nevoie.
Ca rezultat, ar trebui să avem ceva de genul asta.
Înainte de a adăuga săgețile, trebuie să aranjăm containerele.
Astfel vom aranja fiecare dintre containerele de deasupra cadranului. După aceea, vom crea săgețile.
O oră de mână
Proprietatea "position" a fiecărei săgeți este setată la absolută. și este plasat în poziția "12 ore". Să începem cu mâna oră.
Săgeată de minut
Mâna de minute este ca o santină, dar este mai lungă și mai subțire.
În al doilea rând
A doua mana este chiar mai subtire. În plus, este situat mai jos, lăsând centrul. Pentru aceasta, setăm proprietatea transformare-origine la 80%. Acum 20% din săgeată este în afara centrului.
Ceasul oprit arată ora corectă de două ori pe zi. Să adăugăm o animație pentru a face ca ceasurile noastre să arate mai mult ca cele reale.
Unele ceasuri sare în fiecare secundă, producând un sunet bătătorit. Unele ceasuri se mișcă liniștit, iar săgețile lor se mișcă foarte ușor. Vom încerca amândouă. Pentru început, vom face săgețile să meargă fără probleme.
Putem seta o cheie cheie utilizând proprietatea cadrelor cheie. pentru a forța săgețile să efectueze o întoarcere de 360 de grade (poziția lor inițială este luată ca 0%).
Acest cadru cheie indică elementului că trebuie să efectueze o animație de rotație de 360 de grade dacă cadrul a fost aplicat unui element utilizând proprietatea de animație. Aplicăm o funcție temporară temporară asupra săgeților pentru a le face să se miște fără probleme.
Mâna de ore este setată la rotirea completă timp de 12 ore (43.200 secunde). Mâna de minute are o rundă pe oră, iar cea de-a doua - într-un minut.
Vom pune totul împreună și avem o animație a mișcării!
Dacă aveți o vedere foarte ascuțită, puteți chiar observa cum se mută mâna. Este nevoie de o oră pentru cifra de afaceri completă și durează 12 ore pentru a avea loc rotația completă.
Cea de-a doua mână face o întoarcere în 60 de secunde, astfel încât mișcarea sa este mai ușor de observat.
Adăugarea "pașilor"
Pentru a ne muta pe shooter-ii mai mult ca și ceasurile reale, putem forța mâna a doua să facă o mișcare completă în 60 mișcări separate. Faceți-o simplu. Utilizați pașii funcției temporare. În acest caz, proprietatea de animație pentru fiecare săgeată va arăta astfel:
Acum, atât mâinile minute, cât și cele de-a doua se desfășoară în 60 pași. Browserul calculează în mod automat cât de mare ar fi fiecare dintre acești 60 de pași.
Setarea timpului corect
Această funcție convertește timpul (ore, minute și secunde) în unghiul corespunzător pentru fiecare săgeată. Apoi, în buclă, setăm fiecare săgeată la valoarea dorită a unghiului folosind proprietatea style.transform cu valoarea rotateZ.
Această abordare va funcționa în majoritatea browserelor, cu excepția Safari și a acelor browsere care necesită utilizarea prefixelor bazate pe browser. Pentru a le sprijini, folosim proprietatea style.webkitTransform.
Așa că am setat ceasul la ora curentă a sistemului.
Setarea poziției mâinilor secunde și minuscule
Trebuie să ne asigurăm că mișcarea mâinii minuscule are loc atunci când mâna a doua trece pe marcajul "12 ore".
Înainte de a muta mâna de minute, trebuie să raportați câte secunde au trecut de la începutul minutelor actuale. Ai putea să fii atenți la aceste linii.
Ele sunt necesare pentru a verifica dacă săgeata este "minut" și dacă da, aceasta stabilește atributul "date" cu unghiul curent al mâinii a doua.
Prin setarea atributului "data", putem folosi aceste date pentru a calcula momentul în care se mută mâna de minute.
Adăugarea unei reveniri
Aceste tranziții vor fi aplicate proprietății transformate și vor folosi funcția temporară cubic-bezier (cubic-bezier). Această funcție temporară adaugă o mică revenire la săgeată.
Urmăriți în stilul iOS 7
Sunt un mare fan al minimalizării ceasului utilizat în iOS 7 de la Apple. De atunci au crescut lungimea săgeților, dar îmi place versiunea mai scurtă.
După setarea stilului săgeților și adăugarea unui fundal cu numere, putem recrea cu ușurință această imagine.
Desigur, acest design este evoluția ceasului feroviar elvețian de către Hans Hilfiker. Schimbând ușor stilul și adăugând o nouă imagine de fundal, putem adapta ceasurile la acest stil.
Dacă veniți cu alte opțiuni, anunțați-ne.
Utilizând Moment.js
Una dintre ideile care au apărut atunci când am decis să scriu acest post era să recreeze imaginea ceasului din hotel, când trei ore arată diferite fusuri orare.
Cea mai ușoară modalitate de a regla ceasul în diferite fusuri orare este utilizarea bibliotecii excelente Moment.js Timezone.
Suport pentru browser
Browserele moderne pot funcționa cu tranzițiile și animațiile CSS folosite în acest articol. IE10 +, cele mai recente versiuni ale Chrome și Firefox le suportă fără prefixe, iar Safari necesită prefixul -webkit.
P.S. Și asta poate fi interesant:
Au trecut mai puțin de șase luni de la ultima modificare a fluxului de lucru al W3C, deoarece conducerea consorțiului a primit o propunere pentru a aplica în cele din urmă acest nou proces. Și să scrieți specificațiile HTML irelevante în muzeu, astfel încât să nu confundă dezvoltatorii, "pretinzând" că sunt relevanți.
Un alt modul CSS, despre care am vorbit, a ajuns într-un mod imperceptibil la starea cu care W3C sfătuiește să înceapă utilizarea zilnică a produselor noi. Proprietatea conține vă permite să restricționați modificările la arborele de randare, să redenumiți casetele CSS și să le redimensionați în interiorul elementului. Prin urmare, este atât de important ...
MAI MULT
De la Paris (foto), care a trecut recent CSS intalnire de lucru de grup, a sosit știri amuzant: Proprietăți grilă-rând-gap și grila coloana-decalaj, precum și reducerea grilă decalaj ...