Share
Până acum, în această serie, ați învățat cum să animați proprietățile CSS ale diferitelor elemente, cum să creați diferite animații legate de SVG și cum să animați conținutul text al diferitelor elemente dintr-o pagină Web. Există încă o modalitate prin care puteți anima elementele de pe o pagină web folosind KUTE.js, și anume prin modificarea valorilor diferitelor atribute. Acest lucru vă cere să includeți pluginul atributelor în proiectul dvs..
În acest tutorial, veți învăța cum să utilizați pluginul atributelor pentru a anima valoarea diferitelor tipuri de atribute în KUTE.js. Vom discuta, de asemenea, diferite funcții de relaxare pe care le puteți utiliza pentru a controla ritmul diferitelor animații.
Obiectele din viața reală se mișcă foarte rar în mod liniar. Ele se accelerează sau se decelerează. Chiar și accelerația și decelerarea apar la diferite magnitudine. Până în acest moment, toate animațiile noastre au progresat liniar. Acest lucru nu se simte deloc natural. În această secțiune, veți afla despre toate funcțiile de relaxare pe care KUTE.js le oferă pentru a controla ritmul diferitelor animații.
Funcțiile de relaxare a miezului din bibliotecă sunt incluse în motorul principal din cutie. Să presupunem că doriți să aplicați QuadraticInOut relaxarea la o animație. Acest lucru se poate realiza în două moduri:
relaxare: KUTE.Easing.easingQuadraticInOut // sau relaxare: 'easingQuadraticInOut'
Fiecare dintre funcțiile de relaxare are o curbă unică care determină modul în care elementele se vor accelera în timpul animației. A sinusoidal curba implică accelerație liniară. Rețineți că aceasta este diferită de cea liniar relaxare funcție. liniar funcția implică o viteză liniară de animație, în timp ce o curbă sinusoidală implică o viteză liniară de accelerare pentru animație. Cu alte cuvinte, viteza animației va crește sau scădea liniar. asemănător, pătratic implică accelerația cu o putere de două, cub implică o putere de trei, quartic implică o putere de patru, și cvintica implică o putere de cinci. Există, de asemenea circular și exponențială relaxarea funcțiilor.
Puteți adăuga În, afară, sau În afară la oricare dintre funcțiile de relaxare. Valoarea În implică faptul că animația va începe foarte încet și va continua să se accelereze până la sfârșit. Valoarea afară implică faptul că animația va începe la viteza maximă și apoi va încetini încet până se va opri la sfârșit. Valoarea În afară înseamnă că animația se va accelera la început și va încetini la sfârșit.
Puteți utiliza, de asemenea sări și elastic relaxarea funcțiilor în animațiile dvs. și adăugarea acestora În, afară, sau În afară la oricare dintre ele. În demo-ul următor, am aplicat toate aceste funcții de relaxare pe cercuri diferite, astfel încât să puteți vedea cum afectează ritmul animației.
Este posibil ca niciuna dintre funcțiile de relaxare nucleară să nu ofere ritmul de animație pe care îl căutați. În astfel de cazuri, puteți include funcțiile Cubic Bezier în proiectul dvs. din ramura experimentelor și puteți începe să utilizați acele funcții de relaxare.
În mod similar, KUTE.js oferă, de asemenea, câteva funcții de relaxare bazate pe fizică importate din biblioteca Dynamics.js. Puteți citi mai multe despre toate aceste funcții de relaxare și cum să le folosiți în mod corespunzător pe pagina de funcții de relaxare a bibliotecii.
Atributele în SVG pot accepta numere, precum și șiruri de caractere ca valoare. Corzile pot fi valori de culoare sau numere sufixate cu o unitate asemănătoare px, em, sau %. Numele atributelor în sine pot fi alcătuite și din două cuvinte asociate printr-o cratimă. Ținând cont de aceste diferențe, KUTE.js ne oferă diferite metode care pot fi folosite pentru a specifica valorile diferitelor atribute.
Accentsconagua
var tween = KUTE.to ('selector', attr: 'r': 100); var tween = KUTE.to ('selector', attr: 'r': '10% '); var tween = KUTE.to ('selector', attr: 'cursă-lățime': 10); var tween = KUTE.to ('selector', attr: strokeWidth: 10);După cum puteți vedea, valorile sufixate trebuie să fie închise în citate. În mod similar, atributele care conțin o cratimă în numele lor trebuie să fie închise în citate sau specificate în formularul camelCase.
Multe atribute acceptă valori unitare. De exemplu, accident vascular cerebral lățime a unei căi ar putea fi fără rost. În mod similar, nu este necesar să specificați o unitate pentru r, cx, și cy atribute ale unui element cerc. Puteți anima toate aceste atribute de la o valoare la alta utilizând pluginul atributelor.
Acum, că știți cum să utilizați diferite funcții de relaxare, veți putea anima diferite atribute la diferite pași. Iată un exemplu:
var radiusAnimație = KUTE.allTo ("cerc", attr: r: 75, repeat: 1, yoyo: adevărat, offset: 1000, relaxare: 'easingCubicIn'); var centerxAnimationA = KUTE.to ("# cerc-a", attr: cx: 500, repet: 1, yoyo: true, relaxare: 'easingCubicInOut',); var centerxAnimationB = KUTE.to ("# cerc-b", attr: cx: 100, repeat: 1, yoyo: true, relaxare: 'easingCubicInOut'); var centeryAnimation = KUTE.allTo ("cerc", attr: cy: 300, repeat: 1, yoyo: true, offset: 1000, relaxare: 'easingCubicOut');Primul tween animă raza ambelor cercuri folosind simultan allTo () metoda discutată în primul tutorial. Dacă este setat la Adevărat, YOYO atributul redă animația în direcția inversă.
cx atributul ambelor cercuri este animat individual. Cu toate acestea, ambele sunt declanșate de același clic pe buton. În cele din urmă, cy atributul ambelor cercuri este animat de o dată cu un ofset de 1000 milisecunde.
Începând cu versiunea 1.5.7, pluginul de atribute din KUTE.js vă permite de asemenea să animați completati, accident vascular cerebral, și stopcomentariu atribute. Puteți utiliza nume de culori valide sau valori hexazecimale pentru culori. De asemenea, puteți furniza valorile culorilor în format RGB sau HSL.
Un lucru important pe care trebuie să-l țineți cont este faptul că animațiile vor funcționa numai dacă nu stabiliți valoarea acestor proprietăți în CSS. În demo - ul următor, completati culoarea nu ar fi animat deloc dacă aș fi adăugat următorul CSS în demo-ul nostru.
rect umplere: maro;
Demo-ul pe care l-am creat este foarte simplu, dar îl puteți face mai interesant prin aplicarea transformărilor și folosirea mai multor culori.
Multe atribute SVG cum ar fi r și accident vascular cerebral lățime poate lucra cu și fără sufixe. De exemplu, puteți seta valoarea r pentru a fi un număr de 10 sau în termeni de unități em ca 10em. Există câteva atribute, cum ar fi ofset atribut pentru stopuri de culoare care necesită întotdeauna să adăugați un sufix. În timp ce specificați o valoare pentru atribute sufixate în KUTE.js, asigurați-vă întotdeauna că închideți valoarea în citate.
În următorul exemplu, am animat valoarea offset a primei opriri într-un gradient și culoarea celei de-a doua opriri. De cand ofset necesită un sufix, am inclus valoarea în citate.
var offsetAnimație = KUTE.allTo (".stop1", attr: offset: '90% ', repet: 1, offset: 1000, yoyo: true, relaxing:' easingCubicIn ')); var colorAnimație = KUTE.allTo (".stop2", attr: stopColor: 'negru', repet: 1, offset: 1000, yoyo: true, relaxare: 'easingCubicIn')); var scarăAnimație = KUTE.allTo ("cerc", svgTransform: scară: 2, repetare: 1, offset: 1000, yoyo: true, relaxare: 'easingCubicIn');Există trei gradienți diferite în demo și fiecare dintre aceste gradienți are două opriri de culoare cu numele de clasă Stop1 și STOP2. Am aplicat, de asemenea, o transformare a scalei folosind svgTransform atribut, despre care am discutat în al treilea tutorial al seriei.
În acest tutorial, ați învățat despre diferite funcții de relaxare disponibile în KUTE.js și cum le puteți folosi pentru a controla ritmul propriilor animații. De asemenea, ați învățat cum să animați diferite tipuri de atribute.
Am încercat să acoperim toate aspectele importante ale KUTE.js din această serie. Acest lucru ar trebui să fie suficient pentru a vă ajuta să utilizați KUTE.js cu încredere în proiectele proprii. De asemenea, puteți citi documentația pentru a afla mai multe despre bibliotecă.
De asemenea, vă recomandăm să treceți prin codul sursă și să vedeți cum funcționează efectiv biblioteca. Dacă aveți întrebări sau sfaturi legate de acest tutorial, nu ezitați să le distribuiți în comentarii.
