第二部：以40kb脚本GSAP动画替换3.4MB视频：增添相机

第一卷至六万九千二日之内，观 r/webdev 之见。吾未料此。吾为之，盖以为以 40 KB 之 DOM 动画易 3.4 MB 视频之事，足为趣，故欲共之。孰料众皆思此同题。

评者之言，胜于其文。众询乎SEO索引，亦问乎屏幕阅读之行止。prefers-reduced-motion 之备选方案，或疑 GSAP 是否实属必要，众皆指其有所缺漏。诚然。

卷一者，有光标于平台之上，巡游于诸景。万事皆于同一之缩放，同一之距观者而显。观实产品之示演，则见异焉：机位移矣。遇要事则缩近之，随光标而历其程，景易则退远之。此乃讲章与导影片之别也。

此帖增置相机。仍循四十千字节之预算。无视频文件存焉。

缩放封装之弊

首试者，乃gsap.to(frame, { scale: 1.4 })。初效，仅半息耳，继而觉响应之缩放已失。胶片之帧，用transform: scale(filmScale) 须适其器之广，而 GSAP 但覆之。二者皆书于同 CSS transform 之属，不可共处一元。

其解乃于 GSAP 所有之框内置一裹：

<div data-film-frame style={{ transform: `scale(${filmScale})` }}>
  <div data-film-zoom className="origin-center">
    {/* All scene content */}
  </div>
  <Cursor />  {/* Outside the zoom wrapper */}
</div>

GSAP 动之data-film-zoom。外框之响应尺度未改。指针栖于缩放包裹之外，故其形不变，而内容环绕而增。此解费我颜面之时光甚巨。二 div。此乃全解之钥.

。平移之数

缩至画框中心易事。缩至特定元素，如用户欲右击之Pinterest图钉，方为真患。须移转缩放外框，令目标终居可视视窗之中。

const ZOOM = 1.45;
const panTo = (target) => ({
  x: (FILM_WIDTH / 2 - target.x) * (ZOOM - 1),
  y: (FILM_HEIGHT / 2 - target.y) * (ZOOM - 1),
});

缩至一倍，无需翻译。缩至一倍四十五分之四十五，离中心每像素需补译其四十五分之四十五之距。

持续缩放，平移以随

初试之谬，在于一交互缩入，一缩出，再缩入，再缩出。若PowerPoint之预算缩放转场。

正道乃：缩放一次，恒定之，随光标移，遍历全序，换景时缩放一次。

// Zoom in on right-click
tl.to(zoom, {
  scale: ZOOM, x: panPin.x, y: panPin.y,
  duration: 0.65, ease: "expo.out",
}, "zoomIn");

// Context menu while zoomed
tl.to(ctx, { autoAlpha: 1, duration: 0.16 }, "zoomIn+=0.35");

// Camera pans to follow cursor to the save button (still zoomed)
tl.to(zoom, {
  x: panSave.x, y: panSave.y,
  duration: 0.55, ease: "sine.inOut",
}, "panToSave");

// Only zoom out when done
tl.to(zoom, {
  scale: 1, x: 0, y: 0,
  duration: 0.45, ease: "sine.inOut",
}, "zoomOut");

全文中见其运行，为实时互动之示

缓动非一概而论

首篇已用power2.out 几乎无所不适用。平铺直叙之演示尚可。然若增以相机之动，不同之动势需不同之缓急，否则全然失之。

动	缓	何以
相机平移	`sine.inOut`	最圆滑之曲线。若真置相机于移盘之上。
剧烈之推近	`expo.out`	起势迅疾，减速绵长。呼啸而后安顿。
光标移位	`sine.inOut`	自然手速加疾
渐显	`sine.out`	缓入可见之境
点击紧缩	`power2.out`	迅捷按压之应
点击松放	`back.out(2.2)`	微有超度。体感甚真
键入之文	`none`	真书不舒

最大之升革，乃于摄移之际，易power2.inOut为sine.inOut。power2有显见之加速踢，于大尺度观之，若机械作响。sine于曲线上无任何时点可察其踢。

光标未尝死寂。

摄景移时，或有景迁而指针凝滞之刻。此间破幻。凡摄移，皆当与指针同步，同标时：

// BAD: cursor is dead during zoom
tl.to(zoom, { scale: 1.4, x: panX, y: panY, duration: 0.7 }, "zoomIn");

