原因と動き

特定のブレークポイントでアニメーションを表示する方法

特定のブレークポイントでアニメーションを開始する場合は、アニメーションを実行するブレークポイントを確認できます。デフォルトでは、アニメーションはすべてのブレークポイント (デスクトップ以上、タブレット、電話の横向き、電話の縦向き) でトリガーされます。

たとえば、マウス クリック インタラクションをデスクトップおよびブレークポイント上でのみ実行したい場合に役立ちます。そのシナリオでは、訪問者はマウスでインタラクションをアクティブ化できます。

同じクラスを持つすべての要素でアニメーションを開始する方法

同じクラスを共有するすべての要素でアニメーションを開始することを選択した場合は、そのクラスを持つ 1 つの要素でインタラクションを実装し、その後それをクラス全体に適用できます。

そのクラスを持つすべての要素にアニメーションを確立するには:

1. 要素にアニメーションを設定する
2. 進む トリガー設定 そして選ぶ クラス
3. アニメーションを適用するクラスを選択します。 クラス 落ちる

インタラクションの再利用について詳しくご覧ください。 

追加のアニメーション設定

スクロールオフセット

多数のページスクロールトリガー（「スクロールして表示」、「スクロール中（継続）」など）では、 オフセットこれにより、ページの特定のスクロール パーセンテージに達するまでインタラクションの開始が延期されます。スクロール オフセットが大きいほど、インタラクションが開始されるまでの訪問者のスクロール時間が長くなります。

遅れ

アニメーションを定義する機能があります 遅れ指定された遅延時間が経過した後にのみアニメーションが実行されるようになります。

スムージング

また、 スムージング アニメーションのスムージングは、マウスの動きにアニメーションが反応するペースを決定します。

アニメーションの設定方法

設定したトリガーに基づいてアニメーションを設定するには、 カスタムアニメーション または、既存のアニメーション（フェード、縮小、ゼリーなど）を選択します。

既存のアニメーションを設定する方法

既存のアニメーションには、 現れる＆消える そして 強調 デザイナーで事前設定されたアニメーション。アニメーションの各コンポーネントを個別に構築する代わりに、これらをより迅速に選択できます。

注記： 既存のアニメーションは、ページ トリガーではなく、要素トリガーに対してのみ設定できます。

既存のアニメーションを構成するには:

1. 開始する 要素トリガー (例: マウスをホバーする、スクロールして表示するなど)
2. 展開する アクション ドロップダウンから開始アクションセグメントを選択します（たとえば、マウスホバー要素トリガーを選択した場合は、 アクション ドロップダウンから ホバー時 セグメント）
3. どちらかのアクションを選択してください 現れて消える categoryまたは 強調 category

その後、方向と遅延をカスタマイズできます。 現れて消える アニメーション、または 強調 アニメーション。

カスタムアニメーションを設定する方法

カスタムアニメーションを構成するには:

1. 確立する 要素トリガー （例：マウスホバー、スクロールして表示など）または ページトリガー (例: ページの読み込み、ページのスクロールなど)
2. 公開する アクション 初期アクションセクションのドロップダウンから（例えば、マウスホバー要素トリガーを選択した場合は、 アクション ドロップダウンから ホバー時 セグメント）
3. 下の「アニメーションを開始」をクリックします カスタムアニメーション
4. クリック "プラス" に隣接 時間指定アニメーション
5. 名前 インタラクションパネルの上にアニメーションを配置します
6. 「プラス" の右側に 行動
7. 選択する グローバル変数、変換, スタイル、 または その他 ドロップダウンからのアニメーション

これに続いて、アニメーションのタイミングを微調整します。 アニメーションタイムライン.

アニメーションタイムラインの操作方法

新しいアニメーションを作成する場合でも、既存のアニメーションを修正する場合でも、アニメーション タイムラインでは、キーフレームを使用してさまざまな要素をアニメーション化できます。

アニメーションタイムラインにアクションを追加するには、まず アニメーションタイムラインその後、次の 2 つの方法のいずれかでアクションを追加できます。

• 「プラスタイムライン上部の「」アイコン
• クリック "プラスタイムライン内の「」アイコンをクリックすると、既存のアクションの前、アクション上、アクション中、アクション後にアクションがインラインで挿入されます。

図

