Kuidas luua nupu animatsiooni Flare in Flutter abil? 2. osa: Animatsioonid TrimPathiga

Tere kõigile!

Täna jätkame artiklite sarja, milles käsitleme Flitteri abil animatsiooni loomise protsessi Flare'i abil. Mis on oluline, see tehakse kõik mittekujundaja (mina!) Vaatevinklist.

See seeria on jagatud kolmeks osaks:

  • 1. osa: looge oma esimene animatsioon!
  • 2. osa: Animatsioonid TrimPathiga
  • 3. osa: Animatsiooni rakendamine projektis Flutter

Selles artiklis lisame oma nupule järgmised animatsiooni sammud, kasutades Flare'i funktsiooni TrimPath:

Alustame animatsioonist, mida oleme varem teinud minu esimeses artiklis. Kui te pole seda lugenud, saate seda animatsiooni vaadata siit. Võite selle ka kahvliharjaks teha ja sellest punktist alustada. Kas olete valmis? Alustame!

1. samm: lisage edenemisnäitaja

Selles etapis keskendume valge edunäidiku lisamisele ringinupu sisse:

Esiteks lülitage tagasi vahekaardile Kujundus.

  1. Lisage uus ellips. Valige Kuju -> Ellipse (või klaviatuuril O)
  2. Muutke selle suurus 140x140. Muutke atribuute nagu ristküliku puhul.
  3. Keskne ellips. Valige atribuutide menüü ülaosast Joonda keskele ja Joonda keskele.
  4. Valige ümarate nurkadega korkikoon. See on kena visuaalse efekti jaoks.
  5. Tühjendage ruut Täitke. Tahame lahkuda ainult piirist, nii et meil pole seda vaja.
  6. Stroke all muuda paksus 5-ni ja muuda valgeks. See piir näitab edasiminekut.
  7. Siiski muutke käigu all Kärbi tee sünkroonituks ja Lõpeta 0-ni. Miks me seda vajame?

Natuke Trim Pathist.

Kärbimistee on funktsioon, mis võimaldab meil joonistada ainult osa kujust (see osa algusest lõpuni koos õige nihkega).

Oluline on pöörata tähelepanu tee õige alguse ja lõpu joonistamisele, sest punkt, kust alustame tee joonistamist - see on meie alguspunkt.

Lisateavet Trim Pathi kohta saate lugeda Flare'i dokumentatsioonist.

Meie puhul animeerime esiteks ainult lõppväärtuse, et tekiks mulje, et progress “kasvab”. Kui End jõuab 20% -ni, manipuleerime nihkega, nii et edasiliikumine liigub ringi.

Läheme tagasi animatsiooni tegemise juurde:

2. samm: lisage edenemisnäitaja animatsioon

Nüüd lülitage vahekaardile Animeerige ja valige ellips.

  1. Minge raami 00:00:30 ja koputage 0% -lise lõppväärtuse kõrval olevat teemanti.
  2. Minge raami 00:00:45 ja muutke lõppväärtus 20% -ni. See paneb progressi "kasvama".
  3. Kui olete endiselt kaadris 00:00:45, koputage 0% nihke väärtuse kõrval teemanti.
  4. Minge raami 00:03:00 ja muutke nihke väärtus 300% -ni. See annab edusammu liikumisel ringil 3 korda ringi.
  5. Minge tagasi raami 00:02:51 ja koputage teemanti valiku Lõppväärtus kõrval.
  6. Minge tagasi kaadrisse 00:03:00 ja muutke lõppväärtuseks 0%. See paneb edusammud kahanema.

Pärast neid manipuleerimisi kontrollime, kuidas meie nupp nüüd välja näeb:

Tundub päris lahe! Oleme peaaegu kohal ...

3. samm: lisage linnukese marsruut (id)

Järgmine osa on selle keeruka linnukese animatsiooni loomine:

See, mis meil siin tegelikult on, on kaks objekti: tee, mis “morfeerib” progressilt kontrollmärgini (lihtne kaar) ja apath, mis on linnuke ise. Loome need:

Lülitage tagasi vahekaardile Kujundus.

  1. Valige pliiatsi tööriist (või klaviatuuril P).
  2. Ühtse teekonnapunkti loomiseks koputage kuskil ringist väljaspool. (ja pidage meeles, et alustage ülemisest punktist, nii et algus on paremalt vasakule)
  3. Puudutage linnukese loomiseks veel kaks korda. Kui teete mõne vea, siis tühistage eelmine punkt klahvidega Cmd + Z / Ctrl + Z
  4. Kui teil on linnuke valmis, valige paremal „Redigeerimine valmis“. (kui soovite hiljem rada muuta, valige „Redigeeri tippe”)
  5. Pärast seda näete uue kuju omadusi. Muudame käigu paksuse (väärtuseks 5) ja korgi (ümarate nurkade korral).
  6. Joondage linnuke keskel, nagu varem ristküliku ja ellipsiga.

