Veidojiet animācijas ar FLIP tehniku

Lietotāja interfeisa animācija var būt neticama priekšrocība lietotāja pieredze . Mobilo ierīču izstrādātāji to zina pārāk labi. Mobilo lietotņu animācijas ir pieredzes galvenā sastāvdaļa, nevis pēcpārdomāšana. Tomēr tīmeklī animācijas parasti tiek uzskatītas par “kūka glazūru”, un tās tiek izlaistas, jo tiek uzskatītas par nevajadzīgām, pārmērīgām vai pārāk sarežģītām to ieviešanai. Vēl sliktāk, animācijas, kurām nav nozīmes, var mazināt UX.

Šajā apmācībā mēs uzzināsim par noteiktu jēgpilnu animāciju kategoriju, kas jums varētu būt pazīstama; tādu, kas uzlabo lietotāja pieredzi.



Pāreja starp skatiem

Pārvietojoties no viena skata uz citu mobilajā lietotnē, fokusa elementi bieži vien vienmērīgi animē no vienas pozīcijas uz otru starp skatiem. Piemēri:



  • Fotoattēla paplašināšana no režģa galerijas
  • Tabulu rindu vai saraksta vienumu pārkārtošana
  • Pārējie vienumi aizpilda tukšo vietu, kad tiek dzēsti atsevišķi vienumi
  • Priekšmets, kas redzami krīt iepirkumu grozā
  • Viena teksta rindiņa mainās vertikāli, kad zem tās parādās jauna rinda
  • Poga paplašinās vai saraujas, kad mainās tās saturs

Bet, īstenojot šīs animācijas, ir viens nepatīkams jautājums: kā vienmērīgi animēt objektu starp diviem skatiem vai stāvokļiem, kad tie faktiski ir divi atsevišķi vienumi - pa vienam katram skatam?

kāda veida krāsu es izmantoju uz audekla

Ievadiet FLIP principu. Šis ir paņēmiens ‘kopīgu elementu’ pārejai starp diviem stāvokļiem performatīvā veidā. Ideja ir tāda, ka, ja jūs zināt koplietojamā elementa pirmo pozīciju pirms stāvokļa maiņas, varat radīt ilūziju, ka koplietojamā elementa pēdējā pozīcija pārvietojas no pirmās pozīcijas. Lūk, kā tas darbojas:



  • Pirmkārt: Pirms tā mainās, paņemiet koplietojamā elementa pozīciju
  • Pēdējais: Paņemiet mainīto (galīgo) koplietojamā elementa pozīciju
  • Apgriezt: Aprēķiniet pozīcijas (un lieluma, ja nepieciešams) izmaiņas starp pirmo un pēdējo pozīciju un pēc tam pārvietojiet pēdējo koplietojamo elementu, lai tas parādītos tā, it kā tas būtu sākotnējā pozīcijā, izmantojot šos skaitļus
  • Spēlēt: Animējiet pēdējo kopīgo elementu, atsaucot inversiju

Lai labāk izprastu šī principa ‘apgriezto’ daļu, iedomājieties, ka kārba bija gala stāvoklī, piestiprināta pie gumijas. Ja jūs novietotu lodziņu sākotnējā stāvoklī, izskatās, ka kastīte nemaz nav pārvietojusies. Tomēr, tā kā gumijas josla tagad stiepjas no galīgās pozīcijas līdz kastei, tad, kad jūs atlaidīsit kastīti, tā atkal atgriezīsies galīgajā pozīcijā.

Aprēķinot pozīcijas

Vispirms pirms animācijas iegūstiet pirmā kopīgā mezgla pozīciju (pa kreisi un pa labi) un izmēru (platumu un augstumu), izmantojot metodi getBoundingClientRect ().

Vispirms pirms animācijas iegūstiet pirmā kopīgā mezgla pozīciju (pa kreisi un pa labi) un izmēru (platumu un augstumu), izmantojot metodi getBoundingClientRect ().

Tagad mēs esam izklāstījuši FLIP principu, izmantosim to praksē. Pieņemsim, ka jums ir ritināma attēlu galerija. Noklikšķinot uz kāda no šiem attēliem, tas vienmērīgi pārvietojas un izplešas no sākotnējās režģa pozīcijas līdz galīgajai pilna platuma pozīcijai. Režģa galerijas CSS pamatā ir Flexbox:



.gallery { display: flex; flex-flow: row wrap justify-content: space-around; align-items: flex-start; } .detail { display: block; width: 100%; height: 100% } /* Image inside a gallery */ .gallery > .item { flex: 0 0 30%; height: auto; } .item > img { width: 100%; height: auto; } /* Detail view of image */ .detail > img { width: 100%; height: auto; }

