Contents
Implicit animations
Flutterのアニメーションライブラリを使えば、UIでウィジェットのモーションを追加し、視覚効果を作成できます。
アニメーションライブラリの一部は、アニメーションを管理するウィジェットの品揃えです。
これらのウィジェットは、まとめてimplicit animationsまたはimplicitly animated widgetsと呼ばれ、実装するImplicitlyAnimatedWidgetクラスから名前が付けられます。
次の一連のリソースは、Flutterのimplicit animationsについて学ぶための多くの方法を提供します。
Documentation
コードに飛び込んでください! このコードラボでは、インタラクティブな例と段階的な手順を使用して、暗黙的なアニメーションの使用方法を説明します。
Flutter cookbookのコンテンツです。implicitly animated widgetであるAnimatedContainerの使い方を学ぶためのステップバイステップレシピです。
ImplicitlyAnimatedWidget
API page
ImplicitlyAnimatedWidgetクラスを継承した全てのクラスについて。
Flutter in Focus videos
Flutter in Focusビデオは、すべてのFlutter開発者が上から下まで知る必要のあるテクニックをカバーする実際のコードを含む5〜10分のチュートリアルを特徴としています。
次のビデオは、implicit animationsに関連するトピックをカバーしています。
The Boring Show
Boring showを見て、GoogleエンジニアがFlutterでアプリを最初から作成するのをフォローしてください。
次のエピソードでは、ニュースアグリゲーターアプリでのimplicit animationsの使用について説明します。
Widget of the Week videos
AnimatedOpacity
AnimatedPadding
sample1-1(AnimatedPaddingのサンプル)
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'わかりやすい'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { double padValue=5.0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ SomeCont(color:Colors.greenAccent,pad:padValue), SomeCont(color:Colors.red,pad:padValue), SomeCont(color:Colors.blueAccent,pad:padValue), SomeCont(color:Colors.yellowAccent,pad:padValue), SizedBox(height:30,), RaisedButton( child:Text('Push'), onPressed:(){ setState((){ padValue=30.0; }); }, ), ], ), ); } } class SomeCont extends StatelessWidget { SomeCont({this.color,this.pad}); final Color color; double pad; @override Widget build(BuildContext context) { return AnimatedPadding( padding: EdgeInsets.all(pad), duration:Duration(seconds:1), child: Container( color:color, width:200, height:50, //padding:EdgeInsets.all(10.0), ), ); } }
AnimatedPositioned
AnimatedSwitcher
参考
https://flutter.dev/docs/development/ui/animations/implicit-animations
公式ドキュメントにあるImplicit animationsサンプルのリンクをまとめる。
(1)Fade a widget in and out(AnimatedOpacity)
Implicit animationの作り方
(1)StatefulWidgetのstateとして、アニメーションの値を保持する状態変数
_visible
を用意する。
(2)AnimatedOpacityのopacityプロパティの値を_visibleによって決定するように設定する。
(3)ボタンのonPressedコールバックで_visibleを切り替える(変更する)。
これでopacityが変わるたびに自動的にアニメーション化してくれる。
(2)AnimatedSwitcher
Implicit animationの作り方
(1)StatefulWidgetのstateとして、アニメーションの値を保持する状態変数container( & keyCount)を用意する。
(2)AnimatedSwitcherのchildプロパティに(1)で用意した状態変数containerを設定する。
(3)ボタンのonPressedコールバックでcontainerを切り替える(変更する)。
これでcontainerが変わるたびに自動的にアニメーション化してくれる。
(3)AnimatedPositioned
まずただのPositionedウィジェットについてはこちら。
PositionedもAnimatedPositionedもStackの子ウィジェットとして使うもの。
this.left, this.top, this.right, this.bottom, this.width, this.height,
などのプロパティを指定することでStackの中の位置、サイズを決定できる。
AnimatedPositionedの場合プロパティの変化時にアニメーションで変化させてくれる、ということ。
Implicit animationの作り方
(1)StatefulWidgetのstateとして、アニメーションの値を保持する状態変数
topPosition,
leftPostion
を用意する。
(2)AnimatedPositionedのtop,leftプロパティに、(1)で用意した状態変数
topPosition,
leftPostion
を設定する。
(3)子ウィジェット(Container)がタップされた時のコールバックで
topPosition,
leftPostion
を変更する。
これで状態が変わるたびに自動的にアニメーション化してくれる。