MenuToggle Menu

変速(Easing)

プロトパイで変速機能を使用し、リアルな動きでアニメーションを向上させることができます。

実際の生活では、物体が突然動き始めたり、動きを止めたりしません。そのため、自然なアニメーションを実現するためにプロトタイプに変速を含めることが重要です。

変速関数を統合することで、デザインにリアルな感じと自然な動きを加える視覚的に魅力的な切り替えを作ることができます。

標準変速オプション(Standard Easing Options)

線型(Linear)

線型変速を使用すると、アニメーションの中に加速や減速がありません。オブジェクトは柔らかく均一に動き、切り替え中に一定の速度を維持します。

減速/加速(Easing)

減速/加速変速は、切り替えの加速と減速をコントロールするために使用されます。このオプションは、アニメーション効果が適用されたり、状態間で切り替えられるオブジェクトまたは要素に滑らかな感じと自然な動きを加えます。

加速(Ease In)

加速変速は、切り替えの初期加速をコントロールするために使用されます。このオプションは、漸進的でスムーズにアニメーションを始めることに重点を置きます。オブジェクトや要素がゆっくり動き始め、アニメーションが進むにつれて速度が速くなります。

減速(Ease Out)

減速変速は、切り替えの減速をコントロールするために使用されます。このオプションは、アニメーション終了時の漸進的でスムーズな動きの速度を減らすことに重点を置きます。

加速後の減速(Ease In Out)

加速後の減速変速は、滑らかでバランスのとれた切り替えを作るために使用されます。このオプションは、加速及び減速変速の特性を結合し、始めるときは徐々に加速し、途中には一定の速度を維持してから、アニメーションの終わりに行くほど徐々に減速します。

EaseIn
  • easeInSine
    (0.12, 0, 0.39, 0)
  • easeInCubic
    (0.32, 0, 0.67, 0)
  • easeInQuint
    (0.64, 0, 0.78, 0)
  • easeInCirc
    (0.55, 0, 1, 0.45)
  • easeInElastic
  • easeInQuad
    (0.11, 0, 0.5, 0)
  • easeInQuart
    (0.5, 0, 0.75, 0)
  • easeInExpo
    (0.7, 0, 0.84, 0)
  • easeInBack
    (0.36, 0, 0.66, -0.56)
  • easeInBounce
EaseOut
  • easeOutSine
    (0.61, 1, 0.88, 1)
  • easeOutCubic
    (0.33, 1, 0.68, 1)
  • easeOutQuint
    (0.22, 1, 0.36, 1)
  • easeOutCirc
    (0, 0.55, 0.45, 1)
  • easeOutElastic
  • easeOutQuad
    (0.5, 1, 0.89, 1)
  • easeOutQuart
    (0.25, 1, 0.5, 1)
  • easeOutExpo
    (0.16, 1, 0.3, 1)
  • easeOutBack
    (0.34, 1.56, 0.64, 1)
  • easeOutBounce
EaseInOut
  • easeInOutSine
    (0.37, 0, 0.63, 1)
  • easeInOutCubic
    (0.65, 0, 0.35, 1)
  • easeInOutQuint
    (0.83, 0, 0.17, 1)
  • easeInOutCirc
    (0.85, 0, 0.15, 1)
  • easeInOutElastic
  • easeInOutQuad
    (0.45, 0, 0.55, 1)
  • easeInOutQuart
    (0.76, 0, 0.24, 1)
  • easeInOutExpo
    (0.87, 0, 0.13, 1)
  • easeInOutBack
    (0.68, -0.6, 0.32, 1.6)
  • easeInOutBounce

3次ベジェ(Cubic Bezier)

3次ベジェ変速は、切り替えの加速と減速を正確にコントロールするために使用されます。このオプションを使用すると、4つの点(固定点2点及び制御点2点)を調整してユーザー指定曲線を定義することができるし、変速を柔軟に調整してユニークで複雑なモーション効果を生み出すことができます。

Example
  • Cubic-bezier
    (0.39, 0, 0.23, 1)
  • Cubic-bezier
    (0.71, 0.41, 0.32, 0.76)

スプリング(Spring)

スプリング変速は、スプリング動作をシミュレートするために使用されます。このオプションは、ダイナミックでハリのある効果を切り替えに追加し、実際のスプリングが伸びてから元に戻る動作を模倣します。

Example
  • Tension 600, Friction 16
  • Tension 250, Friction 19

ユーザー指定の変速オプション(Custom Easing Options)

ユーザー指定変速の事前設定の作成

プロトパイでは、ユーザー指定変速の事前設定を作ることができます。独自のユーザー指定変速を作るには、次の手順に従います。

  1. 標準変速リストから標準変速オプションのいずれかを選択します。
  2. "+"ボタンをクリックし、新しい変速の事前設定を追加します。
  3. 新しい値を入力したり、制御点を希望する位置にドラッグして、期間及び事前定義値を修正します。
  4. 入力領域の上をダブルクリックして、変速事前設定の名前を変更します。
  5. 新しく作った変速事前設定は、ユーザー指定(Custom)の変速リストに保存されるので、後でいつでも再利用できます。

ユーザー指定変速の事前設定のエクスポートとインポート

ユーザー指定変速の事前設定を作った後は、jsonファイルファイルにエクスポートしてローカルコンピュータに保存できます。このファイルには、ユーザー指定(Custom)リストに現在あるすべての事前設定が含まれます。この機能を使用すると、簡単に変速の事前設定をチーム構成員と共有したり、後で使用するために保存することができるため、特に他のデバイスに切り替える場合に便利です。

[object Object]
Back To Top