トランジションタイミングの調整
トランジションで要素をうまく動かすには、タイミングのコントロールが重要です。良いトランジションの特徴としては、スピードがあり、大切な部分に注目させたり、プロトタイプ中のアプリで何が起こっているのかユーザーにわからせるのに必要なだけの動きがあることがあげられます。
トランジションの調整
- トランジション内のレイヤーまたは画面を選択
- インスペクタの「タイミング」部分で「スプリング」か「クラシック」を選択
- 好みのタイミングビヘイビアになるまで値を調整
スプリングタイミング
スプリングタイミングでは、トランジション内のレイヤーにバネのような動きが加わります。タイミンググラフではスプリングの動きをプレビューでき「テンション」「Friction」「加速度」を調整すると更新されます。
- テンション: バネの巻きの強さ。テンションが高く設定されるほど、スプリングは速く動き、大きく跳ねます。
- Friction: オブジェクトが速度を落とす度合い。バネの付いたアイスホッケーのパックを氷面とカーペットの上で滑らせることを想像してみて下さい。氷の上では摩擦が少ないので長い間バウンスし続けますが、カーペット上だと早く動きが止まります。
- 加速度: 動きの最初の勢い。値を大きくするということは、要素をそっと離すのでなく投げることに相当します。加速度をマイナスに指定すると、要素を最初に逆方向に動かせます。
- 時間: 他のスプリングオプションの組み合わせで決定されるため、スプリングタイミングでは直接変更できません。テンション、加速度の値を調整することで、時間を調整できます。
クラシックタイミング
クラシックタイミングでは、ベジェカーブを調整できます。アプリ内に用意されたカーブから選択するか、カーブのハンドルをドラッグして直接変更します。
表示されたグラフは、時間経過によって行われるアニメーションの度合いを表しています。ラインのカーブが急激に上がった後に平らになる場合、アニメーションは始めに素早く動いた後ゆっくりになるということです。ラインが最初から最後までまっすぐなら、レイヤーは一定の速度で動きます。ラインがゆっくり上がっていき最後に急に落ちる場合、レイヤーは最初徐々に動き最後にスピードアップするということです。
時間をミリ秒単位で設定することで、アニメーション全体の再生にかける時間を決められます。
**ミリ秒: ** 1,000ミリ秒が1秒にあたります。つまり500ミリ秒で1秒の半分、250ミリ秒は1秒の4分の1になります。
遅延
スプリングを使った場合もクラシックを使った場合も、ミリ秒単位で遅延を設定できます。アニメーションは指定したミリ秒数が経過した後に開始されます。
タイミングの初期設定
タイミングを変更すると、現在値が次に変更する際の初期設定となります。こうすることで、たくさんのレイヤー間で統一されたタイミング値を簡単に保てます。
タイミング値のコピー
タイミングインスペクタの下に、bezier(0.42, 0, 0.58, 1)
などの値が書かれたテキスト欄があります。これはタイミングを文字で表したもので、コピー&ペーストできます。この値を他のレイヤーにペーストすることで、タイミング値が一致するように変更できます。