魅せるオリジナル画面遷移アニメーションの描き方 by 辰べえ

FlutterKaigi 2024
一般セッション

魅せるオリジナル画面遷移アニメーションの描き方

shoryu927 辰べえ shoryu927
2

Flutterを使ってアプリ独自の世界観をUIで表現することは、複数のプラットフォームに対応するUIを単一のDartコードで構築できるというFlutterの最大のメリットを活かすための一つの手段です。
独自の世界観を表現する際に、画面遷移アニメーションにもこだわることで、さらに魅力的な演出が可能です。

確かに、Flutterには MaterialPageRoute というネイティブライクな画面遷移アニメーションが標準で用意されており、多くのケースではこれで十分対応できます。
しかし、オリジナルの画面遷移アニメーションを取り入れることで、ユーザーをより深くその世界観に没入させることができるかもしれません。
Flutterを選んでいるからこそ、画面遷移にもこだわりを持ち、独自の世界観をさらに引き立ててみてはいかがでしょうか?

本セッションでは、私が公開している画面遷移アニメーションのパッケージ turn_page_transition を作った経験をもとに、次の内容を話します

  • CustomPaintの基本
  • 画面遷移アニメーションの基本
  • オリジナルの画面遷移アニメーションの描き方
  • テストの書き方