明示的アニメで、Flutterアニメーション入門

明示的なアニメーションで
Flutterアニメーション入門
1
IWD 2020 Women Techmakers
Flutter Meetup Osaka #3

自己紹介
名前
robo （兼高理恵）
好きなもの
モバイル端末
おしごと
アプリの設計から実装まで
所属
GDG Kyoto (staff) WTM Kyoto (staff) Flutter Osaka (staff)
2

はじめに
公式資料は、アニメーションの概要紹介から、
基盤クラスや応用法…etc のしっかりとした資料です。
説明では、クラス名や用語に英語圏の概念名称を使い、
クラスアーキテクチャの説明から始まっています。
少し硬派な印象…のため、
とっつきやすいよう
Flutter in Focus の Animations 編を参考に、
明示的や暗黙的なアニメーションの説明と具体的な使い方を紹介します。
3
抽象化しすぎて派生クラス責務が
多義化しているのか私的混乱中…

アニメーションの大別
How to Choose Which Flutter Animation Widget is Right for You? より、
アニメーションを大別すると、
主に描画ベースとコードベースの２種類に別れます。
● 描画ベース(drawing-based)のアニメーションは、
Canvas に描画する線や画像のパラメータを変化させて再描画することで、
アニメーションを表現します。
● コードベース(code-based)のアニメーションは、
特定のウィジェットのプロパティ値を変化させて再描画することで、
外観や遷移のアニメーションを表現します。
4

描画ベースのアニメーション
CustomPaint ウイジェットと CustomPainter を使い、
CustomPainter#paint(Canvas, Size) メソッド内での描画…
Canvas に描画する線や画像のパラメータ値を変化させて、
連続して再描画することで、アニメーションを表現します。
パラメータ値は、後述の明示的アニメーション方式をベースにして、
AnimationController と Tween や Cureve を使った手法で変化させます。
https://api.flutter.dev/flutter/widgets/CustomPaint-class.html
https://api.flutter.dev/flutter/rendering/CustomPainter-class.html
https://api.flutter.dev/flutter/dart-ui/Canvas-class.html
5

コードベースのアニメーション
コードベースのアニメーションには、
明示的と暗黙的の２種類の実装形式があります。
明示も暗黙もウィジェットのプロパティ値を変化させて、
連続して再描画することで、アニメーションを表現します。
明示的 (Explicit) と暗黙的 (Implicit) の違いは、
明示的にアニメーションの実行や同期管理が必要なのか、
何もしなくてもすむ（暗黙実行される）かを表しています。
6

Explicit 明示的なアニメーション
7

　アニメーションの再生や停止、繰返逆転再生などの
　アニメ実行操作や、複数のアニメを同期実行させるなど、
　一般的に AnimationController で、
　アニメの実行や同期管理が必要な実装形式です。
　ウィジェットのプロパティ値を変化させながら、
　連続して再描画させてアニメーションを表現するために、
　AnimationControllerの他に Tween や Animation#value や、
　AnimatedWidget と AnimatedBuilder ウィジェットを利用します。
　※変化演出のために CurvedAnimation と Curve も使います。
8