Sel hetkel peaks meil olema midagi sellist:

Nüüd peame lisama veel ühe tee, et ühendada edusammu lõpp linnukese algusega:

Selleks teeme midagi väga sarnast nagu linnukese puhul:

  1. Valige pliiatsi tööriist (või klaviatuuril P).
  2. Ühtse teekonnapunkti loomiseks koputage kuskil ringist väljaspool (ja pidage meeles, et alustage ülemisest punktist!).
  3. Koputage veel kord ja hoidke sõrme kaare loomiseks paremale / vasakule.
  4. Koputage veel kord kaks korda, et luua kaar, nagu on näidatud ülaloleval pildil.
  5. Kui teete mõne vea, saate muudatuste tühistada, kasutades klahve Cmd + Z / Ctrl + Z, või liigutada teele valgeid punkte, et muuta nende asukohta.
  6. Kui olete lõpetanud, valige paremal „Redigeerimine valmis”.
  7. Muutke käiku nagu linnukese tegemise punktis 5.

Sel hetkel peaks teil olema midagi sellist:

Kui see on tehtud, muutke käigu all (nii linnukese kui ka linnukese edenemise korral) Kärbi tee sünkroonitud ja Lõpp-väärtuseks 0%. Sellest hetkest alates pole see nähtav, sest animatsiooni alguses ei tohiks me neid elemente näha.

Nüüd saame alustada animatsiooni osaga!

4. samm: lisage linnukese animatsioon

Nüüd lülitage vahekaardile Animeerige ja valige linnukese liikumistee.

  1. Minge raami 00:02:59 (sekund enne viimast animatsiooni lõppu) ja koputage teemanti valiku Lõppväärtus 0% kõrval kõrval.
  2. Minge raami 00:03:10, muutke lõppväärtus 100% -ni, koputage teemanti valiku Algusväärtus 0-ga kõrval.
  3. Olles endiselt kaadris 00:03:10, valige linnukese tee ja koputage teemandil lõpu väärtuse 0% kõrval.
  4. Minge raami 00:03:25, valige Märgi edenemise tee, muutke algväärtus 100% -ni
  5. Olles endiselt kaadris 00:03:25, valige linnukese tee ja muutke lõppväärtus 100% -ni.

Pärast neid manipulatsioone peaksid raamid välja nägema järgmised:

Ja lõpptulemus ...

5. samm: lõplik animatsioon!

On viimane osa! Viimane samm on lihtsa ulatusega linnukese animatsioon. Selle võimaldamiseks peame määrama linnukese keskpunkti.

Selleks valige Loo -> Sõlm (või klaviatuuril G), koputage ükskõik kus, et luua sõlme ja liigutage siis linnukese tee vastloodud sõlme alla:

Pärast seda valige Node, valige parempoolsest menüüst Freeze: Images ja nüüd saate teisaldada sõlme kontrollpunkti keskpunkti:

Kui see on tehtud, oleme valmis mõõtkavas animatsiooni tegema:

  1. Lülitage vahekaardile Animeeri ja valige Sõlm.
  2. Minge raami 00:03:25 ja koputage skaala väärtuste (nii X kui ka Y) kõrval teemanti numbriga 1.
  3. Minge raami 00:03:30 ja muutke Skaala väärtused (nii X kui Y) väärtuseks 1,2.
  4. Minge raami 00:03:35 ja muutke skaala väärtused (nii X kui ka Y) väärtuseks 1.

Voilà! Meie animatsioon on valmis:

Täisfaili saate vaadata siin veebisaidil 2dimensions.com.

Kokkuvõte

See on tänapäeva jaoks kõik!

Selles artiklis laiendasime oma eelmist Flare'i animatsiooni TrimPathi animatsiooniga. Järgmises artiklis integreerime kõik Flutteri koodi.

Järgmisi ja eelmisi artikleid saate vaadata siit:

  • 1. osa: looge oma esimene animatsioon!
  • 2. osa: keerukamad animatsioonid TrimPathi abil
  • 3. osa: Animatsiooni rakendamine projektis Flutter (varsti tulekul)

Olge kursis!