蘋果產(chǎn)品頁(yè)面以其流暢的動(dòng)畫而聞名。例如，當(dāng)您向下滾動(dòng)頁(yè)面時(shí)，產(chǎn)品可能會(huì)滑入視野，MacBook 會(huì)打開，iPhone 會(huì)旋轉(zhuǎn)，所有這些都展示了硬件，演示了軟件，並講述了產(chǎn)品如何使用的互動(dòng)故事。

只需查看iPad Pro 移動(dòng)網(wǎng)頁(yè)體驗(yàn)的這段視頻：

您在那裡看到的許多效果並非僅使用HTML 和CSS 創(chuàng)建的。那麼，您會(huì)問(wèn)？好吧，這可能有點(diǎn)難以弄清楚。即使使用瀏覽器的DevTools 也並非總能揭示答案，因?yàn)樗ǔo(wú)法看到<canvas></canvas>元素之外的內(nèi)容。

讓我們深入研究其中一種效果，看看它是如何製作的，以便您可以在我們自己的項(xiàng)目中重新創(chuàng)建一些這些神奇的效果。具體來(lái)說(shuō)，讓我們複製AirPods Pro 產(chǎn)品頁(yè)面和英雄圖像中的動(dòng)態(tài)光效。

基本概念

這個(gè)想法是創(chuàng)建一個(gè)動(dòng)畫，就像一系列快速連續(xù)的圖像一樣。您知道，就像翻書一樣！不需要復(fù)雜的WebGL 場(chǎng)景或高級(jí)JavaScript 庫(kù)。

通過(guò)將每一幀與用戶的滾動(dòng)位置同步，我們可以在用戶向下（或向上）滾動(dòng)頁(yè)面時(shí)播放動(dòng)畫。

從標(biāo)記和樣式開始

此效果的HTML 和CSS 非常簡(jiǎn)單，因?yàn)槟Хòl(fā)生在<canvas></canvas>元素內(nèi)部，我們通過(guò)賦予其ID 來(lái)使用JavaScript 控制它。

在CSS 中，我們將文檔的高度設(shè)置為100vh，並將我們的內(nèi)容高度設(shè)置為比100vh 高5 倍，以便為我們提供必要的滾動(dòng)長(zhǎng)度以使其工作。我們還將文檔的背景顏色與圖像的背景顏色相匹配。我們要做的最後一件事是定位<canvas></canvas>元素，將其居中，並限制最大寬度和高度，使其不超過(guò)視口的尺寸。

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

現(xiàn)在，我們可以向下滾動(dòng)頁(yè)面（即使內(nèi)容沒有超過(guò)視口高度），我們的<canvas></canvas>仍然位於視口頂部。這就是我們需要的全部HTML 和CSS。

讓我們繼續(xù)加載圖像。

獲取正確的圖像

由於我們將使用圖像序列（再次，就像翻書一樣），我們將假設(shè)文件名按升序順序連續(xù)編號(hào)（即0001.jpg、0002.jpg、0003.jpg 等）在同一目錄中。

我們將編寫一個(gè)函數(shù)，根據(jù)用戶的滾動(dòng)位置返回所需圖像文件的路徑和編號(hào)。

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

由於圖像編號(hào)是整數(shù)，我們需要將其轉(zhuǎn)換為字符串並使用padStart(4, '0')在我們的索引前面添加零，直到達(dá)到四位數(shù)字以匹配我們的文件名。例如，將1 傳遞到此函數(shù)將返回0001。

這給了我們一種處理圖像路徑的方法。這是在<canvas></canvas>元素上繪製的序列中的第一張圖像：

如您所見，第一張圖像在頁(yè)面上。此時(shí)，它只是一個(gè)靜態(tài)文件。我們想要的是根據(jù)用戶的滾動(dòng)位置更新它。我們不僅希望加載一個(gè)圖像文件，然後通過(guò)加載另一個(gè)圖像文件來(lái)替換它。我們希望在<canvas></canvas>上繪製圖像，並使用序列中的下一張圖像更新繪圖（但我們稍後會(huì)討論）。

我們已經(jīng)創(chuàng)建了根據(jù)我們傳入的數(shù)字生成圖像文件路徑的函數(shù)，因此我們現(xiàn)在需要做的是跟蹤用戶的滾動(dòng)位置並確定該滾動(dòng)位置對(duì)應(yīng)的圖像幀。

將圖像連接到用戶的滾動(dòng)進(jìn)度

要了解我們需要傳遞哪個(gè)數(shù)字（以及因此要加載哪個(gè)圖像）在序列中，我們需要計(jì)算用戶的滾動(dòng)進(jìn)度。我們將創(chuàng)建一個(gè)事件偵聽器來(lái)跟蹤該事件並處理一些數(shù)學(xué)計(jì)算來(lái)計(jì)算要加載的圖像。

我們需要知道：

• 滾動(dòng)開始和結(jié)束的位置
• 用戶的滾動(dòng)進(jìn)度（即用戶向下滾動(dòng)頁(yè)面的百分比）
• 與用戶滾動(dòng)進(jìn)度對(duì)應(yīng)的圖像