Explicit 明示的なアニメーション（実装概要）
1. Ticker (アニメーションフレームのハンドラ)を取得できるようにします。
2. AnimatedBuilder などでアニメ中に連続して再描画されるようにします。
3. AnimationController を vsync と duration を指定して生成します。
　　　　　vsync で Ticker 提供元、duration でアニメ継続時間を指定します。
4. Tween に変化させるプロパティ型の初期値と終了値を設定して、
5. 変化するプロパティ値を提供する Animation オブジェクトを生成し、
6. その値(Animation#value)をウィジェットのプロパティ値に適用します。
7. アニメを実行します。
　アニメ継続時間中は、クロック/進捗率に従ってプロパティ値が変化し、
　フレームごとにウィジェットが再描画されることでアニメが表現されます。
9

Explicit 明示的なアニメーション（用語説明）
・フレームは、アニメーションにおける映画フィルムでの1コマを表す概念
　スマフォなら 60fps〜120fps
・Ticker は、アニメーションフレームのハンドラです。
　アニメーション・フレームごとに指定関数を呼び出し、
　内部的には、フレームごとの連続した描画(実態は setState() 実行)に使われます。
・クロック / 進捗率は、アニメの進捗状況を 0.0〜1.0 で表す概念（独自造語）
　アニメ開始時は 0.0 で、アニメ終了時(アニメ継続時間に到達時 )に 1.0 になります。
　その実態は、AnimationController における Animation#vaue 値です。
・Tween は、アニメ進捗率と初期値 / 終了値とのマッパーです。
　アニメ進捗率の 0.0 と 1.0 に初期値と終了値が対応するようにして、
　変化するプロパティ値が、描画時のアニメ進捗率に対応するようにします。
10

Explicit 明示的なアニメーション（用語説明）
・変化するプロパティ値を提供する Animation オブジェクトとは、
　Tween#animate(animation) で返される Animation オブジェクトです。
　変化するプロパティ値の実態は、Tween から生成した Animation#vaue 値です。
・アニメの実行とは、AnimationController の forward メソッドなどの実行です。
　他に stop や reset などもあり、repeat(reverse:true) で折返再生もできます。
・CurvedAnimation で AnimationController をラップすれば、
　クロック / アニメ進捗率の進行を任意非線形することもできます。
　具体的には、CurvedAnimation の parent に AnimationController を、
　curve に Curve派生物を指定すれば、クロックが非線形進行に変換され、
　結果的にプロパティ値の変化に加速度変化を与えるようなこともできます。
　 Tween は、クロック / アニメ進捗率に触れず、プロパティ値の変化に重み付けを与えるのに対し、
　 Curve は、クロック / アニメ進捗率の変化に重みをつけることで、プロパティ値に重みを与えます。 11

Explicit 明示的なアニメーション（実装手段）
　
12
明示的アニメの実装手段は４種類あります。
・基盤ウィジェットベース
　AnimatedBuilder
　AnimatedWidget
・組込済ウィジェットベース
　XXX Transition
・描画ベース
　CustomPainter （本稿では扱いません）
How to choose which Flutter Animation Widget is right for you? - Flutter in Focus
https://www.youtube.com/watch?v=GXIJJkq_H8g&feature=youtu.be&t=316
Flutter in Focus より

明示的なアニメ（AnimatedBuilder版）
13

Explicit 明示的なアニメ（AnimatedBuilder）
14
AnimatedBuilder リファレンスには、
Interactive App というブラウザ上で
動作を確認できるサンプルコードが
　紹介されています。
　このコードサンプルを基に、
　Tween 関係のコードを少々加えて
　明示的アニメの基本的な実装手順を
　紹介します。
AnimatedBuilder class
https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html

Explicit 明示的なアニメ実装例
15
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
} このページの実装は、
特に明示的アニメとは関係ありません。

16
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget>
with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> _angleAnimation;
⑤ 変化するプロパティ値を提供する
　 Animation オブジェクトのフィールドを宣言
① TickerProviderStateMixinをミキシインして、
　ウィジェットに TickerProviderを継承させる。
　　ウィジェットが Ticker を提供できるようにします。
水色の項目は、独自に追加した行です。
緑色の項目は、独自に変更した行です。

17
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 10),
vsync: this,
)..repeat();
_angleAnimation = Tween(begin: 0.0, end: 2.0).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
③ AnimationController は、initStateで初期化
　duration は、アニメーション継続時間
　vsync は、Ticker 提供元になります。
⑦ アニメを繰返実行
　 (無限ループ)させる。
④ Tween に変化させるプロパティ型の
　初期値と終了値を設定します。
　AnimationController は、
　使い終わったら必ず
　dispose() してください。
⑤ 変化するプロパティ値を提供する
　 Animation オブジェクトを生成します。
　クロック/アニメ進捗率を
　提供するAnimation オブジェクト

18
@override
return AnimatedBuilder(
animation: _controller,
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
child: const Center(
child: Text('Whee!'),
),
),
builder: (BuildContext context, Widget child) {
return Transform.rotate(
angle: _angleAnimation.value * math.pi,
child: child,
);
},
);
}
}
⑥ 変化するプロパティ値を提供する
　 Animation オブジェクトのアニメーションプロパティ値を
　ウィジェットのプロパティに適用します。
　初期値と終了値がアニメ進捗率 0.0 と 1.0 に対応するように
　マッピングされるので、現在のアニメ進捗率に合わせた値が返ります。
② AnimatedBuilder ウィジェットの builder 関数は、
　アニメ継続時間中はフレームごとにコールされます。
　ウィジェットは、連続して再描画されることになります。

Explicit 明示的なアニメ実装例（差異）
19
angle: _controller.value * 2.0 * math.pi,
child: child,
);
},
angle: _angleAnimation.value * math.pi,
child: child,
);
},
オリジナル行では、
AnimationController のクロック値
⇒ アニメ進捗率 (0.0〜1.0)をそのまま使っていたので、
2π ⇒ 360度になるよう 2.0 を掛ける必要がありました。
改修版では、
Tweenで値の範囲を 0.0〜2.0 にしたので、
2.0 を掛ける必要がなくなっています。

明示的なアニメ（AnimatedWidget版）
20

Explicit 明示的なアニメ（AnimatedWidget）
21
AnimatedWidget リファレンスにも、
Interactive App のサンプルコードが
　アニメ中に連続して再描画されるよう
　継承ウィジェットを作ること② を除き、
　AnimatedBuilder での明示的なアニメ実装
　と本質的な違いはありません。
詳しくはサンプルコードを確認ください。
AnimatedWidget class
https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html

