このページでは

イージングカーブの編集

イージングカーブは、アニメーションの進行を定義し、動きをより自然に見せるためのものです。実際の物体は通常、一定の速度で動くわけでも、瞬時に始動・停止するわけでもありません。非線形補間用のイージングカーブを追加・編集することで、コンポーネントが加速したり、減速したり、アニメーションの終了時に跳ね返ったりするように見せることができます。

イージングカーブを以下に適用できます:

  • タイムラインアニメーションのキーフレーム
  • トランジション
  • プロパティアニメーションコンポーネントのインスタンス

Easing Curve Editor を使用して、イージングカーブを選択・編集できます。

イージングカーブの選択

プリセットのイージングカーブを使用するか、カーブハンドルをドラッグして変更することができます。カーブにポイントを追加し、それらやポイントハンドルをドラッグしてカーブを調整できます。カーブが希望通りになったら、カスタムカーブとして保存できます。イージングカーブの種類に関する詳細については、easing curves の技術ドキュメントを参照してください。

イージングカーブエディタ。

イージングカーブを選択するには:

  1. [Presets ] タブでイージングカーブを選択します。
  2. [Duration (ms) ] フィールドで、イージング関数の持続時間をミリ秒単位で選択します。
  3. Preview 」を選択して、カーブをプレビューします。
  4. OK 」を選択すると、イージングカーブが適用され、カーブを追加していた画面に戻ります。

イージングカーブエディタを拡大・縮小するには、マウスのホイールを使用します。ズーム倍率をリセットするには、ピッカー内を右クリックし、「Reset Zoom 」を選択します。

タイムラインアニメーションのイージングカーブ

タイムラインアニメーションでは、アニメーション範囲にわたるアニメーションプロパティの補間値を表示する、より高度な「Curves」ビューも使用できます。

アニメーションカーブは、アニメーション範囲にわたるアニメーションプロパティの実効値を表示することで、アニメーションをより理解しやすい形で提示します。そのためには、アニメーションプロパティをイージングカーブに変換し、またその逆の変換を行う必要があります。これには次のような副作用があります:

  • 現在のキーフレーム値と前のキーフレーム値が同一の場合、イージングカーブの形状にかかわらず、それらの間の補間は意味をなしません。
  • 一部のイージングカーブは、アニメーションカーブへ単純にマッピングできないため、異なる色で表示され、ハンドルも表示されません。

キーフレームにイージングカーブを関連付ける

キーフレームにイージングカーブを割り当てるには:

  1. Timeline でキーフレームを右クリックし、コンテキストメニューから「Easing Curve Editor 」を選択します。
  2. 「イージングカーブの選択」の説明に従って、イージングカーブを選択します

キーフレームにイージングカーブを割り当てると、Timeline のキーフレームトラック上のキーフレームマーカーの形状が、線形キーフレームマーカー から、選択したイージングカーブのタイプを表すマーカーに変わります。

トランジションにイージングカーブを適用する

トランジションにイージングカーブを適用するには:

  1. Transitions ビューで、「「曲線エディタ」ボタン 」(Easing Curve Editor )ボタンを選択します。
  2. 「イージングカーブの選択」の説明に従って、イージングカーブを選択します

プロパティアニメーションにイージングカーブを適用する

プロパティアニメーションにイージングカーブを適用するには:

  1. Navigator で、Animationコンポーネントのインスタンスを選択します。
  2. Properties で、「「カーブエディタ」ボタン 」(Easing Curve Editor )ボタンを選択します。
  3. 「イージングカーブの選択」の説明に従って、イージングカーブを選択します

イージングカーブをカスタマイズする

イージングカーブをカスタマイズするには:

  1. Easing Curve Editor で、「Presets 」タブからイージングカーブを選択します。
  2. カーブのハンドルをドラッグして、カーブを修正します。
  3. エディタ内で右クリックし、「Add Point 」を選択して、曲線にポイントを追加します。
  4. ポイントまたはポイントのハンドルをドラッグして、カーブを修正します。カーブが無効になると、エディタ上で赤色に変わり、「Save 」ボタンが使用不可になります。
  5. Save 」を選択して、カーブへの変更を保存します。
  6. [Name ] フィールドにカスタムカーブの名を入力し、[OK ] を選択して、[Custom ] タブにカーブを保存します。

イージングカーブの定義をテキストとして「Easing Curve Editor 」に貼り付けるには、「Text 」タブを選択します。

Qt Quick UI の設計方法」、「 Qt Quick UI 設計、および「 Qt Quick UI の設計も参照してください

Copyright © The Qt Company Ltd. and other contributors. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.