たとえば、「ページのスクロール中」ページ トリガーのアニメーションを作成してみましょう。ページを下にスクロールすると、ヒーロー セクションのテキストが水平に移動し、不透明度が下がります。アニメーション タイムラインの緑の再生ヘッドは、ページの現在の位置 (0% – 100%) を示します。

時間指定アニメーションでは、他のトリガー (ミリ秒、秒など) がよく使用されますが、この例では、ページの現在のスクロール位置を示すためにパーセンテージが使用されています。ここで、0% はページの上部のスクロール位置を示し、100% はページの下部のスクロール位置を示します。 

これで、ページ上のさまざまなポイントでさまざまなアクションを統合できます。たとえば、0% スクロール位置に 4 つの手順を含めることができます。

• テキストの背景 — Shift 0px
• テキストの背景 — 透明度 100% (完全に表示)
• テキストの前景 — Shift 0px
• テキスト前景 — 透明度 100%

これらの手順により、テキストの背景とテキストの前景が 0px (移動なし) に配置され、透明度が 100% (完全に表示) に設定されます。訪問者がページの上部に到達すると、テキストの背景と前景が完全に表示され、元の場所に残ります。

100% スクロール位置で 4 つの方法を導入することもできます。

• テキスト背景 — Shift 900px
• テキスト背景 - 透明度 0% (完全に透明)
• テキスト前景 — Shift 900px
• テキスト前景 — 透明度 0%

この例では、各要素は任意の方向に 900 ピクセルシフトされ、透明度は 0% に設定されています。スクロール アニメーションの最終的なアクションを確認しましょう。

これらの手順により、テキストの背景とテキストの前景の位置が 900 ピクセルに調整され (いずれの方向にも 900 ピクセルシフト)、透明度が 0% (完全に透明) に設定されます。訪問者がページの下部に到達すると、テキストの背景と前景は完全に透明になり、元の位置からページの右または左に 900 ピクセルシフトされます。

プロのヒント: アニメーションタイムライン上で複数のアクションを選択するには2つの方法があります。複数のアクションを選択するには 連続した アクション、長押し シフト それらのアクションを選択します。複数選択するには、 非連続 アクション、プレス 指示 (Macの場合) または コントロール (Windows の場合) アクションを選択します。

行動目標について

デフォルトでは、アニメーション タイムラインに追加した各アクションは、選択した要素に影響します。ただし、次の 2 つの方法のいずれかでアクションのフォーカスを変更できます。

• アクションの影響を受けるターゲット要素を置換する
• アクションが選択された要素のみに影響を与えるか、同じcategoryを共有するすべての要素に影響を与えるか、またはインタラクショントリガー自体に影響を与えるかを決定します。

ターゲット要素の変更

アクションの影響を受ける要素を変更するには:

1. アニメーションタイムライン内のアクションを右クリック
2. クリック ターゲットを変更
3. キャンバス上の別の要素を選択してアクションを適用します

重要： アニメーション タイムライン内での変更は、アニメーション シーケンスをアクティブにするすべてのインタラクションに影響します。

アクションが単一の要素、要素のcategory、またはインタラクショントリガーにどのように影響するかを決定する

アクションを作成したら、このアクションが次のものに影響を与えるかどうかを選択できます。

• のみ 選択された要素
• 選択された要素と同じcategoryを共有するすべての要素
• インタラクショントリガー自体

選択した要素のみをターゲットにする

選択した要素は、あなたが形成するあらゆるアニメーションアクションの標準ターゲットです。選択した要素に影響を与えるように設定されたアクションは、 着実に 特定の要素に影響を与えます。その結果、選択した要素に影響を与えるアクションを含むアニメーションを再利用すると、トリガー要素に関係なく、アクションはその要素に一貫して影響を与えます。

選択した要素と同じcategoryを持つすべての要素をターゲットにする

また、 category 選択した要素の。これにより、アニメーション アクションは、選択した要素と同じ category を共有するすべての要素に影響します。

この選択は、ページが読み込まれたときに複数の要素を並行して移動させたい場合に役立ちます。これを実現するには、すべての要素に同じ category を割り当て、コンボ カテゴリを使用してページ上のさまざまな位置に移動します。その後、基本の category で同じアニメーション アクションを使用して、各要素を同じように、ただし異なる初期位置から移動させることができます。

また、影響を受ける要素を、インタラクション トリガーと同じ category を共有する子、兄弟、または親のみに制限することもできます。

選択した要素と同じcategoryを共有する子供、兄弟、または両親をターゲットにする

