Levi's「換」醒你的夏天——國內首個 Cinemagraphic 互動廣告刷屏。如何打造這類高大上互動體驗？從 H5 製作角度拆解核心技術棧。

核心技術一：Canvas 畫布技術

將整個 H5 頁面視為 Photoshop 畫布，可繪製位圖、實現 AE 級特效。經典案例：大眾點評「我們之間就一個字」。

Canvas 讓網頁具備圖像處理能力：像素級操作、濾鏡特效、動態繪製，打破傳統 DOM 操作限制。

核心技術二：Sprite 精靈動畫

Cinemagraph 效果核心實現。將多幀圖片逐幀顯示呈現動畫，而非傳統 GIF。

以 Levi's 廣告為例：女孩頭髮飄動效果，即用不同幀在畫布上反復繪製。

Sprite vs GIF 四大優勢

1. 體積更小、加載更快： 僅改變局部區域，同等速度下畫面更精緻
2. 交互更靈活： 可響應滑動、點擊等手勢，畫面跟隨手指運動
3. 幀率可控： JS 控制播放速度、暫停、倒放、循環模式
4. 記憶體友好： 單張雪碧圖替換多張獨立圖片，減少 HTTP 請求

核心技術三：觸摸路徑檢測

用戶推女孩蕩秋千、揚起水龍頭時，需畫圓弧觸發動畫。

H5 需實時檢測：用戶手指軌跡是否符合預設圓弧路徑。涉及幾何算法：向量夾角判斷、曲率匹配、容差範圍設定——既要有遊戲感，又要容錯友好。

技術整合架構

Canvas (渲染層)
  └─ Sprite 動畫引擎 (幀管理、播放控制)
        └─ 觸摸檢測模組 (路徑識別、手勢映射)
              └─ 業務邏輯層 (場景切換、數據上報、分享喚起)

給製作團隊的建議

• 素材準備： 實拍視頻→關鍵幀提取→去背分層→雪碧圖打包，畫質與體積平衡
• 性能優化： 請求合併、資源預載、requestAnimationFrame 循環、弱設備降級方案
• 體驗細節： 手勢引導視覺化、反饋即時性、音效配合、分享卡片生成
• 數據埋點： 進入率、完成率、互動熱力圖、分享轉化、停留時長

Cinemagraphic 廣告的本質：「靜態照片中的微動魔法」+「觸摸屏原生交互」。技術不難，難在創意與技術的無縫融合——讓用戶忘記在看 H5，以為自己在輕輕推動一個會呼吸的瞬間。