22
class SpinningContainer extends AnimatedWidget {
const SpinningContainer({Key key, AnimationController controller})
: super(key: key, listenable: controller);
Animation<double> get _progress => listenable;
@override
angle: _progress.value * 2.0 * math.pi,
child: Container(width: 200.0, height: 200.0, color: Colors.green),
);
}
}
② AnimatedWidget 継承ウィジェットの build() は、
　アニメ継続時間中はフレームごとにコールされます。
　ウィジェットは、連続して再描画されることになります。
AnimatedWidget 継承ウィジェットには、
生成引数に AnimationController が必用

23
with TickerProviderStateMixin {
@override
void initState() {
super.initState();
vsync: this,
)..repeat();
}
　AnimatedWidget 継承ウィジェットに渡される AnimationController は、
　別のウィジェットで生成しています。
① TickerProviderStateMixinをミキシインして、
　ウィジェットに TickerProviderを継承させる。
　　ウィジェットが Ticker を提供できるようにします。
③ AnimationController は、initStateで初期化
　duration は、アニメーション継続時間
　vsync は、Ticker 提供元になります。

明示的なアニメ（XXX Transition版）
24

Explicit 明示的なアニメ（XXX Transition）
25
SlideTransition リファレンスにも、
Interactive App のサンプルコードが
XXX Transition で命名されたウィジェットは、
AnimatedWidget や AnimatedBuilder が不要な、
明示的アニメーション対応のウィジェットです。
他にも FadeTransition、RotationTransition、
PositionedTransition、DecoratedBoxTransition、
ScaleTransition、AlignTransition…があります。
SlideTransition class
https://api.flutter.dev/flutter/widgets/SlideTransition-class.html

26
Animation<Offset> _offsetAnimation;
@override
void initState() {
super.initState();
vsync: this,
)..repeat(reverse: true);
_offsetAnimation = Tween<Offset>(
begin: Offset.zero,
end: const Offset(1.5, 0.0),
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.elasticIn,
));
}
@override
return SlideTransition(
position: _offsetAnimation,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: FlutterLogo(size: 150.0),
),
);
}
XXX Transition で命名されたウィジェットは、
④ ウィジェットのプロパティ値を変化させるため、
⑤ AnimationController と Tween を利用しますが、
② ウィジェット自体で、連続した再描画が行えるため、
　 AnimatedWidget や AnimatedBuilder 利用は不要です。
⑥ プロパティも Animation オブジェクト対応なため、
　そのまま適用 (Animation#value 記述不要)できます。

27
Animation<Offset> _offsetAnimation;
@override
void initState() {
super.initState();
vsync: this,
)..repeat(reverse: true);
_offsetAnimation = Tween<Offset>(
begin: Offset.zero,
end: const Offset(1.5, 0.0),
).animate(CurvedAnimation(
curve: Curves.elasticIn,
));
}
スライドの動きがアニメ終盤に急激に振幅するよう、
CurvedAnimation で AnimationController をラップして、
アニメ進捗率の進行 (等速変化)を curve で指定した
非線形の Curves.elasticIn に変換しています。
【補足】
　SlideTransition のサンプルコードでは、
　プロパティ値の変化に急激な動きの演出も
　　　　　　　　　　　　　　入れています。

Implicit 暗黙的なアニメーション
28

Implicit 暗黙的なアニメーション
　暗黙的なアニメーションは、
　AnimationController が不要で、ウィジェット描画で、
　何もしなくてもアニメが実行されるアニメーションです。
　（暗黙的に描画を契機にアニメ実行や同期管理がなされます）
　ウィジェット自身がアニメ対応しているので、
　duration 引数でアニメ継続時間や、
　curve 引数でアニメ進捗率の非線形変換 (変化演出) が指定でき、
　アニメ対応プロパティ値を現在値から指定値まで変化させながら、
　連続して自身を再描画させて外観や遷移のアニメを表現します 29

Implicit 暗黙的なアニメーション（実装手段）
　
30
暗黙的アニメの実装手段は２種類あります。
・組込済ウィジェットベース
　Animated XXX
・Tween組込済ウィジェットベース
　TweenAnimationBuilder
How to choose which Flutter Animation Widget is right for you? - Flutter in Focus
https://www.youtube.com/watch?v=GXIJJkq_H8g&feature=youtu.be&t=264
Flutter in Focus より

暗黙的なアニメ（Animated XXX版）
31

Implicit 暗黙的なアニメ（AnimatedContainer）
32
AnimatedContainer リファレンスには、
Interactive App というブラウザ上で
動作を確認できるサンプルコードが
　このサンプルコードを基に、
　明示的アニメの実装を紹介します。
AnimatedContainer class
https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html

Implicit 暗黙的なアニメ実装例
33
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: MyStatefulWidget(),
),
);
}
}
このページの実装は、
特に暗黙的アニメとは関係ありません。