// GOOD: cursor drifts toward its next target during zoom
tl.to(zoom, {
  scale: 1.4, x: panX, y: panY,
  duration: 0.7, ease: "expo.out",
}, "zoomIn");
tl.to(cursor, {
  x: current.x + (next.x - current.x) * 0.3,
  y: current.y + (next.y - current.y) * 0.3,
  duration: 0.65, ease: "sine.out",
}, "zoomIn");

指针不必至。向次目标漂移二成至三成已足。静而不死。

全文有冻与漂移光标之对比，于缩放时并列观之

优雅之环

首篇之环突兀。因镜移故，弊尤甚，缩放骤自1.4倍跃至1.0倍，瞬息之间耳

其解乃终曲：

tl.to(zoom, { scale: 1, x: 0, y: 0, duration: 0.8, ease: "sine.inOut" }, "outro");
tl.to(cursor, { x: offScreenX, y: offScreenY, duration: 0.7, ease: "sine.in" }, "outro+=0.1");
tl.to({}, { duration: 0.6 }); // breathing room

且时序之则：初稿恒迟。成初版后，须减其时序二成至三成。

搜索引擎优化、主题设定及视频所不能为者

于<video>标记视源，则谷歌得见之<video src="demo.mp4">。玄匣也。于 GSAP 示范中观其源码，凡按钮标目、菜单之项、标题皆可索引之文。吾未尝为之控序之试，然理之：真 DOM 文字胜于晦暗之二进制块。

索引之外，DOM演示随产品更迭。营销改按钮标签？易文字而已。品牌色更新？改一十六进制值足矣。欲使演示按钮真可转化？与真实注册模态相连。视频皆不能为此。

无障碍

何時prefers-reduced-motion: reduce若已启用，则全然越过时序线，呈示静息之态。GSAP之autoAlpha定二物opacity: 0與visibility: hidden，去其於次序之表及視覺讀取器。凡隱藏之元素，皆用autoAlpha，非opacity，故視覺讀取器唯見其現見者。

需要GSAP乎？

簡單動畫，無需。然網頁剪影之示，有五十動畫相協，分兩場，兼有鏡頭移動。GSAP賦予標籤（所謂節拍之名），repeat: -1以复位之理，gsap.utils.selector(root)数据属性查询，全效缓动库，及错落有致之效。尔可无GSAP而建此诸事。然费时更久，成果亦劣。

GSAP核心gzip压缩后重28KB。若您编排五十动画之影戏演示，此乃基构也。

代理真实

园中设五演，约四千行舞码。吾撰其六。一机灵所撰者四。

吾之六，乃导之术：决何物当缩，择缓急于两观，觉游标缩时若死，言“缩出迟二百毫。”此机灵不能观舞而觉其非。

代理人四成之责，乃施行之事：时序代码一千五百行，DOM元素，点击辅助，重置区块。循吾所定之规则，依模式而为之。技艺之册. 此模式稳定，故输出一致，虽经异演亦然。然此物不知何故为非。此犹吾事也。

表現

网摘器之示，有五十.to()之呼，然每帧唯三至五者方勤于动画。每.to()皆书于transform或opacity，二者皆宜于合成者。全文有实时之劳试，具FPS之计，可推八至四十八之并素，而观帧率。

更新之数理

法	壓縮	攝影機？	可索引？	可訪問？	可主題化？
GSAP (平鋪，其一)	~37 KB	否	是	是	是
GSAP (平移縮放，其二)	~40 KB	然	然	然	然
十五秒MP4（H.264）	二至四兆字节	炙烤之	不可。	不。	不可。
十五秒WebM（VP9）	一至二兆字节	炙烤之	勿也	不可。	勿也
15秒動畫圖	8-15 MB	烘焙中	無	無	無

增設鏡頭約增3 KB於包裝。五項生產示範跨costumary.com運輸總和不及80 KB壓縮。視頻等量則需15-20 MB。

第一部分乃证尔可易视频。第二部分则始觉似导非录。

前成本实然，续成本近乎零。更新乃代码之变，非重录之音。

全文附互动演示： spanthi.com/blog/gsap编舞篇二

生產之例： costumary.com | costumary.com/web-clipper

开源代理技能： gsap编舞

推薦訂閱源

DEV Community