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
100
CustomPainterとAnimationControllerを使用したアニメーション作成
GitHubリポジトリ:
https://github.com/takashi0602/flutter_sample_animation
takashi
September 18, 2024
Tweet
Share
More Decks by takashi
See All by takashi
Flutterで実装するCompound Pattern
takashimelon
0
64
hanging-punctuation
takashimelon
0
23
Flutterで作るお絵かきアプリ
takashimelon
0
230
いいから黙ってアニメーションはCSSで書いておけ
takashimelon
0
79
Flutter x Socket.IOで行うリアルタイム通信
takashimelon
0
380
XDからFigmaに乗り換えた話
takashimelon
0
70
webaudioapi.pdf
takashimelon
0
20
IT × 音楽 ~Web Audio API~
takashimelon
0
58
HTML5.1について
takashimelon
0
210
Other Decks in Programming
See All in Programming
Catch Up: Go Style Guide Update
andpad
0
180
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
610
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.9k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
330
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
株式会社 Sun terras カンパニーデック
sunterras
0
230
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
460
CSC509 Lecture 05
javiergs
PRO
0
300
CSC509 Lecture 04
javiergs
PRO
0
300
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
390
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Invisible Side of Design
smashingmag
301
51k
Statistics for Hackers
jakevdp
799
220k
Optimizing for Happiness
mojombo
379
70k
Bash Introduction
62gerente
615
210k
Producing Creativity
orderedlist
PRO
347
40k
Being A Developer After 40
akosma
91
590k
Side Projects
sachag
455
43k
GraphQLとの向き合い方2022年版
quramy
49
14k
4 Signs Your Business is Dying
shpigford
185
22k
The Language of Interfaces
destraynor
162
25k
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アニメーションみたいなこともできる - アニメーションはおもしろい
ご清聴ありがとうございました