34
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
bool selected = false;
@override
return GestureDetector(
onTap: () {
setState(() {
selected = !selected;
});
},
このページの実装は、
特に暗黙的アニメとは関係ありません。

35
child: Center(
child: AnimatedContainer(
width: selected ? 200.0 : 100.0,
height: selected ? 100.0 : 200.0,
color: selected ? Colors.red : Colors.blue,
alignment:
selected ? Alignment.center : AlignmentDirectional.topCenter,
duration: Duration(seconds: 2),
curve: Curves.fastOutSlowIn,
child: FlutterLogo(size: 75),
),
),
);
}
}
AnimatedContainer ウィジェットは、
アニメ継続時間中はフレームごとにコールされ
自身ウィジェットを、連続して再描画させます。
duration でアニメ継続時間を 2秒に指定
curve でアニメ進行率の変化演出を
初めは早くて後は遅くに指定しています。
　　　　　（Curves.fastOutSlowIn ）
アニメ対応プロパティ値は、
再描画時に現在値から指定値まで
プロパティ値が変化していきます。
alignment を例にすれば、
初期表示はtopCenterなので、
タッチでtopCenter⇒centerになり、
次のタッチでは、center⇒topCenterに
　　　　　　変化することになります。

Implicit 暗黙的なアニメ（Animated XXX）
36
Animated XXX で命名されたウィジェットは、
AnimatedContainer と同じように、
暗黙的アニメーション対応のウィジェットです。
他にも AnimatedAlign、AnimatedCrossFade、
AnimatedOpacity、AnimatedPhysicalModel、
AnimatedPadding、AnimatedPositioned、
AnimatedPositionedDirectional…があります。
Fade a widget in and out
https://flutter.dev/docs/cookbook/animation/opacity-animation

暗黙的なアニメ（TweenAnimationBuilder版）
37

Implicit 暗黙的なアニメ（TweenAnimationBuilder）
38
TweenAnimationBuilder ウィジェットは、
任意のウィジェットの特定プロパティを変化させる、
暗黙的アニメーション対応のウィジェットです。
　変化させるプロパティの初期値と終了値(tween)と、
　アニメーション時間(duration)と、
　変化させるプロパティを引数に持った
　Buildr関数(builder)を指定するだけで利用できます。
　詳しくはサンプルコードを確認ください。
TweenAnimationBuilder class
https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder-class.html

Implicit 暗黙的なアニメ（TweenAnimationBuilder）
39
return TweenAnimationBuilder(
tween: Tween<double>(begin: 0, end: targetValue),
duration: Duration(seconds: 1),
builder: (BuildContext context, double size, Widget child) {
return IconButton(
iconSize: size,
color: Colors.blue,
icon: child,
onPressed: () {
setState(() {
targetValue = targetValue == 24.0 ? 48.0 : 24.0;
});
},
);
},
child: Icon(Icons.aspect_ratio),
);
}
子ウィジェットの Icon は単独なので、
ウィジェットツリーには含まれますが、
ここでの描画はないことに留意！
tween で初期値と終了値を指定した、
アニメーション中に変化するプロパティ値は、
ウィジェット描画を契機に、アニメ実行期間中、
変化しながら builder 引数の size に提供され続けます。
定義時に初期値 24.0 が設定済

コーヒー・ブレイク
「明示的なアニメーションを使えば、
　暗黙的アニメーション対応のウィジェットと同じようなこともできるかも？」
…そう思われた方はいませんか。
これまで見てきたことを応用して
AnimatedContainer サンプルのアニメーションを
Container ウィジェット＋明示的アニメーションで、
シミュレートしてみました。　
40

41
AnimatedContainer class
https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
https://dartpad.dev/embed-flutter.html?id=59814bb65a3ce5ca9d5d5218334624c9&split=70&theme=dark
Simulated sample of AnimatedContainer
ブラウザ上でアニメを動かして、
　　コードを確認してくださいね。

　Flutter in Focus - Animations のブログ記事には、
　アニメーションの基礎についての投稿があります。
　よろしければ、御一読されてはいかがでしょうか。
　　　　　　スライド後ろの【資料室】にリンク集をまとめました。
　右の例は、ビーム放射が拡大していくアニメーションを
　Container ウィジェット(BoxDecoration の RadialGradient)で
　円形グラデーションを描き、オリジナルのBeamClipper() で、
　子ウイジェット(Container)を扇型状にくり抜いて描いています。
42
When should I useAnimatedBuilder or AnimatedWidget?
https://medium.com/flutter/when-should-i-useanimatedbuilder-or-animatedwidget-57ecae0959e8

応用編
43

Staggered animations とは
Staggered pattern とは、
右図のようなタイル模様のことで、
　　ずらした配置の意だそうです。
Staggered animations とは、
「Aパートの後で、Bパートを実行させる」…のように、
複数のアニメーション・パートを時間をずらして配置して、
１つながりにする手法、時間差実行アニメーションを示します。
例えば放物線ジャンプなら、上昇パートの後に落下パートを配置して１つながりにします。
44