pēdējais Iegūstiet pēdējā koplietojamā mezgla pozīciju un lielumu, izmantojot to pašu metodi, kuru izmantojāt pirmajam. Tas tiks apgriezts, lai izskatās kā pirmais mezgls

pēdējais Iegūstiet pēdējā koplietojamā mezgla pozīciju un lielumu, izmantojot to pašu metodi, kuru izmantojāt pirmajam. Tas tiks apgriezts, lai izskatās kā pirmais mezgls

Lai aprēķinātu pozīcijas, ir noderīga JavaScript DOM mezgla metode ar nosaukumu .getBoundingClientRect (), kas atgriež mezgla lielumu un pozīciju attiecībā pret skatu. Par laimi, tajā tiek ņemta vērā arī ritināšanas pozīcija un tā tiek pārveidota, tāpēc nav nepieciešama papildu matemātika, lai aprēķinātu tā faktisko atrašanās vietu.

// get the 7th image in the gallery, for example var imgNode = document.querySelectorAll('.item > img')[6]; imgNode.getBoundingClientRect(); // bottom: 865.375 // height: 86.0625 // left: 383.390625 // right: 498.140625 // top: 779.3125 // width: 114.75

invertēt Aprēķiniet delta (izmaiņas) pozīciju un lielumu starp pirmo un pēdējo koplietojamo mezglu, lai pārveidotu un apgrieztu pēdējo mezglu

invertēt Aprēķiniet delta (izmaiņas) pozīciju un lielumu starp pirmo un pēdējo koplietojamo mezglu, lai pārveidotu un apgrieztu pēdējo mezglu

Tādējādi tiks atgriezts ClientRect objekta gadījums, kas satur: augšējo, apakšējo, kreiso un labo pozīciju, kā arī augstumu un platumu pikseļos.

Metodes .getBoundingClientRect () dēļ FLIP princips ir īpaši noderīgs, ja precīzi nezināt, kur elements dokumentā tiks novietots. Šis Flexbox izkārtojums ir labs piemērs tam, jo ​​galerijas vienumu var novietot uz jebkuras rindas.

kā rediģēt sevi attēlā

Pozīcija var arī mainīties, pamatojoties uz galerijas ritināšanas pozīciju.

Dažādu izkārtojuma algoritmu izvietoto elementu dinamiskā rakstura dēļ (piemēram, relatīvā pozicionēšana, pludiņi, iekšējie izkārtojumi, Flexbox, gaidāmās režģa specifikācijas utt.) CSS animācijas nebūtu vispiemērotākā izvēle divu līdzīgu, bet atšķirīgu pāreju vienumi starp skatiem.

Pirms skatu maiņas izmantojiet .getBoundingClientRect (), lai koplietojamā elementa pozīciju saglabātu tā pirmajā pozīcijā.

Pēc tam izmantojiet to pašu metodi, lai pēc skata maiņas nekavējoties aprēķinātu elementa pēdējo pozīciju.

No šī brīža ir atlikusi tikai neliela matemātika, lai radītu ilūziju, ka elements vienmērīgi pāriet no viena skata uz nākamo.

atskaņot Animējiet pēdējo mezglu no tā inversijas sākotnējā pozīcijā un lielumā, izmantojot iecienīto JS animācijas bibliotēku vai Web Animations API

atskaņot Animējiet pēdējo mezglu no tā inversijas sākotnējā pozīcijā un lielumā, izmantojot iecienīto JS animācijas bibliotēku vai Web Animations API

Pozīcijas apgriešana

Kad esat uzzinājis koplietojamo elementu pirmo un pēdējo pozīciju (un lielumu, ja piemērojams), nobraukto attālumu (vai ‘delta’) starp abām pozīcijām var izmantot, lai apgrieztu pēdējā koplietojamā elementa pozīciju. Atcerieties, ka mēs radīsim ilūziju, ka pēdējais koplietotais elements atrodas tieši tajā pašā pozīcijā (un izmērā) kā pirmais koplietotais elements, un pēc tam pārvietosim to atpakaļ uz savu galīgo stāvokli.

Pieņemsim, ka jums ir šādas pirmās un pēdējās pozīcijas, izmantojot .getBoundingClientRect ():

melnā piektdiena datoru monitoru piedāvājumi 2018. gadā
// first position, in grid { top: 100, left: 150, height: 50, width: 50, // ... etc. } // last position, fullscreen { top: 0, left: 0, height: 360, width: 360, // ... etc. }

