Share
În acest tutorial, vom crea un ceas flip jos animat inspirat de anii '70. Folosind cadrul Mootools, am încercat să reproduc acțiunea flip a tampoanelor și să o fac cât mai realist posibil. Cu stilul său retro, ar putea fi un lucru foarte frumos de adăugat la site-ul dvs., așa că haideți să începem!
Ceasul este compus din trei grupe de imagini: ore, minute și secunde, care sunt împărțite într-o parte superioară și o parte inferioară, astfel încât să putem obține efectul "flip". Principala animație constă în reducerea înălțimii părții superioare de la 100% la 0%, apoi la creșterea înălțimii părții inferioare de la 0% la 100% pentru fiecare grup în care se modifică o cifră. Iată schema de bază.
În primul rând, trebuie să ne creăm imaginile.
Selectați "Instrumentul de rotunjire a rândurilor" (U), setați raza la 10px și culoarea la # 0a0a0a și creați un raft de 126px-126px, puteți schimba dimensiunea în funcție de necesități, păstrându-le doar un număr par. Resterizați forma prin trecerea la Layer> Rasterize> Shape sau Right Click> Rasterize Layer. Acum vrem să creăm acel "decalaj" între cele două părți și să facem fundalul superior puțin mai ușor. Plasați o linie de ghidare la jumătatea orizontală a plăcuței noastre, apoi selectați pad-ul de orificiu (Ctrl + Faceți clic pe pictograma stratului) și cu Instrumentul de margine rectangulară (M) selectați jumătatea superioară în modul intersect (țineți apăsat Shift + Alt). Acum trebuie să completați selecția cu # 121212 folosind Instrumentul Bucket Paint (G). Urmăriți apoi o linie neagră de 2 pixeli, folosind linia de ghidare ca ajutor, pe un strat separat.
Acum trebuie să adăugăm cifrele. Folosind Instrumentul de tip (T) faceți un nou strat cu cifrele și plasați-l sub linia pe care am creat-o mai devreme.
Doar adăugați o mică suprapunere pe numere pentru a le face să pară mai realiste. Creați un strat nou deasupra stratului de cifre, selectați partea inferioară a plăcuței și completați cu # b8b8b8, apoi completați partea superioară cu # d7d7d7. Acum setați modul de amestecare la "Multiplicare".
O.K. Acum că avem tamponul nostru complet, trebuie să-l împărțim. Ideea principală este să împărțiți cifra din stânga, astfel încât în loc să aveți 60 de imagini pentru grupurile de minute și secunde, veți termina cu 20 de imagini pe care le vom folosi pentru ambele grupuri. Deci, în principiu trebuie să ne împărțim tamponul în 4 imagini cu aceleași dimensiuni. Am folosit instrumentul Crop (C) pentru această lucrare.
După ce ați decupat tamponul, schimbați cifra și salvați de fiecare dată ca un .png separat, astfel încât să ajungeți la toate fișierele de care aveți nevoie (numere de la 0 la 9). Repetați acest pas pentru toate părțile componentei. Rețineți că pentru tamponul de ore nu separați cifrele, aveți doar partea superioară și cea inferioară. În final, este structura dosarului nostru ("Double" pentru minute și secunde, "Single" pentru ore):
Acum, că avem fișierele noastre pregătite, putem începe codarea. Mai întâi, avem nevoie de două containere pentru imaginile noastre, una pentru "partea superioară" a ceasului nostru și una pentru "lowerPart".
Apoi adăugăm imaginile. Iată o schemă cu id-urile pe care le-am folosit:
A trebuit să folosesc o imagine transparentă a distanțierului, care este de 1px lățime și aceeași înălțime ca și celelalte imagini, pentru a menține containerele în scădere atunci când tampoanele flip. De asemenea, nu trebuie să existe spațiu între imaginile din același grup (de exemplu, "minuteUpLeft" și "minutesUpRight").
O.K. Acestea vor fi tampoanele din față ale ceasului nostru care se va răsturna, acum trebuie să înființăm cele din spate, astfel încât atunci când tampoanele din față se rotesc, noile cifre pot fi văzute pe ele. Vom împacheta ceea ce am făcut până acum într-un div și vom duplica-o deasupra ei înșiși, adăugând la fiecare imagine id cuvântul "Înapoi" și schimbarea la fișierul sursă corespunzător.
Aici este fișierul complet .html cu referire la foaia de stil și fișierul javascript "animate.js" în care vom crea animația.
Creați un ceas animat Flip Down 
Principalul lucru pe care trebuie să-l facem acum este să se suprapună cu diviziile "din față" și "din spate". Mai întâi poziționăm ambalajul principal acolo unde avem nevoie de el și apoi dăm aceeași poziție absolută ambelor containere.
#wrapper position: absolute; top: 100px; stânga: 400px; #front, #back poziție: absolută; top: 0px;
Acum trebuie să aliniem vertical partea superioară la partea inferioară și cea inferioară spre partea superioară, astfel încât plăcile să pară ancorate în mijlocul ceasului. Am adăugat proprietățile de înălțime și vizibilitate pentru părțile frontale, deoarece avem nevoie de ele pentru animație mai târziu.
#upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img poziție: relativă; înălțime: 63px; vertical-align: bottom; vizibilitate: vizibil; #lowerPart img poziție: relativă; înălțime: 63px; vertical-align: top; vizibilitate: vizibil; #lowerPartBack img poziție: relativă; vertical-align: top; #upperPartBack img poziție: relativă; vertical-align: bottom;
În cele din urmă, tot ce trebuie să facem este să constrângem lățimea plăcuțelor, deoarece vrem să jucăm doar cu înălțimea lor. În mod prestabilit, dacă modificați una dintre ele, imaginea gaurii va fi scalată.
#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack lățime : 63px;
Aici este totul pus împreună:
corp fundal: # 000; #wrapper poziție: absolută; top: 100px; stânga: 400px; #front, #back poziție: absolută; top: 0px; #upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img poziție: relativă; înălțime: 63px; vertical-align: bottom; vizibilitate: vizibil; #lowerPart img poziție: relativă; înălțime: 63px; vertical-align: top; vizibilitate: vizibil; #lowerPartBack img poziție: relativă; vertical-align: top; #upperPartBack img poziție: relativă; vertical-align: bottom; #hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack lățime : 63px;
Mai întâi avem nevoie de unele variabile pentru a stoca timpul care este afișat pe tampoane. Notă: h = ore, m1 = cifra minutului din stânga, m2 = cifra din minutul drept, s1 = a doua cifră din stânga, s2 = a doua cifră din dreapta.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1;
Acum creăm o funcție care va funcționa în fiecare secundă și va actualiza ceasul. În primul rând, obținem ora curentă și determinăm ora din zi, AM sau PM.
funcția retroClock () now = new Date (); h = now.getHours (); m1 = now.getMinutes () / 10; m2 = now.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = now.getSeconds ()% 10; if (h < 12) ap = "AM"; else if( h == 12 ) ap = "PM"; else ap = "PM"; h -= 12;
Apoi îl comparăm cu timpul afișat pe plăcuțe și schimbăm grupul care este diferit. Utilizează o funcție numită "flip" pe care o voi descrie într-un minut.
Accentsconagua
dacă (h! = h_current) flip ('hoursUp', 'hoursDown', h, 'Single / Up /' + ap + '/'); h_current = h; dacă (m2! = m2_current) flip ('minutesUpRight', 'minutesDownRight', m2, 'Dublă / Sus / Dreaptă /', 'Dublă / Jos / Dreaptă /'); m2_current = m2; flip ('minutesUpLeft', 'minutesDownLeft', m1, 'Dublu / Sus / Stânga /', 'Dublu / Jos / Stânga /'); m1_current = m1; dacă (s2! = s2_current) flip ('secondsUpRight', 'secondsDownRight', s2, 'dublu / sus / dreapta /', 'dublu / jos / dreapta /'); s2_current = s2; flip ('secondsUpLeft', 'secondsDownLeft', s1, 'dublu / sus / stânga /', 'dublu / jos / stânga /'); s1_current = s1; // end retroClock Acum, funcția flip. Are câțiva parametri: upperId, lowerId = ID-urile plăcuțelor superioare și inferioare care se vor răsturna; changeNumber = noua valoare care va fi afișată; pathUpper, pathLower = căile spre fișierele sursă pentru noua valoare. Animația este compusă din următorii pași:
Tasta superioară din față ia valoarea celei din spate și este făcută vizibilă, suprapusă, în timp ce cea inferioară este de asemenea vizibilă, dar înălțimea este schimbată la 0px.
funcția flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Înapoi"; $ (partea superioară) .src = $ (upperBackId) .src; $ (superiorId) .setStyle ("înălțime", "63px"); $ (superiorId) .setStyle ("vizibilitate", "vizibil"); $ (inferior) .setStyle ("înălțime", "0px"); $ (inferior) .setStyle ("vizibilitate", "vizibil"); Acum schimbăm pad-ul superior și cel inferior inferior față la noua valoare.
$ (upperBackId) .src = caleUpper + parseInt (changeNumber) + ".png"; $ (inferior) .src = pathLower + parseInt (changeNumber) + ".png";
Având această setare putem începe animația reală. Așa cum am menționat mai devreme, constă în reducerea înălțimii părții superioare a piciorului la 0%, 0px și creșterea înălțimii părții inferioare din față la 100%, 63px în acest caz. După ce animația este finalizată, tamponul din spate are valoarea nouă, iar plăcuțele frontale sunt ascunse.
var flipUpper = noul Fx.Tween (partea superioară, duration: 200, transition: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('completă': funcție () var flipLower = nou Fx.Tween (inferior, duration: 200, tranziție: Fx.Transitions.Sine.easeInOut); ()) ($) (lowerId) .setStyle ("visibility", "hidden"); $ (upperId) .setStyle (" , "ascuns");); flipLower.start ('înălțime', 64);); flipUpper.start ("înălțime", 0); // sfârșitul flip Ultimul lucru pe care trebuie să-l facem este ca funcția noastră principală să fie executată în fiecare secundă.
setInterval ('retroClock ()', 1000) ;; Aici este totul pus împreună.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1; funcția flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Înapoi"; $ (partea superioară) .src = $ (upperBackId) .src; $ (superiorId) .setStyle ("înălțime", "63px"); $ (superiorId) .setStyle ("vizibilitate", "vizibil"); $ (inferior) .setStyle ("înălțime", "0px"); $ (inferior) .setStyle ("vizibilitate", "vizibil"); $ (upperBackId) .src = caleUpper + parseInt (changeNumber) + ".png"; $ (inferior) .src = pathLower + parseInt (changeNumber) + ".png"; var flipUpper = noul Fx.Tween (partea superioară, duration: 200, transition: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('completă': funcție () var flipLower = nou Fx.Tween (inferior, duration: 200, tranziție: Fx.Transitions.Sine.easeInOut); ()) ($) (lowerId) .setStyle ("visibility", "hidden"); $ (upperId) .setStyle (" , "ascuns");); flipLower.start ('înălțime', 64);); flipUpper.start ("înălțime", 0); // funcția end flip retroClock () now = new Date (); h = now.getHours (); m1 = now.getMinutes () / 10; m2 = now.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = now.getSeconds ()% 10; if (h < 12) ap = "AM"; else if( h == 12 ) ap = "PM"; else ap = "PM"; h -= 12; if( h != h_current) flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/'); h_current = h; if( m2 != m2_current) flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/'); m2_current = m2; flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/'); m1_current = m1; if (s2 != s2_current) flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/'); s2_current = s2; flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/'); s1_current = s1; //end retroClock setInterval('retroClock()', 1000); Suntem terminati! Sper că v-ați bucurat să lucrați la acest proiect mic, are un concept oarecum complex, dar în cele din urmă este un obiect gadget foarte curat pentru site-urile dvs. web. Nu ezitați să trimiteți sugestii pe care le puteți avea!
