Interaktiivisen kirjautumisnäytön rakentaminen leimahduksella ja heilahteluilla

2Dimensions-tiimimme tapasi äskettäin Remembear-kirjautumislomakkeen vuorovaikutuksen: ajattelimme, että tämä oli täydellinen esimerkki, jonka voimme rakentaa Flareen ja jakaa yhteisön kanssa!

Lähdekoodi on saatavana GitHubissa, ja Flare-tiedosto löytyy 2Dimensions-tiedostosta.

Yleiskatsaus

Ensinnäkin, meidän on tuotava flare_flutter-kirjasto pubspec.yaml-sivustosta (N.B. Käytämme suhteellista polkua, koska olemme kirjaston repo-ohjelmassa, mutta paketti on saatavana myös DartPubissa). Lisäsimme myös omaisuuskansion pubspec.yaml-sivulle, jotta sen sisältöön pääsee Flutter-sovelluksessa.

Asiaankuuluvat tiedostot ovat kaikki / lib-kansiossa, kun taas Flare-tiedosto on omaisuuskansiossa:

/ lib
  - input_helper.dart
  - main.dart
  - signin_button.dart
  - teddy_controller.dart
  - tracking_text_input.dart
/ varat
  - Nalle.flr

Kuinka tämä toimii

Katsotaanpa ensin Teddy in Flare: tällä hahmolla on solmu nimeltä ctrl_face, joka on kohdeelementtien käännösrajoituksen kohde. Tämä tarkoittaa, että solmun liikuttaminen saa myös kaikki hänen huollettavansa liikkumaan.

Tarttumalla viittaukseen ctrl_face-solmuun, voimme siirtää Teddyn kasvoja ja säätää hänen katseensa suuntaa. Meidän on vain löydettävä tekstikentän sijainti Teddy-alla ja säädettävä ctrl_face-solmun sijainti vastaavasti.

Osaksi koodia

Main.dart-sovelluksessa MyHomePage rakentaa sovelluksen asettelun.
Asetamme animaation näkymään sijoittamalla flare_flutter-kirjaston FlareActor-widget:

[...]
FlareActor (
  "Varat / Teddy.flr",
  // Sido FlareController
  ohjain: _teddyController
  [...]
)

Koska haluamme manipuloida ctrl_face-solmun sijaintia, sitoudumme _teddyController FlareActoriin. Ohjain on flareControllerin, flare_flutterin tarjoaman käyttöliittymän, konkreettinen toteutus, ja se antaa meille mahdollisuuden kysyä ja käsitellä Flare-hierarkiaa.

Muokatut säätimet

Katsotaanpa TeddyController-luokkaa: Huomaat, että TeddyController laajentaaFlareControls-järjestelmää eikä FlareController-ohjelmaa!
FlareControls on FlareControllerin konkreettinen toteutus, jonka flare_flutter jo tarjoaa, ja siinä on joitain perustoisto- / sekoitustoimintoja.

TeddyControllerilla on muutama kenttä:

// Matriisi Flutter-globaalien koordinaattien muuntamiseksi
// Flare-maailman koordinaateihin.
Mat2D _globalToFlareWorld = Mat2D ();
// Viittaus "ctrl_look" -solmuun.
ActorNode _faceControl;
// Tallenna solmun alkuperä maailman ja paikallisiin muunnostiloihin.
Vec2D _faceOrigin = Vec2D ();
Vec2D _faceOriginLocal = Vec2D ();
// Caret globaaleissa Flutter-koordinaateissa ja Flare-maailmankoordinaateissa.
Vec2D _caretGlobal = Vec2D ();
Vec2D _caretWorld = Vec2D ()

Tämän luokan on sitten ohitettava kolme tapaa: alustaa (), eteenpäin () ja setViewTransform ().
alustaa () kutsutaan - arvasit sen! - alustuksen yhteydessä, kun FlareActor-widget on rakennettu. Täältä noudetaan ensin solmuviittauksemme, jälleen kirjastokutsulla:

_faceControl = artboard.getNode ("ctrl_face");
if (_faceControl! = nolla) {
  _faceControl.getWorldTranslation (_faceOrigin);
  Vec2D.kopia (_faceOriginLocal, _faceControl.translation);
}
pelata ( "idle");