我們將使用scrollTop獲取元素的垂直滾動(dòng)位置，在本例中是文檔頂部。這將作為起始值。我們將通過(guò)從文檔滾動(dòng)高度減去窗口高度來(lái)獲取結(jié)束（或最大）值。從那裡，我們將scrollTop值除以用戶可以向下滾動(dòng)的最大值，這將給我們用戶的滾動(dòng)進(jìn)度。

然後，我們需要將該滾動(dòng)進(jìn)度轉(zhuǎn)換為與我們的圖像編號(hào)序列對(duì)應(yīng)的索引號(hào)，以便為該位置返回正確的圖像。我們可以通過(guò)將進(jìn)度數(shù)乘以我們擁有的幀數(shù)（圖像數(shù)）來(lái)做到這一點(diǎn)。我們將使用Math.floor()將該數(shù)字向下取整，並將其包裝在Math.min()中以及我們的最大幀數(shù)中，以便它永遠(yuǎn)不會(huì)超過(guò)總幀數(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>

我們現(xiàn)在知道在用戶的滾動(dòng)進(jìn)度發(fā)生變化時(shí)需要繪製哪個(gè)圖像。這就是<canvas></canvas>的魔力發(fā)揮作用的地方。<canvas></canvas>具有許多很酷的功能，用於構(gòu)建從遊戲和動(dòng)畫到設(shè)計(jì)模型生成器以及介於兩者之間的一切！

這些功能之一是稱為requestAnimationFrame的方法，它與瀏覽器一起工作以更新<canvas></canvas>，如果我們使用的是直接圖像文件而不是<canvas></canvas>，我們就無(wú)法做到這一點(diǎn)。這就是我選擇<canvas></canvas>方法而不是例如img元素或具有背景圖像的<div>的原因。 <code>requestAnimationFrame將匹配瀏覽器刷新率並通過(guò)使用WebGL 使用設(shè)備的視頻卡或集成顯卡進(jìn)行渲染來(lái)啟用硬件加速。換句話說(shuō)，我們將獲得幀之間非常平滑的過(guò)渡——沒有圖像閃爍！

讓我們?cè)谖覀兊臐L動(dòng)事件偵聽器中調(diào)用此函數(shù)，以便在用戶向上或向下滾動(dòng)頁(yè)面時(shí)交換圖像。 requestAnimationFrame採(cǎi)用回調(diào)參數(shù)，因此我們將傳遞一個(gè)函數(shù)來(lái)更新圖像源並在<canvas></canvas>上繪製新圖像：

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

我們將frameIndex增加1，因?yàn)殡m然圖像序列從0001.jpg 開始，但我們的滾動(dòng)進(jìn)度計(jì)算實(shí)際上是從0 開始。這確保了這兩個(gè)值始終對(duì)齊。

我們傳遞給更新圖像的回調(diào)函數(shù)如下所示：

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

我們將frameIndex傳遞給函數(shù)。這使用序列中的下一張圖像設(shè)置圖像源，該圖像繪製在我們的<canvas></canvas>元素上。

預(yù)加載圖像更好

從技術(shù)上講，我們現(xiàn)在已經(jīng)完成了。但是，拜託，我們可以做得更好！例如，快速滾動(dòng)會(huì)導(dǎo)致圖像幀之間出現(xiàn)一點(diǎn)滯後。這是因?yàn)槊總€(gè)新圖像都會(huì)發(fā)送一個(gè)新的網(wǎng)絡(luò)請(qǐng)求，需要一個(gè)新的下載。

我們應(yīng)該嘗試預(yù)加載圖像新的網(wǎng)絡(luò)請(qǐng)求。這樣，每個(gè)幀都已下載，使過(guò)渡更快，動(dòng)畫更流暢！

我們要做的就是循環(huán)遍歷整個(gè)圖像序列並加載它們：

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

演示！

關(guān)於性能的快速說(shuō)明

雖然這種效果非常酷，但它也是很多圖像。確切地說(shuō)，是148 張。

無(wú)論我們?nèi)绾蝺?yōu)化圖像，或者提供它們的CDN 多麼快速，加載數(shù)百?gòu)垐D像總是會(huì)導(dǎo)致頁(yè)面膨脹。假設(shè)我們?cè)谕豁?yè)面上多次使用此功能。我們可能會(huì)得到如下性能統(tǒng)計(jì)數(shù)據(jù)：

對(duì)於高速互聯(lián)網(wǎng)連接且數(shù)據(jù)上限不嚴(yán)格的用戶來(lái)說(shuō)，這可能沒問(wèn)題，但對(duì)於沒有這種便利的用戶來(lái)說(shuō)，我們不能這麼說(shuō)。這是一個(gè)難以平衡的問(wèn)題，但我們必須注意每個(gè)人的體驗(yàn)——以及我們的決定如何影響他們。

我們可以做一些事情來(lái)幫助取得這種平衡，包括：

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