FlutterAnimationsパッケージの詳細

Googleの新しいマテリアルデザインモーションシステムの概要と、新しいFlutterアニメーションパッケージの例。

2020年2月21日、Flutterチームは、Googleが新たに発表したマテリアルデザインモーションシステムの一部としてアニメーションパッケージをリリースしました。このパッケージにより、Flutter開発者は、一般的に使用されるアニメーションと遷移パターンを以前よりもはるかに簡単にアプリに実装できます。この投稿では、モーションシステムについて説明し、アニメーションパッケージを使用してFlutterでこれらの新しいトランジションを作成する方法を示します。また、ナビゲーターウィジェットとヒーローウィジェットの既存の使用法にどのように適合するかについても確認します。

マテリアルデザインモーションシステムの概要

マテリアルデザインは、Googleのプラットフォームに依存しないデザインシステムであり、ネイティブのiOS、Android、ウェブ、Flutterの実装が付属しています。モーションシステムはマテリアルデザインに新しく追加されたもので、ユーザーがアプリを理解してナビゲートするのに役立つ4つの遷移パターンで構成されています。

コンテナ変換

ほぼすべてのアプリは、リストビューから詳細ビューへの移動など、マスター/詳細パターンを使用します。これは、コンテナ変換が適している場所です。リストタイルを詳細ページにシームレスに変換することにより、2つのコンポーネント間の関係が維持されます。遷移で永続的な要素として機能する囲まれた領域がある限り、それはコンテナ変換の適切な候補です。他の例としては、検索バーがより多くのオプションとフィルターを備えた拡張検索ページに移行したり、チップが拡張チップに移行したりすることが挙げられます。コンテナトランスフォームは、厳密にフルスクリーンである必要はありません 。また、小さなコンポーネントが大きなコンポーネントに拡張されるシナリオにも適用できます。

共有軸

共有軸パターンは、トランジション内の要素に永続的なコンテナがないが、共通のナビゲーションまたは水平/垂直レイアウトを共有している場合に使用できます。良い例は、典型的なオンボーディングフローでの前方および後方ナビゲーションです。この場合、Shared Axisパターンは、各ページ遷移に水平移動に加えてフェードインとフェードアウトを追加します。平行移動はx軸に限定されません。 y軸(垂直)またはz軸(深さ)にも適用できます。

フェードスルー

フェードスルーパターンは、UIコンポーネントが必ずしも相互に強い空間的またはナビゲーション的関係を持っているとは限らないシナリオに適用されます。このパターンは、コンテンツをインプレースでフェードとスケール遷移の組み合わせに置き換えます。これは、表示されているコンテンツに大幅な変更がある場合に役立ちます。たとえば、更新ボタンをタップして画面にデータを再読み込みする場合です。 UIが更新されると、フェードとスケールの効果により、データが大幅に変更されたという印象をユーザーに与えます。

フェード

フェードトランジションは、UI要素がインプレースで更新されているように見えるフェードスルートランジションとは異なり、UI要素が画面に出入りするだけのシナリオに適用されます。これもフェードとスケールのアニメーションを使用して実行されますが、画面の特定の部分から現れるように再配置することもできます。デフォルトでは、遷移は中心からスケーリングします。この移行の適切な使用例は、ダイアログまたはドロップダウンメニューの表示であり、すぐに表示されると不快感を覚えます。

フラッターアニメーションパッケージ

マテリアルデザインの第一級市民として、Flutterがアニメーションパッケージを介して初日に新しいモーションシステムをサポートしてくれたことを嬉しく思います。これはFlutterチームのファーストパーティパッケージであり、pub.devで入手できます。コードを詳しく調べて、その使用方法を理解しましょう。

コンテナ変換

新しいマテリアルデザインコンテナトランスフォームは、OpenContainerウィジェットを使用してFlutterに実装されています。 2つの子ウィジェット間をシームレスに移行して、同じウィジェットのように見せます。子は、 closedBuilder および openBuilder プロパティを介して提供されます。これらのビルダー関数は、標準のBuildContextと、ウィジェットを開いたり閉じたりするアニメーションをトリガーするために使用される追加の action コールバックを提供します。 action コールバックの代わりに、タップ時に「開く」遷移をトリガーできる tappable パラメーター(デフォルトは true )もあります。 。 「閉じた」アニメーションもトリガーされないことに注意してください。

閉じた状態と開いた状態の色、高さ、形状を指定でき、Flutterはそれらの間をシームレスに補間します。遷移期間と遷移タイプを変更できます。 ContainerTransitionType.fade 値は、クロスフェードでウィジェットとオーバーラップします。 ContainerTransitionType.fadeTrough 値は、ウィジェットが重ならないようにフェードをずらします。

OpenContainerウィジェットは、ナビゲーターとのコンテキストで使用する必要があることに注意してください。閉じたウィジェットから開いたウィジェットに移行すると、新しいPageRouteが最も近い祖先のナビゲーターにプッシュされます。次に、開いているウィジェットを拡大して、このナビゲーターのサイズ全体を埋めます。ほとんどのナビゲーターはフルスクリーンですが、フルスクリーンである必要はありません。上記のGIFを生成する例を次に示します。

