こんにちはEveryDaySoft代表の永田です。
Flutterでアニメーションしつつ画面遷移するプログラムを紹介します。
モチベーション
モバイルのオブジェクト指向は僕の言葉で言うと電気の流れが立体的になるのと、オブジェクト指向特有の性質があります。なのでアイデア、設計を組むときにデザイン+αこのような電気の流れで作りたいと考えれて、ネット上の情報から必要なものを取得（勉強、調査、研究など）、必要な形に変化できると、モバイルアプリケーションも作成できます。必要な形に変化できるようになるには、自分が必要な内容にしたいと思い、変化させてみること、当初のイメージ通りになっているか変化した挙動を確認することです。これは簡単にできるとは言えませんが、向いてる人は比較的簡単にできると思います。3Dのblenderのようにエディターの知識、リリースする知識も必要になるので、毎日やっても数ヶ月はかかるかもしれません。
ご存知のとおり、モバイルもWebも遷移した場合は、１から表示のような動作なので、何か連結したストーリーとして表現したい場合に表現が難しいと思います。同じページで表現する場合はインスタンスを参照する形が多くなり管理が大変です。そこでアニメーションしつつ遷移させて、遷移とわからないようなロジックを考えました。
リンク
https://github.com/daisukenagata/AnimationSegue
タップで次の画面、長押しで前の画面に遷移します。segue_page1~4まで画面遷移するプログラムです。
挙動
コード
forwardで再生
whenCompleteで完了後の挙動
PageRouteBuilderという遷移機能を使用しています。このプログラムを使用するとルートに設定した指定箇所に遷移することが可能かつ、アニメーション機能を用意されています。他のもスーパークラスを確認しても紹介内容がございます。
SlideTransition 位置をアニメーションするウィジェット
AlignTransition Align機能をアニメーションするウィジェット(位置の移動)
ScaleTransition 拡縮アニメーションするウィジェット
SizeTransition サイズ変更アニメーションするウィジェット など
FadeTransitionがアニメーションを発生しない挙動です。アニメーションのブレが発生したのでcallbackを使用したところ、ブレが発生しなかったので、使用しています。
thenはwhenComplete後の対応
呼び出し側
インターフェース化してみました。
wにはアニメーションWidget、pathは遷移先を設定してます。
アニメーションさせているロジック
AnimationControllerをforwardで再生すると、animationの値は設定値まで変化します。
AnimationControllerは1秒以内で値を変化します。animationの移動量を設定します。-100はanimationWidgetの横幅部分です。
あとはサンプルを見れば、webの方でもmobileの方でもコードが読める人はわかると思います。
貴重なお時間お読み下さいまして、誠にありがとうございます。