CustomPainterとAnimationControllerを使用したアニメーション作成

GitHubリポジトリ: https://github.com/takashi0602/flutter_sample_animation

Transcript

1. CustomPainterと AnimationControllerを使用した アニメーション作成 たかし
2. 目次 - 自己紹介 - GitHubリポジトリ - 完成デモ - CustomPainterとは - AnimationControllerとは - 実装 - 改めてデモ - おわりに
3. 自己紹介
4. 自己紹介 - 名前: たかし - 年齢: 26 - 職種: フロントエンドエンジニア兼Flutterエンジニア - 趣味: 旅行・推し活
5. GitHubリポジトリ
6. https://github.com/takashi0602/flutter_sample_animation
7. 完成デモ
8. https://github.com/takashi0602/flutter_sample_animation /blob/main/video/star-path-animation.mp4
9. CustomPainterとは
10. CustomPainterとは - パスを描画するためのクラス - Canvas / Path / Paintを使用して、CustomPaint上に描画する - 主要なメソッド - paint - 描画処理の実装を記述する - shouldRepaint - 再描画が必要かどうかを記述する
11. AnimationControllerとは
12. AnimationControllerとは - アニメーションを制御するためのクラス - 時間の経過に基づいて、 valueプロパティがlowerBoundからupperBoundまでの値を取り、アニメー ションの進行度を示す - lowerBoundとupperBoundのデフォルト値は0と1 - 主なプロパティとメソッド - vsync - 使用するTickerを設定 - Tickerとは毎フレームごとにコールバックを発生させるメカニズムで、アニメーションの 更新を提供する - forward / reverse / repeat - アニメーションを前方向 / 逆方向 / 繰り返し再生
13. 実装
14. 星の実装
15. 星の実装 - 2つの五角形を求めることで各頂点をlintToメソッドで繋ぎ合わせている
16. AnimationControllerの実装
17. AnimationControllerの実装 - SingleTickerProviderStateMixinを使用し、vsyncを設定 - durationを5秒に設定 - repeatメソッドを使用し、アニメーションを繰り返し再生
18. CustomPainter の実装
19. CustomPainterの実装 - path.computeMetricsメソッドを使用し、パスの詳細な情報を含むデータ（メトリク ス）を取得 - moveToの数に応じてメトリクスを配列で受け取る（今回は 1つ） - アニメーションの進捗度に応じたパスの長さを求め、その長さ分のパスを抽出 - Paintクラスを使用し、パスのスタイルを定義 - canvas.drawPathメソッドを使用し、パスを描画
20. buildメソッド の実装
21. buildメソッドの実装 - _createStarPathメソッドを使用して、星のパスを取得 - AnimatedBuilderにAnimationControllerを設定 - CustomPaintにStarPainterとSizeを設定
22. 改めてデモ
23. https://github.com/takashi0602/flutter_sample_animation /blob/main/video/star-path-animation.mp4
24. おわりに
25. おわりに - CustomPainterとAnimationControllerを使用することで、アニメーションの幅が広 がる - SVG画像をPathに変換すれば、SVGアニメーションみたいなこともできる - アニメーションはおもしろい
26. ご清聴ありがとうございました