トリガー要素の子、兄弟、または親であるかどうかを指定することにより、アクションの影響を受けるクラスを定義できます。

このオプションは、同じcategoryを共有するボタン要素内のすべての矢印をホバー時にアニメーション化したい場合などに便利です。同じcategoryを持つすべての要素にアニメーションアクションを統合すると、1つのボタンにホバーすると、そのページ上のすべてのボタン内のすべての矢印がアニメーション化されます。その瞬間にホバーしているボタンにアニメーションアクションを制限するには、 影響する メニューから「カテゴリー」を選択します。その後、 カテゴリー ドロップダウンから「この category を持つ子供のみ」を選択します。

「このクラスの兄弟のみ」オプションは、アニメーション化したい要素がメニュー ドロップダウンやポップアップ モーダルなどのトリガー要素の兄弟である場合に適しています。同様に、アニメーション化の対象となる要素がトリガー要素の親である場合は、「この category の親のみ」オプションを利用できます。

注記： クラスベースのアニメーションを作成する前に、要素に category を属性付けてください。特定のクラスを含まない要素に適用されるアクションでは、「category」を選択できません。

相互作用のトリガーをターゲットにする戦略

また、次のような業務も開始できます。 ユニークに 影響を与える 相互作用のきっかけ. その後、アニメーションを再利用する以降のインタラクションでは、アニメーションは以前のターゲット要素を新しいインタラクションのトリガー要素に置き換えます。これにより、新しいアニメーションを作成する必要なく、同じアニメーションを任意の要素にすばやく適用できます。

コメント： 「インタラクションのトリガー」オプションは、インタラクションのトリガー要素で操作が実行された場合にのみアクセスできます。したがって、このオプションはページ トリガーによってプロンプトされるアニメーションでは提供されません。

アクティブなアニメーションを変更する

既存のアニメーションを変更するには、インタラクションパネルに移動し、アニメーションを選択して設定を表示します。アニメーションのタイトルにマウスを移動し、設定アイコン「歯車” をクリックします。このアクションにより、その特定のアニメーションのアニメーション タイムラインが表示されます。

代替情報源

• 交流の採用に関する知識を広げる
• 補間、イージング、スムージングについて詳しく知る
• スクロールすると要素が水平方向にシフトしてフェードする継続的なアニメーションを設定する手順を学びます。

使用されていないトリガーとアニメーションを削除して破棄する

トリガーとアニメーションを消去する手順

インタラクション パネルから、トリガーやアニメーションを削除することができます。削除すると、トリガーやアニメーションは特定のターゲット要素やページ アクションにリンクされなくなります。トリガーやアニメーションを削除するには、次の手順を実行します。

1. 進む インタラクションパネル
2. 削除したいアニメーションまたはトリガーの上にマウスを置きます
3. を選択 "ごみトリガー名の横にある「」アイコン

述べる： インタラクション パネルからトリガーを削除しても、それ以前に接続されていたアニメーションは削除されません。単にその特定のトリガーからアニメーションが切り離されるだけです。その後は、新しいトリガーを構成するときにアニメーションを引き続き利用できます。

ウェブサイトからトリガーとアニメーションを削除するプロセス

アニメーションが削除されたり、接続されたアニメーションのないトリガーがインタラクションパネルから削除されたりしても、トリガーやアニメーションがインタラクションパネルから完全に削除されるわけではありません。 サイトこれは、以前に作成したアニメーションを別の要素またはページ トリガーで再利用できる可能性があるためです。ただし、サイトの最適化とパフォーマンスの向上のために、使用されていないトリガーまたはアニメーションをクリーンアップすることを検討してください。 

未使用のインタラクションをクリアする際に、削除するトリガーを選択することはできませんが、どのアニメーションを保持または破棄するかを決定することはできます。未使用のトリガーはすべて、未使用のインタラクションのクリーンアップ プロセス中に消去されます。

ヒント： アニメーションを完全に削除 (クリーンアップ) するオプションは、アニメーションが要素またはページ トリガーにリンクされていない場合にのみ可能です。最初に、インタラクション パネルで任意の要素またはページ トリガーからアニメーションを削除し、次に Web サイトからアニメーションを削除します。

使用されていないトリガーとアニメーションを削除するには:

1. アクセス インタラクションパネル
2. プレス 掃除 パネルの上部にある
3. 破棄/保持するアニメーションを決定する
4. クリック 消去