INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

Menu

イージング(イージング)

ProtoPieのイージング機能を使用して、現実的で動きのあるアニメーションを強化しましょう。

現実世界では、物体が急に動いたり止まったりすることはありません。そのため、自然なアニメーションを実現するには、プロトタイプにイージングを組み込むことが極めて重要です。

イージング関数を取り入れることで、視覚的に魅力的で引き込まれるようなトランジションを作成し、以下の例のように、デザインにリアルさと自然な動きを加えることができます。


{'_type': 'localeString', 'en': 'bunny vs wolf game start'}

この例でイージングがどのように使用されたかについては、最新のモバイルゲーム・プロトタイピング・マスタークラスで学びましょう。

標準的なイージングオプション

リニア(Linear)

リニアイージングでは、アニメーション中の加速や減速はありません。オブジェクトはスムーズかつ一定に動き、トランジション全体を通じて安定したペースを維持します。

イーズ(Ease)

イーズイージングは、トランジションの加速と減速を制御するために使用されます。アニメーション化されるオブジェクト、または状態間を遷移する要素に、滑らかさと自然な動きを与えます。

イーズイン(Ease In)

イーズインイージングは、トランジションの初期加速を制御するために使用されます。アニメーションの開始を緩やかかつ穏やかにすることに焦点を当てており、オブジェクトや要素はゆっくり動き始め、アニメーションが進むにつれて速度を上げていきます。

イーズアウト(Ease Out)

イーズアウトイージングは、トランジションの減速を制御するために使用されます。アニメーションが終了に近づくにつれて、徐々にスムーズに動きを遅くすることに焦点を当てています。

イーズインアウト(Ease In Out)

イーズインアウトイージングは、スムーズでバランスの取れたトランジションを作成するために使用されます。イーズインイーズアウトの両方の特性を組み合わせ、開始時は緩やかに加速し、中間は一定の速度を保ち、アニメーションの終了に向けて緩やかに減速します。

イーズイン(Ease In)

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)
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)

イーズイン(Ease In)

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)
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)

イーズアウト(Ease Out)

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)
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)

イーズアウト(Ease Out)

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)
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)

イーズインアウト(Ease In Out)

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)
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)

イーズインアウト(Ease In Out)

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)
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)

三次ベジェ(Cubic Bezier)

三次ベジェイージングは、トランジションの加速と減速を精密に制御するために使用されます。4つのポイント(2つのアンカーポイントと2つのコントロールポイント)を調整して独自のカーブを定義できるため、柔軟性に優れ、ユニークで複雑なモーション効果を作成できます。

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

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

スプリング(Spring)

スプリングイージングは、バネの動きをシミュレートするために使用されます。トランジションにダイナミックで弾むような効果を加え、物理的なバネが引き伸ばされて放されるときの挙動を再現します。

Tension 600, Friction 16
Tension 250, Friction 19

Tension 600, Friction 16
Tension 250, Friction 19

カスタムイージングオプション

カスタムイージングプリセットの作成

ProtoPieでは、カスタムイージングプリセットを作成することができます。独自のカスタムイージングを作成するには、以下の手順に従ってください。

  1. 標準イージングリストから標準イージングオプションを選択します。

  2. 「+」ボタンをクリックして、新しいイージングプリセットを追加します。

  3. 新しい値を入力するか、コントロールポイントを目的の位置までドラッグして、デュレーションと定義済みの値を変更します。

  4. 入力エリアの上をダブルクリックして、イージングプリセットの名前を変更します。

  5. 新しく作成されたイージングプリセットはカスタムイージングリストに保存され、いつでも簡単に使用できるようになります。

カスタムイージングプリセットの書き出しと読み込み

新しいカスタムイージングプリセットを作成した後、それを.jsonファイルとしてローカルコンピューターに書き出すことができます。このファイルには、現在「カスタム」リストにあるすべてのプリセットが含まれます。この機能により、イージングプリセットをチームメンバーと簡単に共有したり、別のデバイスに切り替える場合に備えて将来の使用のために保管したりできます。


{'_type': 'localeString', 'en': 'Exporting & importing custom easing presets.'}