Flaressä olevat taulut ovat huipputasoisia säiliöitä solmuille, muotoille ja animaatioille. artboard.getNode (merkkijonon nimi) palauttaa ActorNode-viitteen annetulla nimellä.

Tallennettuaan solmun viittauksen tallennamme myös sen alkuperäisen käännöksen, jotta voimme palauttaa sen, kun tekstikenttä menettää tarkennuksen, ja alamme toistaa tyhjäkäynnin animaatiota.

Kaksi muuta ohitusta kutsutaan jokaiseksi kehykseksi: setViewTransform (): tä käytetään tässä rakentamaan _globalToFlareWorld - eli matriisi muuntamaan globaalit Flutter-näytön koordinaatit Flare-maailman koordinaateiksi.

Edelliset () -menetelmässä kaikki yllä oleva yhdistyy!
Kun käyttäjä alkaa kirjoittaa, TrackingTextInput välittää carettin näytön sijainnin _caretGlobal-muotoon. Tämän koordinaatin avulla ohjain voi laskea ctrl_face: n uuden sijainnin siirtäen siten katseensa.

// Projektin katse eteenpäin tällä monella pikselillä.
staattinen const double _projectGaze = 60,0;
[...]
// Ole varovainen Flare-maailman tilassa.
Vec2D.transformMat2D (
  _caretWorld, _caretGlobal, _globalToFlareWorld);
[...]
// Laske suuntavektori.
Vec2D toCaret = Vec2D alaosa (Vec2D (), _caretWorld, _faceOrigin);
Vec2D.normalisoida (toCaret, toCaret);
// Skaalaa suunta vakioarvolla.
Vec2D.asteikko (toCaret, toCaret, _projectGaze);
// Laske muunnos, joka saa meidät ctrl_face-tilaan.
Mat2D toFaceTransform = Mat2D ();
if (Mat2D.invert (toFaceTransform,
        _faceControl.parent.worldTransform)) {
  // Laita toCaret paikalliseen tilaan.
  // N.B. käytämme suuntavektoria, ei käännöstä,
  // joten muunna transforMat2 () -sovellusta ilman käännöstä
  Vec2D.transformMat2 (toCaret, toCaret, toFaceTransform);
  // Lopullinen ctrl_face-sijainti on alkuperäinen kasvot käännös
  // plus tämä suuntavektori
  targetTranslation = Vec2D.add (Vec2D (), toCaret, _faceOriginLocal);
}

Koska kuvan arvo on tuhat sanaa - tai tässä tapauksessa koodirivit - alla, näemme kuinka suunta lasketaan: erovektori tallennetaan toCaret-sovellukseen.

Koska tämä on suunta, se normalisoidaan ja sitten skaalataan pikselimäärillä, jonka katseen tulee heijastua alkuperäisestä sijainnistaan.

Viimeiseksi muuntamme toCaret-sovelluksen solmun omaan tilaan, jotta voimme lisätä sen solmun alkuperäiseen käännökseen.

Caret-asema

Viimeinen palapelin pala on kuinka laskea caretin näytön sijainti.

Tämä tehdään TrackingTextInput-widgetissä. Tämä widget tallentaa viittauksen GlobalKey-tiedostoon rakentaakseen sen TextFormFields. Tämän näppäimen avulla Flutter antaa meille mahdollisuuden saada RenderObject, joka kattaa tämän TextFormField-kentän:

RenderObject fieldBox = _fieldKey.currentContext.findRenderObject ();

Kolmella auttajatoiminnolla, jotka ovat saatavilla muodossa lib / input_helper.dart, voimme käyttää RenderBoxia laskeaksesi todellisen caret-paikan näytön koordinaateissa siirtämällä widget-hierarkian kyseisestä RenderBoxista ja etsimällä RenderEditable-tiedostoa. Tämä räpytysluokka tarjoaa getEndpointsForSelection () -menetelmän, jota käytetään paikallisten koordinaattien laskemiseen, jotka originalRenderBox voi muuntaa globaaleiksi koordinaateiksi.

Ja siinä kaikki!

Tarkista jälleen kerran GitHub- ja Flare-lähteet ja tule mukaan 2Dimensions.com-sivustoon!