トランジションタイミングの調整

トランジションで要素をうまく動かすには、タイミングのコントロールが重要です。良いトランジションの特徴としては、スピードがあり、大切な部分に注目させたり、プロトタイプ中のアプリで何が起こっているのかユーザーにわからせるのに必要なだけの動きがあることがあげられます。

トランジションの調整

スプリングタイミング

スプリングタイミングでは、トランジション内のレイヤーにバネのような動きが加わります。タイミンググラフではスプリングの動きをプレビューでき「テンション」「Friction」「加速度」を調整すると更新されます。

クラシックタイミング

クラシックタイミングでは、ベジェカーブを調整できます。アプリ内に用意されたカーブから選択するか、カーブのハンドルをドラッグして直接変更します。

表示されたグラフは、時間経過によって行われるアニメーションの度合いを表しています。ラインのカーブが急激に上がった後に平らになる場合、アニメーションは始めに素早く動いた後ゆっくりになるということです。ラインが最初から最後までまっすぐなら、レイヤーは一定の速度で動きます。ラインがゆっくり上がっていき最後に急に落ちる場合、レイヤーは最初徐々に動き最後にスピードアップするということです。

時間をミリ秒単位で設定することで、アニメーション全体の再生にかける時間を決められます。

**ミリ秒: ** 1,000ミリ秒が1秒にあたります。つまり500ミリ秒で1秒の半分、250ミリ秒は1秒の4分の1になります。

遅延

スプリングを使った場合もクラシックを使った場合も、ミリ秒単位で遅延を設定できます。アニメーションは指定したミリ秒数が経過した後に開始されます。

タイミングの初期設定

タイミングを変更すると、現在値が次に変更する際の初期設定となります。こうすることで、たくさんのレイヤー間で統一されたタイミング値を簡単に保てます。

タイミング値のコピー

タイミングインスペクタの下に、bezier(0.42, 0, 0.58, 1)などの値が書かれたテキスト欄があります。これはタイミングを文字で表したもので、コピー&ペーストできます。この値を他のレイヤーにペーストすることで、タイミング値が一致するように変更できます。