Staggered animations / 時間差実行アニメーション
Staggered animations ドキュメント(公式)
には、
アニメーション・パートごとの複数のアニメーションを
時間差で実行させていくことで、１つのアニメにする
　　　時間差実行アニメの実装手法例が紹介されています。　
45
Docs > Development > UI > Animations > taggered
Staggered animations
https://flutter.dev/docs/development/ui/animations/staggered-animations

Staggered animations ドキュメント・キーポイント
1. Staggered animations は、時間差実行アニメーション
アニメーション・パートごとの複数の Animation オブジェクトを
時間差で実行させていくことで、１つのアニメーションとする手法です。
2. AnimatedBuilder などでアニメ中に連続して再描画されるようにします。
3. Tween オブジェクトを
アニメーション化するパートかつ、プロパティごとに設定します。
4. アニメーションパートごとに調歩をとった時間差描画ができるよう、
アニメする進捗率の区間が限定される Animationオブジェクトを生成して、
変化させるプロパティごとに適用させます。
5. １つの AnimationController オブジェクトで、
すべての Animationオブジェクトを制御します。
46

Staggered animations （実装手段）
　時間差実行アニメのキーとなる、
　アニメする進捗率の区間が限定される
　パートごとの Animationオブジェクトの生成手段を
　　　　　　　　　　　　　　　　　２種類紹介します。
● Curve Interval ベース
アニメーション・パートごとに、
アニメ開始とアニメ終了の進捗率区間を直接指定します。
● TweenSequence ベース
アニメーション・パートごとに、アニメ実行区間の重みをつけ、
全体を順序付按分して、アニメ開始と終了の進捗率区間を設定します。
47

時間差実行アニメ（Curve Interval 版）
48

Staggered animations by curve Interval
　Staggered animations ドキュメントでは、
　項目 ④ Animation オブジェクトごとに時間差で描画/適用されるようにする
　…ために、
　CurvedAnimation の curve に Interval という、
　指定区間のアニメ進捗率のときだけプロパティ変化を行なう
　Curve派生クラスで、指定区間専用の Animation オブジェクトを生成し、
　変化させるプロパティへの適用も、区間ごとに指定区間専用に切り替えて、
時間差で描画/適用されるようにしています。
　時間差実行アニメの実装自体は、　　　　
　明示的なアニメーションの実装手法と基本的に同じです。
49
　Interval class
　https://api.flutter.dev/flutter/animation/Interval-class.html

時間差実行アニメサンプル（Curve Interval 版）
50
Interval を使った時間差実行アニメの
放物線ジャンプ・サンプルコード
放物線ジャンプの上昇パートと落下パートを
CurevedAnimation と curve Interval を使って、
時間差実行させるサンプルコードを作りました。
このサンプルコードを基に、
明示的アニメの応用実装を紹介します。
Staggered animations by Interval Curve
https://dartpad.dev/embed-flutter.html?id=059f3a7b9055963b51e6fe5afe756011&split=70&theme=dark

51
Animation<double> _yAnimationIn;
Animation<double> _yAnimationOut;
Animation<double> get _yAnimation => (_controller.value <= 0.5)
? _yAnimationIn : _yAnimationOut;
放物線ジャンプは、
上昇と落下のアニメーションパートをつないだアニメーションです。
・_yAnimationIn は、
　（アニメ進捗率前半）上昇パート用の Animation オブジェクトです。
・_yAnimationOut は、
　（アニメ進捗率後半）落下パート用の Animation オブジェクトです。
・_yAnimation プロパティ getter 関数は、
　アニメ進捗率が前半 0.0 〜 0.5 と後半 0.5 〜 1.0で、
　パート実行区間ごとに区間専用の Animation オブジェクトに切り替えます。

52
@override
void initState() {
super.initState();
vsync: this,
)..repeat(reverse: true); // 正順,逆順,正順,逆順...の繰り返し。
// 縦方向は、放物線変化
_yAnimationIn = Tween(begin: 100.0, end: -100.0)
.animate(CurvedAnimation(
curve: Interval(0.0, 0.5, curve: ParabolaInCurve())));
_yAnimationOut = Tween(begin: -100.0, end: 100.0)
.animate(CurvedAnimation(
curve: Interval(0.5, 1.0, curve: ParabolaOutCurve())));
}
この Interval は、
放物線上昇パート用なので、
アニメ進捗率は、前半部 0.0 〜 0.5 を指定
ParabolaInCurve は、
放物線上昇の加速度変化を表す
独自の Curve派生クラスです。

