Implicitely Animated Widgets in Flutter

Animacje są dość łatwe do zrobienia we Flutter i wiele złożoności można osiągnąć przy znacznie mniejszym wysiłku niż natywny Android. Zwykle osiąga się to poprzez sposoby takie jak definiowanie Animacji + AnimationController. Ale istnieją wbudowane widżety, które nawet zmniejszają to i sprawiają, że animacje są tak proste, jak po prostu zmiana wartości!

Kompletne przykłady będą hostowane na mojej stronie Github podanej na końcu tego artykułu.

An AnimatedContainer automatycznie przechodzi do zdefiniowanych wartości (kolory, rozmiary itp.) zamiast po prostu natychmiastowo się na nie zmieniać. GIF podany powyżej jest przykładem AnimatedContainer.

An AnimatedContainer jest zdefiniowany jako:

var myColor = Colors.blue;
var myHeight = 100.0;
var myWidth = 100.0;AnimatedContainer(
duration: Duration(seconds: 1),
color: myColor,
height: myHeight,
width: myWidth,
),

W normalnych przypadkach, zdefiniowałbyś kontroler i Tween<double> i ColorTween, aby osiągnąć animację w GIFie powyżej. Ale z AnimatedContainer, wszystko co musisz zrobić to:

1. Ustalić czas trwania animacji

 duration: Duration(seconds: 1),

2. Zmienić wartości (Zmienić kolor i rozmiar na swoje wartości)

 myColor = Colors.green;
myHeight = MediaQuery.of(context).size.height;
myWidth = MediaQuery.of(context).size.width;

3. SetState()

 setState(() {});

Bez kontrolerów. No Tweens.

W momencie, gdy zmienisz wartości myColor, my Height lub myWidth i setState(), kontener automatycznie przejdzie na te wartości, zamiast zmienić się bezpośrednio na tę wartość.

onPressed: () {
myColor = Colors.green;
myHeight = MediaQuery.of(context).size.height;
myWidth = MediaQuery.of(context).size.width;
setState(() {});
}

Na początku myColor był ustawiony na Colors.blue. Kiedy zmienimy go na Colors.green i setState, aby go odbudować, przechodzi on z niebieskiego na zielony bez użycia Tweens. (Uwaga: Tweens są używane niejawnie, ale nie muszą być zdefiniowane przez użytkownika.)

Z tego co widziałem, wielu programistów nie zdaje sobie sprawy z tych niejawnie animowanych widżetów i traci czas, gdy nie jest to konieczne. Oczywiście będą przypadki, w których możesz chcieć innego rodzaju zachowania, ale w większości przypadków AnimatedContainer wykonuje swoją pracę.

Animacje Hero

Animacja Hero sprawia, że element z jednej strony „przelatuje” na drugą i automatycznie dostosowuje się do rozmiaru tego samego elementu na drugiej stronie. To sprawia, że coś takiego jak lista w aplikacji, która ma stronę ze szczegółami jest o wiele bardziej interesujące.

Flutter sprawia, że implementacja animacji Hero jest niewiarygodnie prosta. Wszystko co musisz zrobić, to owinąć element, który chcesz zrobić 'Hero’ widżetem Hero i dostarczyć do niego tag. Jeśli chcesz to zrobić na liście, musisz dostarczyć inny tag dla każdego elementu, który ja zazwyczaj ustawiam na „hero” + pozycja elementu na liście.

Powyższy przykład ma prostą kartę na pierwszej stronie z kontenerem w czerwonym kolorze.

Hero(
tag: "heroTag",
child: Container(
color: Colors.red,
height: 100.0,
),
),

Na stronie szczegółów, znowu jest większy pojemnik z czerwonym kolorem, jak również.

Expanded(
child: Hero(
tag: "heroTag",
child: Container(
color: Colors.red,
),
),
),

I raz pcham go z jednej strony na drugą za pomocą

Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return new HeroDetailPage();
},
),
);

To jest to!

Kolorowy pojemnik automatycznie leci i rozszerza się do rozmiaru tego ostatniego.

Jakiś czas temu użyłem wielu animacji w koncepcyjnej aplikacji szachowej, którą stworzyłem za pomocą Fluttera.

Tutaj jest artykuł, który napisałem, jeśli chcesz bardziej szczegółowo przyjrzeć się kodowi tej aplikacji.

AnimatedCrossFade

A CrossFade to płynne przejście z jednego widgetu do drugiego o określonym czasie trwania. Flutter ułatwia to za pomocą widżetu AnimatedCrossFade.

Tak definiuje się AnimatedCrossFade:

AnimatedCrossFade(
firstChild: // Your first element here,
secondChild: // Element after transition,
crossFadeState: // State of the transition,
duration: Duration(milliseconds: 1500),
),

Dostarczamy:

1. Widżet przed przejściem

firstChild: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: CircularProgressIndicator(),
),
height: 200.0,
width: 200.0,
),

2. Widżet po przejściu

secondChild: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: FlutterLogo(),
),
height: 100.0,
width: 200.0,
),

3. Stan przejścia (Jeśli przejście już nastąpiło lub nie)

(Tutaj, firstStateEnabled jest booleanem, który możemy zmienić, aby zmienić stan.)

crossFadeState: firstStateEnabled
? CrossFadeState.showFirst
: CrossFadeState.showSecond,

4. Czas trwania przejścia

duration: Duration(milliseconds: 1500),

Ta ilość kodu wystarczy, aby dać nam powyższy przykład. Przejście jest po prostu wyzwalane przez zmianę CrossFadeState.

Uwaga: Jeśli dwoje dzieci ma różne rozmiary, to automatycznie przechodzi z jednego rozmiaru do drugiego.

Tutaj jest demo:

AnimatedOpacity

AnimatedOpacity animuje zmiany w opacity, tj.czyli tego, jak widoczny jest widżet. Nieprzezroczystość równa 0 czyni widżet całkowicie przezroczystym, podczas gdy nieprzezroczystość równa 1 jest w pełni widoczna.

AnimatedOpacity jest zadeklarowana jako:

AnimatedOpacity(
opacity: // Your variable holding opacity value, 
duration: // Duration of the transition, 
child: FlutterLogo(), 
)

Pozostając podobnym do kilku ostatnich widżetów, w AnimatedOpacity zmieniasz nieprzezroczystość i setState, a to automatycznie animuje zmianę nieprzezroczystości.

W powyższym przykładzie jest to zadeklarowane jako

AnimatedOpacity(
child: FlutterLogo(size: 100.0,),
opacity: myOpacity,
duration: Duration(seconds: 1),
),

Kiedy przycisk jest kliknięty, po prostu zmienia krycie i ustawia stan.

onPressed: () {
myOpacity = 0.0;
setState(() {});
},

.