Appleの製品ページは、スムーズなアニメーションで知られています。たとえば、ページを下にスクロールすると、製品が視界にスライドし、MacBookがオンになり、iPhoneが回転します。これらはすべてハードウェアを紹介し、ソフトウェアを示し、製品の使用方法についてインタラクティブなストーリーを伝えます。

iPad ProモバイルWebエクスペリエンスのこのビデオをご覧ください。

そこにある効果の多くは、HTMLとCSSのみを使用して作成されていません。それで、あなたは尋ねますか？まあ、これは把握するのが少し難しいかもしれません。ブラウザのdevtoolsを使用しても、通常は見ることが不可能であるため、常に答えを明らかにするとは限りません<canvas></canvas>要素の外側(cè)のコンテンツ。

私たち自身のプロジェクトでこれらの魔法の効果のいくつかを再現(xiàn)できるように、効果の1つを掘り下げて、それがどのように作られているかを見てみましょう。具體的には、AirPods Pro製品ページとヒーロー畫像から動的な光効果をコピーしましょう。

基本概念

アイデアは、一連の高速な畫像のようにアニメーションを作成することです。本をひっくり返すようなものです！複雑なWebGLシナリオや高度なJavaScriptライブラリは必要ありません。

ユーザーのスクロール位置と各フレームを同期することにより、ユーザーがページを下にスクロールするときにアニメーションを再生できます。

タグとスタイルから始めます

この効果のためのHTMLとCSSは非常に単純です。<canvas></canvas>要素內(nèi)では、IDを割り當(dāng)ててJavaScriptを使用して制御します。