53
@override
return Transform(
alignment: Alignment.center,
origin: Offset(0.0, 0.0),
transform: Matrix4.translationValues(
_xAnimation.value,
_yAnimation.value,
0.0),
);
}
);
}
_yAnimation の実態は、
アニメの前半パート _yAnimationIn で、
アニメの後半パート _yAnimationOut に、
Animation オブジェクトの実体が切り替わってます。

54
// 放物線の高さ変化の演出（始端が高さ 0で終端で最高、最高速から減速していき停止）
class ParabolaInCurve extends Curve {
ParabolaInCurve() : super();
@override
double transform(double t) {
if (t == 0.0 || t == 1.0) return t;
return 1.0 - (1.0 - t)*(1.0 - t);
}
}
// 放物線の高さ変化の演出（始端が最高で終端で高さ 0、停止から加速していき最高速）
class ParabolaOutCurve extends Curve {
ParabolaOutCurve() : super();
@override
double transform(double t) {
if (t == 0.0 || t == 1.0) return t;
return t * t;
}
}
放物線の上昇パートと落下パートの
加速度変化を反映したアニメ進捗率値を算出する
独自の Curve派生クラスを定義しています。
　t にアニメ進捗率 0.0 と 1.0 が入る時には、
　必ず 0.0 と 1.0 を返していることに留意
ParabolaInCurve は、上昇パート用のため
割当られたアニメ進捗率区間は、0.0〜0.5ですが、
引数 t は、0.0〜1.0 が投入されることに留意！

時間差実行アニメ（TweenSequence 版）
55

Staggered animations by TweenSequence
　Tween のみで、
　項目 ④ Animation オブジェクトごとに時間差で描画/適用されるようにする
　…こともできます。
　Tween のリスト各要素が、順序付けで指定区間専用に按分されるよう、
　TweenSequenceItem という Tween に重みを付けるクラスでラップして、
　TweenSequence で順序付按分した各要素を１つの Tween に連結させてから
　変化させるプロパティ値の Animation オブジェクト (１つ)を生成することで、
時間差で描画/適用されるようにしています。
　時間差実行アニメの実装自体は、　　　　
　明示的なアニメーションの実装手法と基本的に同じです。
56
　TweenSequence class
　https://api.flutter.dev/flutter/animation/TweenSequence-class.html

時間差実行アニメサンプル（TweenSequence 版）
57
TweenSequence を使った時間差実行アニメの
放物線ジャンプ・サンプルコード
放物線ジャンプの上昇パートと落下パートを
TweenSequence と TweenSequenceItem を使って、
時間差実行させるサンプルコードを作りました。
このサンプルコードを基に、
明示的アニメの応用実装を紹介します。
Staggered animations by TweenSequence
https://dartpad.dev/embed-flutter.html?id=783257099f4e8207ac41a5ca13d466c7&split=70&theme=dark

58
Animation<double> _yAnimation;
放物線ジャンプは、
上昇と落下のアニメーションパートをつないだアニメーションです。
・_yAnimation は、上昇パートと落下パートを１つで扱える、
　放物線ジャンプの高さ用の Animation オブジェクトになっています。

59
@override
void initState() {
super.initState();
vsync: this,
)..repeat(reverse: true); // 正順,逆順,正順,逆順...の繰り返し。
// 縦方向は、放物線変化
_yAnimation = TweenSequence(
[
TweenSequenceItem(
tween: ParabolaInTween(begin: 100.0, end: -100.0), weight: 1),
TweenSequenceItem(
tween: ParabolaOutTween(begin: -100.0, end: 100.0), weight: 1),
]
).animate(_controller);
}
この放物線上昇パートは、
TweenSequenceItem ラップで、
上昇 1 と落下 1 の順序付按分により、
区間の進捗率は、0.0 〜 0.5 になります。
ParabolaInTween は、
放物線上昇の加速度変化を表す
独自の Tween派生クラスです。

60
@override
return Transform(
origin: Offset(0.0, 0.0),
transform: Matrix4.translationValues(
_xAnimation.value,
_yAnimation.value,
0.0),
);
}
);
}
基本的に、
明示的なアニメーションの実装パターンと同じです。

61
// 放物線の高さ変化の演出（始端が高さ 0で終端で最高、最高速から減速していき停止）
class ParabolaInTween extends Tween<double> {
ParabolaInTween({ double begin, double end }) : super(begin: begin, end: end);
@override
double lerp(double t) {
return end - (end - begin) * (1.0 - t)*(1.0 - t);
}
}
// 放物線の高さ変化の演出（始端が最高で終端で高さ 0、停止から加速していき最高速）
class ParabolaOutTween extends Tween<double> {
ParabolaOutTween({ double begin, double end }) : super(begin: begin, end: end);
@override
double lerp(double t) {
return begin + (end - begin) * (t * t);
}
}
放物線の上昇パートと落下パートの
加速度変化を反映したプロパティ値を算出する
独自の Tween派生クラスを定義しています。
ParabolaIOutTween は、落下パート用のため、
割当られるアニメ進捗率区間は、0.5 〜 1.0 ですが、
引数 t には、0.0 〜 1.0 が投入されることに留意！