No tā mēs varam aprēķināt dažas lietas:

  • Horizontālais nobrauktais attālums ir pirmais kreisais mīnus pēdējais kreisais (150 - 0 = 150), tāpēc tam jābrauc 150 pikseļus pa labi
  • Vertikālais nobrauktais attālums ir pirmais augšējais mīnus pēdējais augšējais (100 - 0 = 0), tāpēc tam jābrauc 100 pikseļu uz leju
  • Platuma skalas deltu aprēķina, dalot pirmo platumu ar pēdējo platumu (50/360 = 0,138 ...)
  • Līdzīgi tiek aprēķināta augstuma skalas delta, dalot pirmo augstumu ar pēdējo augstumu, kas ir vienāds (50/360 = 0,138 ...)

darbībā Animētas pārejas piemērs mobilajā lietotnē, izmantojot FLIP tehniku

darbībā Animētas pārejas piemērs mobilajā lietotnē, izmantojot FLIP tehniku

Galīgā koplietojamā elementa pozīciju var apgriezt, pielāgojot augšējās, kreisās un platuma īpašības, taču tas nav tik efektīvs kā transformāciju izmantošana. Apgriezto pozīciju var izteikt transformācijās:

kā uzzīmēt pinup meiteni
  • Horizontālas izmaiņas: translateX (150px)
  • Vertikālas izmaiņas: tulkot Y (100 pikseļi)
  • Horizontālā skala: skala X (0,13888)
  • Vertikālā skala: skala Y (0,13888)

Vienmēr lietojiet tulkojumus pirms mērogošanas, jo mērogošana pirms tulkošanas ietekmē elementa pozīciju un var radīt negaidītus rezultātus. Galīgā apgrieztā transformācija tiks pārveidota: translateX (150px) translateY (100px) skala (0.1388), jo šajā gadījumā skalaX un scaleY ir vienādas.

Spēlē pāreju

Kad apgrieztais pārveidojums būs piemērots pēdējam koplietotajam elementam, tas parādīsies tā, it kā pirmais koplietotais elements vēl nebūtu pārvietots. Patiesībā pēdējais kopīgais elements tikai uz laiku ieņem pirmo vietu, kurš ir gatavs animācijai atgriezties sākotnējā stāvoklī.

Atliek tikai veikt pāreju. Šeit mēs izmantosim Web Animations API, lai gan jūs varat izmantot savu iecienīto JavaScript animācijas bibliotēku, piemēram, GSAP vai Velocity. Pāreja no apgrieztās transformācijas notiks bez transformācijas (t.i. sākotnējā stāvokļa):

// First image node from gallery var imgNode = document.querySelectorAll('.item > img')[6]; // Last image node in fullscreen view var lastImgNode = document.querySelector('.fullscreen > img'); var firstImgRect = imgNode.getBoundingClientRect(); var lastImgRect = lastImgNode.getBoundingClientRect(); var deltaX = firstImgRect.left - lastImgRect.left; var deltaY = firstImgRect.top - lastImgRect.top; var deltaScale = firstImgRect.width / lastImgRect.width; // ... // Execute code that changes view // ... lastImgNode.animate([ { transform: ` translateX(${deltaX}px) translateY(${deltaY}px) scale(${deltaScale}) ` }, { transform: `translateX(0) translateY(0) scale(1)` } ], { duration: 300, easing: 'ease-in-out' });

FLIP praksē

Par laimi, ir daži rīki un resursi, kurus varat izmantot, lai ātri sāktu darboties ar FLIP pārejām. Pols Lūiss no Google izveidoja mnemonisko FLIP savā brīnišķīgajā rakstā ‘FLIP your animations’ ( netm.ag/lewis-285 ). Viņš ir izveidojis arī flipjs, palīgbibliotēku FLIP animāciju izveidei ar GreenSock Animation Platform vai requestAnimationFrame ( netm.ag/flipjs-285 ).

Ja izmantojat React, jums var būt noderīga Josh Comeau bibliotēka React Flip Move ( netm.ag/ comeau-285 ). Tas ļaus jums vienkārši ligzdot
visi vienumi, kurus vēlaties FLIPpielikt komponentā. Tas ir arī ļoti konfigurējams, tāpēc varat norādīt ilgumu, atvieglot, pakāpeniski vai izmantot dažas iebūvētās animācijas.

Lai gan tas nav īpaši paredzēts FLIP, ir nepieciešamas arī Google materiāla dizaina vadlīnijas par kustību. Viņi apraksta, kā kustībai jābūt vienkāršai, saliedētai un jēgpilnai, un lielāko daļu viņu piemēru var sasniegt, izmantojot FLIP pārejas.

Tagad jūs saprotat FLIP principu, varat pielāgot šeit ietvertās funkcijas, lai apmierinātu savas vajadzības. Spēlējiet ar ilgumiem, laika funkcijām, vienlaikus pārvietojot vairākus vienumus, izmantojot FLIP, un pat organizējot sarežģītākas, radošas animācijas.

Šis raksts sākotnēji tika publicēts net žurnāls 285. izdevums. Pērciet to šeit.