【Flutter】アニメーション初心者から抜け出そう

アニメーション初心者から抜け出そう 

heyhey1028と申します    ・飲食関連スタートアップでFlutterエンジニア 3年  ・それまでは商社・メーカーで海外営業  ・金沢生まれサウジアラビア育ち、石油王は大体友達  (サウジ、アメリカ、アイルランド、スリランカ、イギリス)  ・1歳半のリトルモンスター育ててます 

今日学べる事  ・アニメーションの基礎  ・TweenSequence、Intervalを使ったアニメーション  ・アニメーションの迷子ポイント  初級~中級の内容 

アニメーションの基本 

Widget が動くって  どうゆう事？ 

アニメーションとはパラパラ漫画 

アニメーションとはパラパラ漫画    デバイス固有のフレームレートに合わせて、  少しずつズラしながらWidgetを再描画し続ける操作 

基本となるクラス達  1. AnimationController  2. Tween  3. Curve  4. Animation 

AnimationController  1. アニメーションの進行度を0.0から1.0で管理する  2. この値の中で再生、停止や逆再生の操作を担当  3. アニメーションのエンジン部分  _controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 1000), )

Tween  1. 始点と終点を定義  2. 進行度をOffsetやColorなどDouble以外の値に変換する  3. 値の変換装置  _tween = Tween<Offset>(
begin: const Offset(0, -1000), end: Offset.zero, );

Curve  1. Tweenを変化させる  2. アニメーションへの追加効果 

Curve  1. Tweenを変化させる  2. アニメーションへの追加効果  _tween = Tween<Alignment>( begin: Alignment.topLeft,
end: Alignment.bottomRight, ).chain( CurveTween( curve: Curves.fastLinearToSlowEaseIn, ), );

Animation  1. Widgetに適用するアニメーションそのもの  2. AnimationControlerとTweenとCurveを掛け合わせて作る  _animation = AnimationController( vsync:
this, duration: const Duration(milliseconds: 1000), ).drive( Tween<Alignment>( begin: Alignment.topLeft, end: Alignment.bottomRight, ).chain( CurveTween( curve: Curves.fastLinearToSlowEaseIn, ), ), );

AnimationController x Tween (x Curve)     = Animation !! 

実際作ってみよう 

作成ステップ  1. StatefulWidgetにSingleTickerProviderをmixinする  2. そのクラス自身をAnimationControllerに渡す  3. 何の値に変換するかを決めてTweenを作る  4. 変化のカーブを変えたいならCurveを適用する  5.
AnimationControllerとTweenを掛け合わせてAnimationを作る  6. それをWidgetに紐付ける  7. 任意のタイミングでforwardする 

コードで解説 

