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
Grafana Cloudとソラカメ
devoc
0
140
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
ARA Ansible for the teams
kksat
0
150
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
AHC041解説
terryu16
0
590
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
時計仕掛けのCompose
mkeeda
1
280
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
171
14k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Facilitating Awesome Meetings
lara
51
6.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Language of Interfaces
destraynor
156
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Bash Introduction
62gerente
610
210k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
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アニメーションみたいなこともできる - アニメーションはおもしろい
ご清聴ありがとうございました