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
95
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
62
hanging-punctuation
takashimelon
0
22
Flutterで作るお絵かきアプリ
takashimelon
0
220
いいから黙ってアニメーションはCSSで書いておけ
takashimelon
0
75
Flutter x Socket.IOで行うリアルタイム通信
takashimelon
0
370
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
JetBrainsのAI機能の紹介 #jjug
yusuke
0
190
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
420
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
290
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
570
Jakarta EE Meets AI
ivargrimstad
0
610
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
360
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
37
11k
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
110
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
200
構文解析器入門
ydah
7
2k
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.6k
階層化自動テストで開発に機動力を
ickx
1
480
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
Scaling GitHub
holman
461
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Invisible Side of Design
smashingmag
301
51k
How GitHub (no longer) Works
holman
314
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
A designer walks into a library…
pauljervisheath
207
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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アニメーションみたいなこともできる - アニメーションはおもしろい
ご清聴ありがとうございました