SingleTickerProvider  1. 端末固有のframe rateを伝えるTickerクラスを渡してくれる  2. これによりどれくらいの頻度で再描画するかを伝える  class _BasicWithAnimatedBuilderState extends State<BasicWithAnimatedBuilder>
with SingleTickerProviderStateMixin { _controller = AnimationController( vsync: this, duration: const Duration(milliseconds: 500), );

Widgetへの紐付けは２通り  1. AnimatedBuilderを使う  2. AnimatedWidgetを使う 

AnimatedBuilderを使う  1. アニメーションさせたいWidgetをラップしてあげる  2. animationパラメータにAnimationを渡す  body: AnimatedBuilder( animation: animation, builder:
(context, _) { return Align( alignment: animation.value, child: const Text('Hello world!'), ); },

AnimatedWidgetを使う  1. AnimatedWidgetを継承させたWidgetに切り出す  2. 引数にAnimationを渡す  class AnimatingText extends AnimatedWidget {
const AnimatingText({ super.key, required Animation<Alignment> animation, }) : super(listenable: animation); @override Widget build(BuildContext context) { return Align( alignment: _alignment.value, child: Text('Hello world!'), )

アニメーションの応用 

TweenSequenceとIntervalを  マスターして  複雑なアニメーションを実現しよう 

TweenSequence 

同じアニメーション効果を  複数回変化させるアニメーション     

・TweenSequence = 変化の順序(シークエンス)を定義したTween   

・TweenSequence = 変化の順序(シークエンス)を定義したTween  ・複数のTweenSequenceItemを定義したTweenSequenceを使う事で実現  tweenSequnece = TweenSequence<T>([ TweenSequenceItem(tween: Tween(),weight:1), TweenSequenceITem(tween:
Tween(),weight:1), TweenSequenceITem(tween: Tween(),weight:1), ]);

・TweenSequence = 変化の順序(シークエンス)を定義したTween  ・複数のTweenSequenceItemを定義したTweenSequenceを使う事で実現  ・Tweenの代わりに使う    animation = controller.drive(TweenSequence([]));

TweenSequenceItem  tweenSequnece = TweenSequence<T>([ TweenSequenceItem(tween: Tween(),weight:1), TweenSequenceITem(tween: Tween(),weight:1), TweenSequenceITem(tween: Tween(),weight:1),
]);

・tween: どんな変化をさせたいか？    TweenSequenceItem( tween: Tween( begin: Alignment.center, end: Alignment.topLeft,
), weight: 2, )

・tween: どんな変化をさせたいか？  ・weight: どれ位の時間で変化させたいか？    TweenSequenceItem( tween: Tween( begin: Alignment.center,
end: Alignment.topLeft, ), weight: 2, )

・weight = 設定したDurationに対する比率    TweenSequenceItem( tween: Tween( begin: Alignment.center, end:
Alignment.topLeft, ), weight: 2, )

・weight = 設定したDurationに対する比率    tweenSequnece = TweenSequence<T>([ TweenSequenceItem(tween: Tween(),weight:1), TweenSequenceITem(tween:
Tween(),weight:2), TweenSequenceITem(tween: Tween(),weight:3), ]);

・weight = 設定したDurationに対する比率  ・例えば12秒のアニメーションなら    tweenSequnece = TweenSequence<T>([ TweenSequenceItem(tween: Tween(),weight:1),
TweenSequenceITem(tween: Tween(),weight:2), TweenSequenceITem(tween: Tween(),weight:3), ]); 2秒  4秒  6秒 

コード 

Interval 

TweenSequence 

違うアニメーション効果を  順番に充てたい時は？   

Interval !! 

0から1の間の指定した時間を切り取り、その間アニメーションする   

const Interval( 0.5, 0.7, curve: Curves.ease ) 開始  終了  curve
(お好みで) 

AnimationController  0.0  1.0  0.1  0.4  0.6  0.8  Interval  Interval  この間だけアニメーションする 

CurvedAnimationで紐づける        animation = CurvedAnimation( parent: controller, curve:
const Interval( 0, 0.5,curve: Curves.ease), ).drive(Tween);

コード 

連鎖的に複数のWidgetを  動かすのにも使える   

少しズラしたIntervalを  別々のWidgetに紐づけるだけ!!   

コード 

アニメーションの迷子ポイント 

① 

Animated〇〇と〇〇Transition   

単一のアニメーションを  手軽に使わせてくれるWidget達 

AnimatedAlign( alignment: Alignment, duration: const Duration(), child: Text(‘Hello World’), ),
late AnimationController controller; late Tween <Alignment > tween; final Curve curve = Curves .ease; late Animation <Alignment > animation; @override void initState () { controller = AnimationController ( duration: const Duration (seconds: 3), vsync: this, // <<< 2. passing this class to AnimationController ); tween = Tween ( // <<< 3. declare Tween with the beginning value and ending value begin: Alignment .topCenter, end: Alignment .bottomCenter, ); tween. chain ( CurveTween (curve: curve)); // <<< 4. apply transition curves to Tween animation = controller. drive ( tween); // <<< 5. create Animation from AnimationController and Tween super.initState (); } @override void dispose () { controller. dispose (); super.dispose (); } body: AnimatedBuilder ( animation: animation, builder: (context, _) { return Align ( alignment: animation .value, // <<< 6. bind Animation to the widget you want to animate child: const Text('Hello world!' ), ); }, ),

AnimatedSlide  AnimatedAlign  AnimatedScale  AnimatedOpacity  AnimatedRotation  AnimatedSize  AnimatedPositioned  …  SlideTransition  AlignTransition 
ScaleTransition  FadeTransition  RotationTransition  SizeTransition  PositionedTransition  …  Animated〇〇  〇〇Transition 

😫 

Animated〇〇  〇〇Transition  Implicit Widgets  Transition Widgets 

Animated〇〇  〇〇Transition  ImplicitlyAnimatedWidget  AnimatedWidgt  親クラス 

で、何が違うの？？ 

AnimationControllerを  中に持ってるかどうか 

Implicit Widgets  Transition Widgets  持ってる  持ってない  AnimationController 

コード 

Implicit Widgets  Transition Widgets  渡さなくて良い  渡さないとダメ  AnimationControllerを 

どう使い分けるの？ 

Implicit Widgets  複数の値に変化させたい時    forwardさせるだけのアニメーションの時 

Transition Widgets  TweenSequenceやIntervalを  使った複雑なアニメーションをさせたい時    repeatなど複雑なアニメーション操作をしたい時   

Explicit Widgets  もっと複雑なアニメーションをしたい時 

② 

drive()とanimate()  どっちでもAnimation作れる問題   

Animation = AnimationController.drive(Tween); Animation = Tween.animate(AnimationController);

どっちでも良し！！ 

強いて言えば可読性  考慮してみて 

③ 

似た名前のクラス多過ぎ問題 

AnimationBuilder  TweenAnimationBuilder  Curves  Animation  Tween  CurvedAnimation  CurveTween  などなど 

何のサブクラスかに注目してみて 

以上 !!!! 

https://zenn.dev/heyhey1028/articles/a9ee3695cfcf63    https://zenn.dev/heyhey1028/articles/8752d61f522f50    https://zenn.dev/heyhey1028/articles/222e2851e9d97f    https://zenn.dev/heyhey1028/articles/10492c3884a45a  

https://github.com/heyhey1028/flutter_samples/tree/main/samples/master_a nimation    サンプルコード 

ありがとうございました！！ 

【Flutter】アニメーション初心者から抜け出そう

【Flutter】アニメーション初心者から抜け出そう

More Decks by heyhey1028

Other Decks in Programming

Featured

Transcript