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

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

目次 - 自己紹介 - GitHubリポジトリ - 完成デモ - CustomPainterとは -
AnimationControllerとは - 実装 - 改めてデモ - おわりに

自己紹介

自己紹介 - 名前: たかし - 年齢: 26 - 職種: フロントエンドエンジニア兼Flutterエンジニア
- 趣味: 旅行・推し活

GitHubリポジトリ

https://github.com/takashi0602/flutter_sample_animation

完成デモ

https://github.com/takashi0602/flutter_sample_animation /blob/main/video/star-path-animation.mp4

CustomPainterとは

CustomPainterとは - パスを描画するためのクラス - Canvas / Path / Paintを使用して、CustomPaint上に描画する -
主要なメソッド - paint - 描画処理の実装を記述する - shouldRepaint - 再描画が必要かどうかを記述する

AnimationControllerとは

AnimationControllerとは - アニメーションを制御するためのクラス - 時間の経過に基づいて、 valueプロパティがlowerBoundからupperBoundまでの値を取り、アニメーションの進行度を示す - lowerBoundとupperBoundのデフォルト値は0と1 -
主なプロパティとメソッド - vsync - 使用するTickerを設定 - Tickerとは毎フレームごとにコールバックを発生させるメカニズムで、アニメーションの更新を提供する - forward / reverse / repeat - アニメーションを前方向 / 逆方向 / 繰り返し再生

実装

星の実装

星の実装 - 2つの五角形を求めることで各頂点をlintToメソッドで繋ぎ合わせている

AnimationControllerの実装

AnimationControllerの実装 - SingleTickerProviderStateMixinを使用し、vsyncを設定 - durationを5秒に設定 - repeatメソッドを使用し、アニメーションを繰り返し再生

CustomPainter の実装

CustomPainterの実装 - path.computeMetricsメソッドを使用し、パスの詳細な情報を含むデータ（メトリクス）を取得 - moveToの数に応じてメトリクスを配列で受け取る（今回は 1つ） - アニメーションの進捗度に応じたパスの長さを求め、その長さ分のパスを抽出 -
Paintクラスを使用し、パスのスタイルを定義 - canvas.drawPathメソッドを使用し、パスを描画

buildメソッドの実装

buildメソッドの実装 - _createStarPathメソッドを使用して、星のパスを取得 - AnimatedBuilderにAnimationControllerを設定 - CustomPaintにStarPainterとSizeを設定

改めてデモ

https://github.com/takashi0602/flutter_sample_animation /blob/main/video/star-path-animation.mp4

おわりに

おわりに - CustomPainterとAnimationControllerを使用することで、アニメーションの幅が広がる - SVG画像をPathに変換すれば、SVGアニメーションみたいなこともできる - アニメーションはおもしろい

ご清聴ありがとうございました

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

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

takashi

More Decks by takashi

Other Decks in Programming

Featured

Transcript