共有軸

新しいマテリアルデザインの共有軸トランジションは、SharedAxisTransitionウィジェットを使用してFlutterに実装されています。 x、y、またはz軸のいずれかで共有変換+フェード遷移を生成します。 child ウィジェットをパラメーターとして受け入れます。 「古い」子ウィジェットと「新しい」子ウィジェットの間のアニメーションは、 animation パラメーターと secondaryAnimation パラメーターによって制御されます。つまり、SharedAxisTransitionウィジェットはそれ自体では機能できず、外部ソースによって「駆動」される必要があります。そのようなソースの1つは、アニメーションパッケージの一部であり、ウィジェット間の遷移を調整するために使用される新しいPageTransitionSwitcherウィジェットです。このウィジェットは、「古い」子と「新しい」子の間でクロスフェードを行うAnimatedSwitcherウィジェットに似ていますが、開始アニメーションと終了アニメーションを別々に定義できます。

ナビゲーター内のすべてのルートにデフォルトでSharedAxisTransitionトランジションを使用するには、MaterialAppのThemeDataにPageTransitionsThemeを追加します。 SharedAxisPageTransitionsBuilderを builders プロパティに追加し、この遷移を適用するすべてのプラットフォームに必要な遷移タイプを指定します。

ただし注意してください—この手法は全か無かのアプローチであり、名前付きルートでのみ機能します。しかし、次の例のように、プログラムでルートをナビゲーターにプッシュしたい場合はどうなりますか?

この手法は、コンテンツ MyWidget )を遷移(MaterialPageRoute)からより適切に分離するのに役立ちます。 SharedAxisTransitionトランジションを使用するには、それを使用する新しいPageRouteを作成するだけです。 PageRouteをサブクラス化するか、PageRouteBuilderを使用できます:

その後、プログラムでナビゲーターに新しい画面をプッシュし続けることができます:

フェードスルー

新しいマテリアルデザインのフェードスルートランジションは、FadeThroughTransitionウィジェットを使用してFlutterに実装されています。このウィジェットは、出力要素にフェード遷移を適用し、入力要素にフェードとスケール遷移を適用します。 SharedAxisTransitionと同様に、PageTransitionSwitcherウィジェット内で使用したり、名前付きのすべてのナビゲータールートにグローバルに適用したり、カスタムPageRouteを介して特定のルートにのみ選択的に適用したりすることもできます。

フェード

新しいマテリアルデザインのフェードトランジションは、FadeScaleTransitionウィジェットを使用してFlutterに実装されています。入力要素は不透明度が増加するとフェードインし、80%から100%にスケールしますが、終了要素は不透明度が減少するとフェードアウトします。また、PageTransitionSwitcherウィジェット内で使用したり、名前付きのすべてのナビゲータールートにグローバルに適用したり、カスタムPageRouteを使用して選択的に適用したり、新しいshowModal()メソッドを使用して表示したりすることもできます。

showModal()

Flutterアニメーションパッケージには、現在のナビゲーターでモーダルでコンテンツを表示するために使用できるshowModal()と呼ばれる新しいグローバル関数が導入されています。これは、material.dartの一部である既存のshowGeneralDialog()関数と非常によく似ています。違いは、モーダル構成プロパティがModalConfigurationタイプの単一の構成引数に引き出されていることです。このクラスには、入口遷移と終了遷移、遷移の期間、モーダルバリアプロパティなど、モーダルのさまざまな特性が含まれています。さらに、新しいMaterial DesignFadeトランジションの標準値を適用するFadeScaleTransitionConfigurationというサブクラスがあります。これをshowModal()メソッドと組み合わせて使用​​する方法の例を次に示します。

ヒーローウィジェットに関するメモ

ヒーローウィジェットを使用すると、ナビゲーターでルート間を移動するときに快適な視覚効果を作成できます。ヒーローウィジェットは、古いルートの元の場所から新しいルートの最終的な場所まで表示されます。ただし、テストでは、Heroウィジェットは、OpenContainerまたはPageTransitionSwitcher内で使用された場合、新しいマテリアルデザイントランジションでは機能しません。ただし、上記のPageRouteサブクラス化手法を使用する場合は 機能します。

結論

新しいモーションシステムはマテリアルデザインのエキサイティングな進化であり、最新のアプリケーションデザインにおけるモーションエフェクトの重要性の高まりを反映しています。新しい移行は、圧倒されることなく、微妙でコミュニケーションがとれています。彼らがアニメーションパッケージを介してFlutterでファーストクラスのサポートを持っていることは素晴らしいことです。特に、カスタムのPageRoute実装としても使用できることを嬉しく思います。ぜひお試しください!

免責事項:上記の所見は、新しいFlutterアニメーションパッケージのクイックテストの結果です。自分のテストで何か違うものを見つけたら、コメントで知らせてください。

Kawynfurstoss とHashimHayatがこのブログ投稿に貢献しました。