開発に携わる前は、After Effects で一連のモーション グラフィックスの仕事をしていました。 しかし、そのような背景があっても、ウェブ上でアニメーション化することはかなり不可解でした.
ビデオ グラフィックは、特定の比率内で設計され、エクスポートされます。 終わり！ しかし、ウェブには「エクスポート設定」がありません。 コードを世界にプッシュするだけで、アニメーションは着陸するデバイスに適応する必要があります。
それでは、レスポンシブ アニメーションについてお話しましょう。 野生の野生のウェブでアニメーション化するにはどうすればよいでしょうか? 一般的なアプローチ、GSAP 固有のヒント、動作原理について説明します。 いくつかのフレーミングから始めましょう…
このアニメーションはどのように使用されますか?
レスポンシブ アニメーションに関する Zach Saucier の記事 コードに飛び込む前に、一歩下がって最終結果について考えることをお勧めします。
アニメーションは、アプリケーションの複数の部分で繰り返されるモジュールになりますか? スケーリングする必要はありますか？ これを念頭に置いておくと、アニメーションをスケーリングする方法を決定し、労力を無駄にしないようにすることができます。
これは素晴らしいアドバイスです。 あ 巨大な レスポンシブ アニメーションの設計の一部は、そのアニメーションをスケーリングする必要があるかどうか、またどのようにスケーリングする必要があるかを把握し、最初から適切なアプローチを選択することです。
ほとんどのアニメーションは、次のカテゴリに分類されます。
- 一定： すべてのデバイスで同じサイズと縦横比を維持するアイコンやローダーなどのアニメーション。 ここで心配することは何もありません！ そこにいくつかのピクセル値をハードコーディングして、一日を始めましょう。
- 流体： さまざまなデバイス間で流動的に適応する必要があるアニメーション。 ほとんどのレイアウト アニメーションは、このカテゴリに分類されます。
- 対象： 特定のデバイスまたは画面サイズに固有のアニメーション、または特定のブレークポイントで大幅に変化するアニメーション (デスクトップのみのアニメーションや、タッチやホバーなどのデバイス固有の操作に依存する操作など)。
流動的でターゲットを絞ったアニメーションには、さまざまな考え方とソリューションが必要です。 見てみましょう…
流体アニメーション
As アンディ・ベル 言います： ブラウザーのマイクロマネージャーではなく、ブラウザーの指導者になりましょう — ブラウザーに確かなルールとヒントを与えてから、ブラウザーにアクセスする人々のために正しい決定を下させてください。
（ここにあります スライド そのプレゼンテーションから。）
滑らかなアニメーションとは、ブラウザーに大変な作業を任せることです。 多くのアニメーションは、最初から適切な単位を使用するだけで、さまざまなコンテキストに簡単に適応できます。 このペンのサイズを変更すると、アニメーションが ビューポートユニット ブラウザの調整に合わせて流動的にスケーリングします。
紫色のボックスは、別のブレークポイントで幅も変化しますが、パーセンテージを使用して移動しているため、アニメーションもそれに合わせてスケーリングされます。
次のようなレイアウト プロパティのアニメーション化 left & top レイアウトのリフローとぎくしゃくした「ぎくしゃくした」アニメーションを引き起こす可能性があるため、可能な場合は変換と不透明度に固執してください。
ただし、これらのユニットに限定されているわけではありません。他の可能性を見てみましょう。
SVG ユニット
SVG での作業で私が気に入っている点の XNUMX つは、すぐに応答するアニメーション用の SVG ユーザー ユニットを使用できることです。 手がかりは本当に名前にあります— スケーラブル ベクター グラフィック。 SVG ランドでは、すべての要素が特定の座標にプロットされます。 SVG 空間は、要素を配置できる無限のグラフ用紙のようなものです。 の viewBox 見ることができる方眼紙の寸法を定義します。
viewBox="0 0 100 50”この次のデモでは、SVG viewBox is 100 ユニット幅と 50 ユニットの高さ。 これは、要素をアニメーション化する場合を意味します 100 x 軸に沿って単位を移動すると、その SVG がどれほど大きくても小さくても、親 SVG の幅全体で常に移動します。 デモのサイズを変更して確認します。
親コンテナーの幅に基づいて子要素をアニメーション化することは、HTML ランドでは少しトリッキーです。 これまでは、JavaScript を使用して親の幅を取得する必要がありましたが、アニメーションを作成する場合は簡単です。 from 変換された位置ですが、アニメーション化するときは少し面倒です to 次のデモでわかるように、どこかに。 エンドポイントが変換された位置であり、画面のサイズを変更する場合、その位置を手動で調整する必要があります。 ぐちゃぐちゃ… 🤔
サイズ変更時に値を調整する場合は、忘れずに デバウンス、またはブラウザのサイズ変更が完了した後に関数を起動することさえできます。 リサイズ リスナーは毎秒大量のイベントを発生させるため、各イベントのプロパティを更新することはブラウザーにとって大変な作業です。
しかし、このアニメーションのスピードバンプはすぐに過去のものになるでしょう! ドラムロールお願いします… 🥁
コンテナユニット！ 素敵なもの。 私がこれを書いている時点では、それらは Chrome と Safari でしか動作しません — しかし、あなたがこれを読む頃には Firefox もあるでしょう。 この次のデモでそれらの動作を確認してください。 それらの小さな若者たちが行くのを見てください！ 親要素を基準にしたアニメーションって、ワクワクするじゃないですか！
このブラウザのサポートデータは 使ってもいいですか、詳細があります。 数字は、ブラウザがそのバージョン以降の機能をサポートしていることを示します。
デスクトップ
| クロム | Firefoxの | IE | エッジ（Edge） | Safari |
|---|---|---|---|---|
| 105 | いいえ | いいえ | 105 | 16.0 |
モバイル/タブレット
| Android Chrome | AndroidのFirefoxの | Android | iOSのSafariの |
|---|---|---|---|
| 106 | いいえ | 106 | 16.0 |
FLIP による滑らかなレイアウト遷移
前述したように、SVG ランドでは、すべての要素が XNUMX つのグリッドにきちんと配置されており、レスポンシブに移動するのは非常に簡単です。 HTML ランドでは、はるかに複雑です。 レスポンシブ レイアウトを構築するために、さまざまな配置方法とレイアウト システムを使用します。 Web 上でアニメーションを作成する際の主な問題の XNUMX つは、 たくさん のレイアウト変更はアニメーション化できません。 要素を位置から移動する必要があるかもしれません relative 〜へ fixed、またはフレックス コンテナの一部の子をビューポート内でスムーズにシャッフルする必要があります。 場合によっては、要素の親を変更して、DOM 内のまったく新しい位置に移動する必要さえあるかもしれません。
トリッキーですね。
良い。 FLIP テクニックが役に立ちます。 これらの不可能なことを簡単にアニメーション化できます。 基本的な前提は次のとおりです。
- 名: トランジションに含まれる要素の初期位置を取得します。
- 姓: 要素を移動し、最終的な位置をつかみます。
- 反転: 最初の状態と最後の状態の間の変化を調べ、変換を適用して要素を元の位置に反転させます。 これにより、要素がまだ 最初の 位置ですが、実際にはそうではありません。
- プレイ: 反転された変換を削除し、それらにアニメートします。 偽造 最初の への状態 last でのみ停止させることができます。
これは、GSAP の FLIP プラグインを使用したデモで、面倒な作業をすべて代行してくれます。
バニラの実装についてもう少し理解したい場合は、Paul Lewis の ブログ投稿 — 彼は FLIP テクニックの頭脳です。
SVG の柔軟なスケーリング
あなたは私を手に入れました…これはそうではありません 本当に アニメーションのヒント。 しかし、ステージを正しく設定することは、優れたアニメーションにとって不可欠です! SVG はデフォルトで非常にうまくスケーリングしますが、さらにスケーリングする方法を制御できます。 preserveAspectRatioこれは、SVG 要素の縦横比と viewBox 縦横比が違います。 これは、 background-position & background-size CSS のプロパティ。 宣言は、アラインメント値 (background-position）であり、a 大会 or スライス 参照 （background-size).
それらのミートとスライスの参照については— slice のようなものです background size: cover, meet のようなものです background-size: contain.
preserveAspectRatio="MidYMax slice"— x 軸の中央、y 軸の下に位置合わせし、拡大してビューポート全体をカバーします。preserveAspectRatio="MinYMin meet"— x 軸の左、y 軸の上に揃え、全体を維持したまま拡大します。viewBox可視。
トム・ミラー を使用して、これをさらに一歩進めます overflow: visible 高さを制限したまま「ステージ左」と「ステージ右」を表示する CSS および包含要素:
レスポンシブ SVG アニメーションの場合、SVG ビューボックスを使用して、ブラウザーの幅がそれよりも広い場合に左右に SVG アニメーションをより多く表示しながら、特定のブラウザー幅の下でトリミングおよびスケーリングするビューを作成すると便利です。しきい値。 これは、SVG にオーバーフロー ビジブルを追加し、それを
max-heightSVG が垂直方向に大きくなりすぎるのを防ぐためのラッパー。
柔軟にキャンバスをスケーリング
Canvas は、複雑なアニメーションに対してはるかに優れたパフォーマンスを発揮します。 たくさん SVG や HTML DOM をアニメーション化するよりも可動部分をアニメーション化する必要がありますが、本質的により複雑でもあります。 あなたはそれらのパフォーマンスの向上のために働かなければなりません! 素敵なレスポンシブ ユニットとすぐに使えるスケーリングを備えた SVG とは異なり、 ボスの周りにいて、少し細かく管理する必要があります。
セットアップが好き SVG とほぼ同じように機能するように (私は偏っているかもしれません)、適切な単位システムと固定されたアスペクト比を使用します。 また、何かが変更されるたびに再描画する必要があるため、ブラウザのサイズ変更またはデバウンスが完了するまで再描画を遅らせることを忘れないでください!
ジョージ・フランシス これも合わせて 素敵な小さな図書館 これにより、キャンバスを定義できます viewBox 属性と preserveAspectRatio — SVG とまったく同じです。
ターゲットを絞ったアニメーション
アニメーションに対して、より流動的でより直接的なアプローチが必要になる場合があります。 モバイル デバイスは、デスクトップ マシンよりもはるかに少ないスペースであり、アニメーション ジュースのパフォーマンスも少なくなります。 したがって、モバイル ユーザーに縮小したアニメーションを提供することは理にかなっています。
モバイル向けの最もレスポンシブなアニメーションは、アニメーションがまったくない場合もあります! モバイル UX では、アニメーションが終了するのを待つよりも、ユーザーがコンテンツをすばやく消費できるようにすることを優先します。 モバイル アニメーションは、コンテンツ、ナビゲーション、インタラクションを遅らせるのではなく、強化する必要があります。 エリック・ヴァン・ホルツ
これを行うために、CSS でスタイルを設定するときと同じように、メディア クエリを使用して特定のビューポート サイズをターゲットにすることができます。 これは、メディアクエリを使用して処理されている CSS アニメーションと、で処理されている GSAP アニメーションを示す簡単なデモです。 gsap.matchMedia():
このデモのシンプルさには、たくさんの魔法が隠されています! JavaScript アニメーションは、特定の XNUMX つの画面サイズのみで正しく機能するために、もう少しセットアップとクリーンアップが必要です。 私は過去に、人々がCSSでアニメーションを非表示にしただけの恐怖を見てきました opacity: 0、しかし、アニメーションはまだバックグラウンドでリソースを使い果たしています。 😱
画面サイズが一致しなくなった場合は、ガベージ コレクションのためにアニメーションを強制終了して解放する必要があります。また、アニメーションの影響を受ける要素は、他のスタイルとの競合を防ぐために、モーションによって導入されたインライン スタイルをすべてクリアする必要があります。 まで gsap.matchMedia()、これは面倒なプロセスでした。 各アニメーションを追跡し、これらすべてを手動で管理する必要がありました。
gsap.matchMedia() 代わりに、特定の場合にのみ実行される関数にアニメーション コードを簡単に組み込むことができます。 メディアクエリ 一致します。 その後、一致しなくなると、すべての GSAP アニメーションと スクロールトリガー その関数では、自動的に元に戻されます。 アニメーションがポップされるメディア クエリは、すべての面倒な作業を行います。 それは GSAP 3.11.0 にあり、ゲームチェンジャーです!
画面サイズだけに制約されているわけではありません。 あります そこにはたくさんのメディア機能があります 引っ掛ける！
(prefers-reduced-motion) /* find out if the user would prefer less animation */
(orientation: portrait) /* check the user's device orientation */
(max-resolution: 300dpi) /* check the pixel density of the device */次のデモでは、チェックを追加しました prefers-reduced-motion アニメーションを見て方向感覚を失ったユーザーが、ぐるぐる回ることに煩わされることがないように。
また、Tom Miller の他の楽しいデモをチェックしてください。彼は、デバイスのアスペクト比を使用してアニメーションを調整しています。
既成概念にとらわれず、画面サイズを超えて考える
レスポンシブ アニメーションについて考えるには、画面サイズだけではありません。 さまざまなデバイスがさまざまな対話を可能にし、それを考慮しないと、簡単に混乱してしまいます. CSS でホバー状態を作成している場合は、 hover ユーザーの 主要な 入力メカニズムは要素の上に置くことができます。
@media (hover: hover) {
/* CSS hover state here */
}からのアドバイス ジェイク・ホワイトリー:
多くの場合、ブラウザの幅に基づいてアニメーションを作成し、デスクトップ ユーザーがホバー状態を望んでいるという単純な仮定を立てています。 個人的には、過去に 1024 ピクセルを超えるデスクトップ レイアウトに切り替えるという問題がたくさんありましたが、JS でタッチ検出を行う可能性があり、レイアウトがデスクトップ用であるのに JS がモバイル用であるという不一致につながりました。 最近では、ホバーとポインターに頼って同等性を確保し、iPad Pro または Windows サーフェスを処理します (カバーが下がっているかどうかによってポインターの種類が変わる可能性があります)。
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)次に、CSS レイアウト クエリと JavaScript クエリを組み合わせて、入力デバイスを主な要因と見なします。 。 反対ではなく幅で。
ScrollTrigger のヒント
GSAP を使用している場合 ScrollTrigger プラグイン、デバイスのタッチ機能を簡単に識別するためにフックできる便利な小さなユーティリティがあります。 ScrollTrigger.isTouch.
0– さわらないで (ポインター/マウスのみ)1– タッチオンリー デバイス（電話など）2– デバイスは受け入れることができます touch 入力と マウスポインター (Windows タブレットなど)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}レスポンシブ スクロール トリガー アニメーションのもう XNUMX つのヒント…
以下のデモでは、画像ギャラリーを水平方向に移動していますが、画面サイズによって幅が変わります。 スクラブされたアニメーションの途中で画面のサイズを変更すると、アニメーションが壊れたり、値が古くなる可能性があります。 これはよくあるスピードバンプですが、簡単に解決できます! 画面サイズに依存する計算を関数値にポップして設定する invalidateOnRefresh:true. そうすれば、ブラウザーのサイズが変更されたときに ScrollTrigger がその値を再計算します。
おまけの GSAP オタク向けヒント！
モバイル デバイスでは、通常、スクロールするとブラウザーのアドレス バーが表示されたり非表示になったりします。 これはサイズ変更イベントとしてカウントされ、 ScrollTrigger.refresh(). アニメーションにジャンプが発生する可能性があるため、これは理想的ではない場合があります。 GSAP 3.10を追加 ignoreMobileResize. ブラウザ バーの動作には影響しませんが、 ScrollTrigger.refresh() 発砲から タッチ専用デバイスでの小さな縦方向のサイズ変更。
ScrollTrigger.config({
ignoreMobileResize: true
});運動原理
Web でモーションを操作する際に考慮すべきいくつかのベスト プラクティスを紹介したいと思います。
距離とイージング
レスポンシブ アニメーションで忘れがちな小さいながらも重要なことは、速度、運動量、距離の関係です。 良いアニメーション 現実の世界を模倣する必要があります 現実の世界では、より長い距離をカバーするのにより長い時間がかかります。 アニメーションが移動する距離に注意を払い、使用する継続時間とイージングが他のアニメーションとの関連で意味があることを確認してください。
多くの場合、さらに劇的なイージングを要素に適用して、勢いの増した様子を示すことができます。
特定のユースケースでは、画面幅に基づいて継続時間をより動的に調整すると役立つ場合があります。 この次のデモでは、 gsap.utils 現在から返される値をクランプする window.innerWidth 妥当な範囲に収まったら、その数値を持続時間にマッピングします。
間隔と数量
留意すべきもう XNUMX つの点は、さまざまな画面サイズでの要素の間隔と量です。 引用 スティーブン・ショー:
何らかの環境アニメーション (視差、雲、木、紙吹雪、装飾など) がウィンドウの周囲に間隔を置いて配置されている場合は、それらが画面サイズに応じてスケーリングおよび/または量を調整していることを確認してください。 大画面ではおそらく全体に広がるより多くの要素が必要ですが、小さな画面では同じ効果を得るために必要な要素はわずかです。
私はどのように大好きです オファー・ヴィシュニア はアニメーションを舞台と考えています。 要素の追加と削除は形式的なものである必要はなく、全体的な振り付けの一部になる可能性があります。
レスポンシブ アニメーションをデザインするときの課題は、同じコンテンツをビューポートに詰め込んで「収まる」ようにする方法ではなく、既存のコンテンツ セットをキュレートして同じ意図を伝える方法です。 つまり、どのコンテンツを追加し、どのコンテンツを削除するかを意識的に選択することを意味します。 通常、アニメーションの世界では、フレームに飛び込んだり飛び出したりするだけではありません。 要素を「ステージ」に出入りするものと考えて、視覚的およびテーマ的に意味のある方法でその遷移をアニメーション化することは理にかなっています。
そして、それがたくさんです。 もっとレスポンシブなアニメーションのヒントがあれば、コメント セクションに投稿してください。 何か非常に役立つものがあれば、この情報の大要に追加します!
補遺
からもう一つ注意事項 トム・ミラー この記事を準備していたとき：
レスポンシブ アニメーションの記事にこのヒントを出すのはおそらく遅すぎますが、「ビルドする前にすべてのアニメーションを完成させる」ことを強くお勧めします。 現在、一部のサイトアニメーションを「モバイル版」に改造中です。 ありがとうございます
gsap.matchMedia…しかし、最初から別のモバイル レイアウト/アニメーションがあることを知っていたらよかったのにと思います。
「事前に計画を立てる」ためのこのヒントが、土壇場で出されたことを、私たちは皆、感謝していると思います。 ありがとう、トム。