Transform ウィジェット
サンプル内で使った Transform ウィジェットを紹介します。
62

Transform ウィジェット
Transform
Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget
https://api.flutter.dev/flutter/widgets/Transform-class.html
● Widget を変形させるクラスです。
位置(X,Y座標)や、サイズの拡大/縮小や、
XYZ軸ごとの 2D回転および、
3D回転(手前を大きく、奥を小さく描画 ) の
変更/変形を指定して描画させます。
概要を紹介する公式動画もあります。
63

動画で紹介されている使い方
64
// π/4ラジアンで、45度２Ｄ回転
import 'dart:math' as math;
Transform.rotate(ラジアン
angle: math.pi / 4,
child: MyIcon(),
)
// 横方向にずらした平行四辺形に変形
iTransform(
transform: Matrix4.skewX(0.3),
child: MyIcon(),
)
// 1.5倍に拡大
Transform.scale(
scale: 1.5,
child: MyIcon(),
)
// 手前を大きく、奥を小さく３Ｄ回転
// (alignmentで座標を画面中央に指定 )
Transform(
transform: Matrix4.identity()
..setEntry(3,2,0.01)
..rotateX(0.6),
alignment: Fractional0ffset.center,
child: MyIcon(),
)
// XY方向に 50づつ、位置移動
Transform.translate(
offset: Offset(50,50),
child: MyIcon(),
)

Transform 描画をアニメーションさせる
Transform ウィジェットは、位置移動や、拡大/縮小したり、
２Dや３D回転させた Widget を描画してくれますが、
そのままでは、静止画になってしまいます。
Explicit 明示的アニメーションの手法を使えば、
Transform ウィジェットで Widget を動かせます。　　
3次元回転を使った
アニメサンプルを作ってみました。
65

66
Transform を使った3次元回転サンプル
gist 保管されたサンプルアニメ・コード
https://gist.github.com/cch-robo/1f60de0bfbd9887bdff672639832cd54
サンプルアニメ・コードのDartPad ページ埋込
https://dartpad.dev/embed-flutter.html?id=1f60de0bfbd9887bdff6726398
32cd54&theme=dark
ブラウザ上でアニメを動かして、
　　コードを確認してくださいね。

Transform を使った3次元回転（実装例）
67
with SingleTickerProviderStateMixin {
Animation<double> _rotateAanimation;
Animation<double> _scaleAnimation;
@override
void initState() {
super.initState();
duration: const Duration(milliseconds: 5000),
vsync: this,
)..forward();
_rotateAanimation = Tween<double>(begin: 0.0, end: 6.0 * math.pi)
.chain(CurveTween(curve: Curves.easeOutQuart)).animate(_controller); // 回転×３
_scaleAnimation = Tween<double>(begin: 0.0, end: 2.0)
.chain(CurveTween(curve: Curves.easeOutQuart)).animate(_controller);
}
　Transform ウィジェットを
　プロパティ値を変化させながら、
　連続で描画させるための手法は、
　明示的なアニメーションの
　基本的な実装手法しか使っていません。

Transform を使った3次元回転（実装例）
68
@override
return Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.001) // Widget 3D化指定
..rotateX(_rotateAanimation.value) // Widget 回転
..scale(_scaleAnimation.value), // Widget 拡大
);
}
);
}
}
　明示的なアニメーションの基本的な実装手法として、
　AnimationBuilder を使って、プロパティ値の変化ごとに
　Transform ウィジェットが描画されるようにしています。

参考資料
● A Deep Dive Into Transform Widgets in Flutter
https://medium.com/flutter-community/a-deep-dive-into-transform-widgets-in-flutter-4dc32cd575a9
● Flutter Animation has Never Been Easier — Part 1
https://medium.com/flutter-community/flutter-animation-has-never-been-easier-part-1-e378e82b2508
● Example Animations in Flutter — #2
https://medium.com/flutterdevs/example-animations-in-flutter-2-1034a52f795b
● Advanced Flutter Animations – Staggered Animations, Tween Chaining and Transforms
https://blog.flexiple.com/advanced-flutter-animations/
● Perspective on Flutter
https://medium.com/flutter/perspective-on-flutter-6f832f4d912e
● Advanced Flutter: Matrix4 And Perspective Transformations
https://blog.codemagic.io/flutter-matrix4-perspective-transformations/
備考）Matrix4 とは、4行4列（要素数16個）の行列を示す。
69

