Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CustomPainterとAnimationControllerを使用したアニメーション作成
Search
takashi
September 18, 2024
Programming
0
69
CustomPainterとAnimationControllerを使用したアニメーション作成
GitHubリポジトリ:
https://github.com/takashi0602/flutter_sample_animation
takashi
September 18, 2024
Tweet
Share
More Decks by takashi
See All by takashi
hanging-punctuation
takashimelon
0
20
Flutterで作るお絵かきアプリ
takashimelon
0
190
いいから黙ってアニメーションはCSSで書いておけ
takashimelon
0
70
Flutter x Socket.IOで行うリアルタイム通信
takashimelon
0
290
XDからFigmaに乗り換えた話
takashimelon
0
68
webaudioapi.pdf
takashimelon
0
19
IT × 音楽 ~Web Audio API~
takashimelon
0
55
HTML5.1について
takashimelon
0
200
Other Decks in Programming
See All in Programming
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
Grafana Cloudとソラカメ
devoc
0
140
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
740
もう僕は OpenAPI を書きたくない
sgash708
3
990
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
Software Architecture
hschwentner
6
2.1k
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
820
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Featured
See All Featured
Site-Speed That Sticks
csswizardry
3
370
Unsuck your backbone
ammeep
669
57k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Music & Morning Musume
bryan
46
6.3k
Six Lessons from altMBA
skipperchong
27
3.6k
Designing Experiences People Love
moore
139
23k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
BBQ
matthewcrist
86
9.5k
Practical Orchestrator
shlominoach
186
10k
Fireside Chat
paigeccino
34
3.2k
A Tale of Four Properties
chriscoyier
158
23k
Transcript
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アニメーションみたいなこともできる - アニメーションはおもしろい
ご清聴ありがとうございました