CSSでは、ドキュメントの高さを100VHに設(shè)定し、コンテンツの高さを100VHより5倍に設(shè)定して、機(jī)能させるために必要なスクロール長を提供します。また、ドキュメントの背景色を畫像の背景色と一致させます。私たちがしなければならない最後のことは位置です<canvas></canvas>要素、中央に、最大幅と高さを制限して、ビューポートのサイズを超えないようにします。

 <code>html { height: 100vh; } body { background: #000; height: 500vh; } canvas { position: fixed; left: 50%; top: 50%; max-height: 100vh; max-width: 100vw; transform: translate(-50%, -50%); }</code>

これで、ページを下にスクロールできます（コンテンツがビューポートの高さを超えない場合でも）、私たちの<canvas></canvas>まだビューポートの上部にあります。 HTMLとCSSに必要なのはこれだけです。

畫像の読み込みを続けましょう。

正しい畫像を取得します

畫像シーケンスを使用するため（再び本をひっくり返すようなもの）、ファイル名に連続して番號が付けられていると仮定します（つまり、0001.jpg、0002.jpg、0003.jpgなど）。

ユーザーのスクロール位置に基づいて、目的の畫像ファイルのパスと數(shù)を返す関數(shù)を書きます。

 <code>const currentFrame = index => ( `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, '0')}.jpg` )</code>

畫像番號は整數(shù)であるため、ファイル名に合わせて4桁に到達(dá)するまでインデックスに先行するために、文字列に変換し、 padStart(4, '0')を使用する必要があります。たとえば、1をこの関數(shù)に渡すと0001が返されます。

これにより、畫像パスを処理する方法が得られます。これはです<canvas></canvas>要素に描かれたシーケンスの最初の畫像：

ご覧のとおり、最初の畫像はページ上にあります。この時(shí)點(diǎn)で、それは単なる靜的ファイルです。私たちが望むのは、ユーザーのスクロール位置に基づいて更新することです。 1つの畫像ファイルをロードするだけでなく、別の畫像ファイルを読み込んで置き換えます。私たちはなりたいと思っています<canvas></canvas>上に畫像を描畫し、シーケンスの次の畫像で図面を更新します（ただし、後で説明します）。

私たちが渡す數(shù)字に基づいて畫像ファイルのパスを生成する関數(shù)を作成したため、今行う必要があるのは、ユーザーのスクロール位置を追跡し、そのスクロール位置に対応する畫像フレームを決定することです。

畫像をユーザーのスクロールの進(jìn)行狀況に接続します

シーケンスで渡す必要がある（したがって、どの畫像をロードしたいか）を理解するには、ユーザーのスクロールの進(jìn)行狀況を計(jì)算する必要があります。イベントリスナーを作成してイベントを追跡し、いくつかの數(shù)學(xué)的計(jì)算を処理してロードする畫像を計(jì)算します。

私たちは知る必要があります：

• スクロールが始まり、終了する場所
• ユーザースクロールの進(jìn)行狀況（つまり、ユーザーがスクロールダウンするページの割合）
• ユーザースクロールの進(jìn)行狀況に対応する畫像

scrollTopを使用して、要素の垂直スクロール位置（この場合はドキュメントの上部）を取得します。これは、開始値として使用されます。ドキュメントスクロールの高さからウィンドウの高さを差し引くことにより、終了（または最大）値を取得します。そこから、 scrollTop値をユーザーが下にスクロールできる最大値で除算します。これにより、ユーザーのスクロールの進(jìn)行狀況が得られます。

次に、その位置の正しい畫像を返すために、畫像番號のシーケンスに対応するインデックス番號にそのスクロールの進(jìn)行狀況を変換する必要があります。これを行うには、進(jìn)捗數(shù)にフレームの數(shù)（畫像數(shù)）を掛けることで行うことができます。 Math.floor()を使用してその數(shù)を削減し、 Math.min()とフレームの最大數(shù)でwrapして、フレームの総數(shù)を超えないようにします。

 <code>window.addEventListener('scroll', () => {  const scrollTop = html.scrollTop; const maxScrollTop = html.scrollHeight - window.innerHeight; const scrollFraction = scrollTop / maxScrollTop; const frameIndex = Math.min(  frameCount - 1,  Math.floor(scrollFraction * frameCount) ); });</code>

正しい畫像で更新します<canvas></canvas>

ユーザーのスクロールの進(jìn)行狀況が変化したときに、どの畫像を描畫するかがわかりました。これはです<canvas></canvas>魔法が機(jī)能する場所。<canvas></canvas>ゲームやアニメーションからモデルジェネレーターのデザインまで、そしてその間にすべてを構(gòu)築するための多くのクールな機(jī)能があります！

これらの機(jī)能の1つは、ブラウザと連攜して更新するrequestAnimationFrameと呼ばれる方法です<canvas></canvas>、ではなく直接畫像ファイルを使用している場合<canvas></canvas>、これはできません。これが私の選択です<canvas></canvas>たとえばの代わりにメソッドimg要素または背景畫像<div>理由。 <code>requestAnimationFrame 、ブラウザのリフレッシュレートと一致し、WebGLを使用してデバイスのビデオカードまたは統(tǒng)合グラフィックカードとレンダリングすることにより、ハードウェアの加速を有効にします。言い換えれば、フレーム間で非常にスムーズな移行を取得します。畫像はちらつきません！

ユーザーがページの上または下にスクロールするときに、スクロールイベントリスナーのこの関數(shù)を呼び出して畫像を交換します。 requestAnimationFrameがコールバックパラメーターを取得するため、関數(shù)を渡して畫像ソースを更新し、<canvas></canvas>新しい畫像を描く：

 <code>requestAnimationFrame(() => updateImage(frameIndex 1))</code>

畫像frameIndex 0001.jpgで始まる一方で、スクロールの進(jìn)行計(jì)算は実際には0から始まります。これにより、2つの値が常に整列されることが保証されます。

更新畫像に渡すコールバック関數(shù)は次のように見えます：

 <code>const updateImage = index => { img.src = currentFrame(index); context.drawImage(img, 0, 0); }</code>

frameIndex関數(shù)に渡します。これにより、シーケンスの次の畫像を使用して畫像ソースが設(shè)定されます。<canvas></canvas>要素に。

プリロード畫像の方が優(yōu)れています

技術(shù)的には、私たちは今完了です。しかし、どうぞ、私たちはもっとうまくやることができます！たとえば、高速スクロールは、畫像フレーム間に少し遅れを起こす可能性があります。これは、新しい畫像ごとに新しいネットワークリクエストが送信され、新しいダウンロードが必要なためです。

新しいネットワークリクエストで畫像をプリロードしてみる必要があります。このようにして、各フレームがダウンロードされ、遷移がより速くなり、アニメーションがよりスムーズになります！

私たちがしなければならないのは、畫像のシーケンス全體をループしてそれらをロードすることです。

 <code>const frameCount = 148; const preloadImages = () => { for (let i = 1; i </code>

デモ！

パフォーマンスの簡単な説明

この効果は非常にクールですが、多くの畫像でもあります。正確には、148個です。

畫像をどのように最適化しても、CDNがどれだけ速く提供するかに関係なく、何百もの畫像をロードすると、常にページが膨らみます。同じページでこの機(jī)能を複數(shù)回使用するとします。次のパフォーマンス統(tǒng)計(jì)を取得する場合があります。

これは、高速インターネット接続と低データキャップを持つユーザーにとっては問題ないかもしれませんが、この利便性がなければユーザーにはそれを言うことはできません。バランスをとるのは難しい問題ですが、すべての人の経験に注意を払わなければなりません。

このバランスを達(dá)成するためにできることはいくつかあります。

 <code>- 加載單個后備圖像而不是整個圖像序列- 為某些設(shè)備創(chuàng)建使用較小圖像文件的序列- 允許用戶啟用序列，也許可以使用啟動和停止序列的按鈕蘋果采用第一種方法。如果您在連接到緩慢的3G 連接的移動設(shè)備上加載AirPods Pro 頁面，那么，性能統(tǒng)計(jì)數(shù)據(jù)開始看起來好多了：是的，它仍然是一個繁重的頁面。但它比我們根本沒有任何性能考慮的情況下要輕得多。這就是蘋果能夠?qū)⑷绱硕嗟膹?fù)雜序列放到單個頁面上的方式。 #### 進(jìn)一步閱讀如果您有興趣了解這些圖像序列是如何生成的，一個好的起點(diǎn)是AirBnB 的Lottie 庫。文檔將引導(dǎo)您完成使用After Effects 生成動畫的基礎(chǔ)知識，同時(shí)提供一種在項(xiàng)目中輕松包含它們的方法。</code>