気をつけよう
単純なアニメに見えても、明示的アニメにする必要のあるパターン
・アニメの繰返再生が必要　　（AnimationController が必要なため）
・プロパティ値の変化が不連続（暗黙的アニメは、前値から変化させるため）
・複数のアニメーション・パートが必要（応用編参照）
Animation#value は、オブジェクトによって意味が違う
・Tween().animate() で生成したオブジェクトは、変化するプロパティ値。
・AnimationController は、クロック / アニメ進捗率の意味になる。
Tween と Curve でのプロパティ値変化は、微妙に意味が違う
・Tween は、クロック / アニメ進捗率に触れず、プロパティ値の変化に重み付けを与える。
・Curve は、クロック / アニメ進捗率の変化に重みをつけることで、プロパティ値にも重みを与える。
70

71
ご清聴、
ありがとうございました。
情報修正があれば更新します
最新版スライドはこちらから

Flutter のアニメーションについては、
公式ページ https://flutter.dev/ にまとめられています。
基礎知識や特殊なアニメーションについては、
次ページからのリンク先を学ぶことになります。
73

アニメーションの基礎知識
Docs > Development > UI > Animations
● Introduction to animations
https://flutter.dev/docs/development/ui/animations
● Animations overview
https://flutter.dev/docs/development/ui/animations/overview
● Animations tutorial
https://flutter.dev/docs/development/ui/animations/tutorial
● Implicit Animations
https://flutter.dev/docs/development/ui/animations/implicit-animations
● Hero Animations
https://flutter.dev/docs/development/ui/animations/hero-animations
● Staggered Animations
https://flutter.dev/docs/development/ui/animations/staggered-animations 74

特殊なアニメーション
Animation > Docs > Cookbook > Animation
https://flutter.dev/docs/cookbook/animation
● Animate a page route transition
https://flutter.dev/docs/cookbook/animation/page-route-animation.html
● Animate a widget using a physics simulation
https://flutter.dev/docs/cookbook/animation/physics-simulation.html
● Animate the properties of a container
https://flutter.dev/docs/cookbook/animation/animated-container.html
● Fade a widget in and out
https://flutter.dev/docs/cookbook/animation/opacity-animation.html
75

アニメーションウィジェット一覧（主なもの）
Docs > Development > UI > Widgets > Widget catalog
https://flutter.dev/docs/development/ui/widgets
● Animation and motion widgets
Docs > Development > UI > Widgets > Animation
https://flutter.dev/docs/development/ui/widgets/animation
76

Flutter in Focus - Animations（Video）
1. Implicit Animations
2. TweenAnimationBuilder
3. Build-in Explicit Animations
4. AnimatedBuilder/AnimatedWidget
5. Animation Deep Dive
How to choose which Flutter Animation Widget
is right for you?
Flutter in Focus
https://www.youtube.com/playlist?list=PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2
77

Flutter in Focus - Animations （Blog）
● Flutter animation basics with implicit animations
https://medium.com/flutter/flutter-animation-basics-with-implicit-animations-95db481c5916
● Custom Implicit Animations in Flutter…with TweenAnimationBuilder
https://medium.com/flutter/custom-implicit-animations-in-flutter-with-tweenanimationbuilder-c76540b47185
● Directional animations with built-in explicit animations
https://medium.com/flutter/directional-animations-with-built-in-explicit-animations-3e7c5e6fbbd7
● When should I use AnimatedBuilder or AnimatedWidget?
https://medium.com/flutter/when-should-i-useanimatedbuilder-or-animatedwidget-57ecae0959e8
● Animation deep dive
https://medium.com/flutter/animation-deep-dive-39d3ffea111f
● How to Choose Which Flutter Animation Widget is Right for You?
https://medium.com/flutter/how-to-choose-which-flutter-animation-widget-is-right-for-you-79ecfb7e72b5
78

Flutter Europe（Video）
Flutter Europe: Animations in Flutter done right
https://www.youtube.com/watch?v=wnARLByOtKA&t=0s
79

日本語でのアニメーション解説
アニメーション対応 Widget の具体的な使い方は、
こちらのブログ記事が詳しいです。
● Flutterのお手軽にアニメーションを扱えるAnimated系Widgetをすべて紹介
シンプルなアニメーションは ImplicitlyAnimatedWidgetで扱うと楽に組めます
https://medium.com/flutter-jp/implicit-animation-b9d4b7358c28
● FlutterのTransition系アニメーションWidgetをすべて紹介
AnimationControllerの扱い方も手厚く解説
https://medium.com/flutter-jp/transition-9c57528c84b8
● “The Boring Flutter Development Show” で
取り上げられたアニメーションを様々な方法で書きながら解説　　　
ImplicitlyAnimatedWidgetを継承してお手軽系アニメーション Widgetを自作
https://medium.com/flutter-jp/custom-animation-c87e9d55b03b 80

明示的アニメで、Flutterアニメーション入門

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 明示的アニメで、Flutterアニメーション入門

Similar to 明示的アニメで、Flutterアニメーション入門 (20)

More from cch-robo

More from cch-robo (18)

Recently uploaded

Recently uploaded (11)

明示的アニメで、Flutterアニメーション入門