Kuidas luua nupu animatsiooni Flare in Flutter abil? 3. osa: Animatsiooni rakendamine projektis Flutter

Tere kõigile!

Tänases artiklis jätkame sarja, milles käsitleme Flitteri abil animatsiooni loomise protsessi Flare'i abil. See seeria on jagatud kolmeks osaks ja kõiki neid saate vaadata siit:

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

See on viimane osa. Selles artiklis käsitleme viimast sammu: animatsiooni integreerimine meie Flutteri projektiga selle tulemuse saavutamiseks:

Kui te pole eelnevaid artikleid lugenud, võite neid kõiki lugeda (julgustan teid!) Või võite selle Flare'i projekti kahvlihaaramiseks ja sellest punktist alustada.

1. samm: looge laperdusprojekt

Alustame tühja laperdusprojektiga. Kui integreerite animatsiooni olemasolevasse rakendusse, võite selle sammu ära jätta. Kui teil seda veel pole, siis järgige neid samme, mis on toodud juhendil Flutteri saidil.

2. samm: lisage pakend flare_flutter

Et saaksite oma Flutteri projektis kasutada äratust, peate lisama korraliku teegi. Selle raamatukogu nimi on flare_flutter ja saate seda vaadata pubipakettide saidil. Siit leiate ka juhised selle installimiseks ja kasutamiseks. Põhimõtteliselt on kõik, mida peate tegema:

a) Lisage see oma faili pubspec.yaml:

sõltuvused:
  helkuri leek: ^ 1.5.0

b) Käivitage pakendite hankimine projekti pakettide värskendamiseks.

Nüüd olete valmis seda kasutama!

3. samm: lisage animatsioonikood

Kui meil on raamatukogu valmis, võime hakata tegelema selle artikli tegeliku osaga: kodeerimisega. Alustame faili main.dart muutmisega:

import 'pakett: flare_flutter / flare_actor.dart';
import 'pakett: laperdus / materjal.dart';

tühine main () => runApp (FlareButtonApp ());

klass FlareButtonApp laiendab rakendust StatefulWidget {
  @ ületamine
  _FlareButtonAppState createState () => _FlareButtonAppState ();
}

klass _FlareButtonAppState laiendab olekut  {
  @ ületamine
  Vidina loomine (BuildContext kontekst) {
    tagastama MaterialApp (
      kodu: tellingud (
        keha: Keskel (
          laps: SizedBox (
            laius: 500,
            kõrgus: 75,
            laps: FlareActor (
              'varad / Button.flr',
              animatsioon: 'laadimine',
              sobivad: BoxFit.fitWidth,
            ),
          ),
        ),
      ),
    );
  }
}

Kõige huvitavam vidin on siin FlareActor. See vidin on vastutav animatsiooni näitamise eest. Nagu võite märgata, mähkisin selle vidina SizedBoxi vidinasse - olen seda teinud selleks, et veenduda, et minu vidina suurus on täpselt 500x75 pikslit.

FlareActoril on vähe parameetreid. Esimene neist, varad / Button.flr, on meie animatsiooni failitee. Selle toimimiseks peame eksportima oma Flare-faili ja panema selle faili varadesse:

Samm 3.1: lisage vara Flare

Flare'i vara lisamiseks peate avama oma Flare'i faili (nagu see), koputage paremal asuvat ikooni Eksport, valige Ekspordi ja kinnitage see. Loodud failil on * .flr laiend ja peate selle Flutteri projektis mõnda kausta panema. Minu puhul on see vara projekti juur:

Selle faili Flutteri jaoks nähtavaks tegemiseks peate kuulutama varade kausta failis pubspec.yaml:

laperdus:
  varad:
    - varad /

Ja see on ka kõik! Läheme nüüd tagasi vidina FlareActor juurde.

3. samm: lisage animatsioonikood (jätkamine)

Järgmine parameeter vidina FlareActor on animatsioon: 'laadimine'. See on meie animatsiooni nimi. Pärast vahekaardile Animeerimine saate projekti Flare animatsiooni nime muuta vasakpoolsest nähtavast menüüst:

Järgmine parameeter sobib: BoxFit.fitWidth, mis kirjeldab animatsiooni kuvamisviisi (nagu ka piltide puhul). Sel juhul tahaksime veenduda, et kogu laius on nähtav.

See selleks! Saate oma rakendust käivitada ja vaadata animatsiooni! Praegu peaks see välja nägema selline:

Kuid on veel ...

Boonus: jõudeoleku lisamine ja animatsioonide taaskäivitamine

Kui nägite animatsiooni artikli algusest peale, võite märgata, et see oli pisut erinev. Selle põhjuseks on asjaolu, et saame Flare'i projekti lisada mitu animatsiooni, et meie Flare-objektidel oleks mitu olekut. Ja praegu on meil ainult üks olek (laadimine).

Lisasin puuduvad olekud siia faili. Võite märgata, et on veel kaks animatsiooni: jõudeolekus ja taaskäivitamine. Esimene neist pole tegelikult animatsioon, pigem nupu algseis. Teine on animatsioon, mis juhtub pärast nupule klõpsamist.

Nende toimimiseks peate ülaltoodud koodi sisestama mõned read:

klass _FlareButtonAppState laiendab olekut  {
  String _animationName = 'Tühikäik';

  @ ületamine
  Vidina loomine (BuildContext kontekst) {
    tagastama MaterialApp (
      kodu: tellingud (
        keha: Keskel (
          laps: SizedBox (
            laius: 500,
            kõrgus: 75,
            laps: GestureDetector (
              onTap: _onButtonTap,
              laps: FlareActor (
                'varad / Button.flr',
                animatsioon: _animationName,
                sobivad: BoxFit.fitWidth,
              ),
            ),
          ),
        ),
      ),
    );
  }

  tühine _onButtonTap () {
    setState (() {
      if (_animationName == 'Tühikäik' || _animationName == 'Taaskäivita') {
        _animationName = 'laadimine';
      } veel {
        _animationName = 'Taaskäivita';
      }
    });
  }
}

Voilà! Nüüd töötab meie animatsioon nagu võlu:

Selle Flare'i projektiga saate tutvuda siin saidil 2dimensions.com.

Hoidla koodi saate vaadata ka tänase artikli alt:

Kokkuvõte

See on kõik! See on selle sarja lõpp. Kõigi artiklite kaudu viisime lõpule animatsiooni loomise Flare'i abil ja selle animatsiooni integreerimise projekti Flutter. Kui soovite vaadata varasemaid postitusi, saate seda teha siin:

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

Täname lugemise, kommentaaride ja tagasiside eest! Kui teile see artikkel meeldis, siis ärge kartke seda plaksutada!