Web Animation

制作 Web 动画，我们现在已经有非常多的选择技术了，掌握动画技术的制作也是一种能力

渲染技术

• Image（GIF、APNG、WEBP、Sequence Frames）
• Video
• DOM + CSS
• SVG
• Canvas（2D/WebGL）

上面是我们制作动画常用的一些技术，从前端的视角来看总体可以分为两类：

• 基于帧绘制（Image、Video、Canvas）
• 基于移动（DOM + CSS、SVG）

PixiJS

PixiJS 的核心是一个渲染系统，它使用 WebGL（或者Canvas）来显示图像和其他 2D 视觉内容

PixiJS 是一个非常快的 2D sprite渲染引擎

GSAP

GSAP（GreenSock Animation Platform）是一个流行的 JavaScript 动画库，用于在 web 应用程序中创建高性能的动画和交互效果。GSAP 提供了强大的工具和 API，使开发人员能够轻松地创建各种动画，包括缓动、旋转、缩放、颜色变化、运动路径动画等。以下是 GSAP 的一些重要特点和功能

应用于 DOM 元素

当传入字符串的时候，gsap 将会查找对应的 DOM 元素，并不断修改元素对应的属性，从而实现过渡的动画效果

import gsap from "gsap";

gsap.to(".box", { 
  duration: 2,
  x: 200,
  rotation: 360,
});

即然本质是修改对象属性，所以 gsap 也直接支持过渡普通对象的数据

应用于普通对象

let obj = { myNum: 10, myColor: "red" };
gsap.to(obj, {
  myNum: 200,
  myColor: "blue",
  onUpdate: () => console.log(obj.myNum, obj.myColor)
});

Details

16.03136 rgba(247,0,8,1)
17.524 rgba(245,0,10,1)
19.75156 rgba(242,0,13,1)
22.70036 rgba(238,0,17,1)
25.62484 rgba(234,0,21,1)
29.24624 rgba(229,0,26,1)
32.82964 rgba(224,0,31,1)
34.96144 rgba(221,0,34,1)
37.78256 rgba(218,0,37,1)
41.27476 rgba(213,0,42,1)
43.35184 rgba(210,0,45,1)
46.78324 rgba(206,0,49,1)
50.17664 rgba(201,0,54,1)
52.19444 rgba(198,0,57,1)
54.86356 rgba(195,0,60,1)
58.16576 rgba(190,0,65,1)
60.78016 rgba(187,0,68,1)
63.37024 rgba(183,0,72,1)
65.936 rgba(180,0,75,1)
68.47744 rgba(177,0,78,1)
70.99456 rgba(173,0,82,1)
74.10676 rgba(169,0,86,1)
75.95584 rgba(166,0,89,1)
79.61296 rgba(162,0,93,1)
81.421 rgba(159,0,96,1)
84.404 rgba(155,0,100,1)
86.17556 rgba(153,0,102,1)
88.51636 rgba(150,0,105,1)
90.83284 rgba(147,0,108,1)
94.26196 rgba(142,0,113,1)
96.51764 rgba(139,0,116,1)
98.19344 rgba(137,0,118,1)
100.95604 rgba(133,0,122,1)
102.59536 rgba(131,0,124,1)
105.29716 rgba(127,0,128,1)
107.96096 rgba(124,0,131,1)
109.541 rgba(121,0,134,1)
111.62644 rgba(119,0,136,1)
114.19904 rgba(115,0,140,1)
115.72436 rgba(113,0,142,1)
118.23616 rgba(110,0,145,1)
119.725 rgba(108,0,147,1)
122.66164 rgba(104,0,151,1)
124.10944 rgba(102,0,153,1)
126.49204 rgba(99,0,156,1)
127.90336 rgba(97,0,158,1)
129.76384 rgba(94,0,161,1)
132.05524 rgba(91,0,164,1)
133.861 rgba(89,0,166,1)
136.084 rgba(86,0,169,1)
137.39956 rgba(84,0,171,1)
139.56176 rgba(81,0,174,1)
140.84084 rgba(79,0,176,1)
142.525 rgba(77,0,178,1)
144.596 rgba(74,0,181,1)
146.629 rgba(72,0,183,1)
148.22804 rgba(69,0,186,1)
149.41136 rgba(68,0,187,1)
151.35316 rgba(65,0,190,1)
152.5 rgba(64,0,191,1)
154.381 rgba(61,0,194,1)
156.224 rgba(59,0,196,1)
157.31156 rgba(57,0,198,1)
159.09376 rgba(55,0,200,1)
160.14484 rgba(53,0,202,1)
161.86624 rgba(51,0,204,1)
163.216 rgba(49,0,206,1)
164.869 rgba(47,0,208,1)
165.84256 rgba(46,0,209,1)
167.43476 rgba(44,0,211,1)
168.37184 rgba(42,0,213,1)
169.90324 rgba(40,0,215,1)
171.101 rgba(39,0,216,1)
172.564 rgba(37,0,218,1)
173.42356 rgba(36,0,219,1)
174.82576 rgba(34,0,221,1)
175.64884 rgba(33,0,222,1)
177.25396 rgba(31,0,224,1)
178.036 rgba(29,0,226,1)
179.309 rgba(28,0,227,1)
180.05456 rgba(27,0,228,1)
181.02736 rgba(25,0,230,1)
182.20916 rgba(24,0,231,1)
183.12724 rgba(23,0,232,1)
184.021 rgba(21,0,234,1)
185.104 rgba(20,0,235,1)
185.73556 rgba(19,0,236,1)
186.75776 rgba(18,0,237,1)
187.35284 rgba(17,0,238,1)
188.50196 rgba(15,0,240,1)
189.056 rgba(15,0,240,1)
189.949 rgba(13,0,242,1)
190.46656 rgba(13,0,242,1)
191.29876 rgba(12,0,243,1)
191.77984 rgba(11,0,244,1)
192.70096 rgba(10,0,245,1)
193.28464 rgba(9,0,246,1)
193.70644 rgba(8,0,247,1)
194.37904 rgba(8,0,247,1)
194.76436 rgba(7,0,248,1)
195.25684 rgba(6,0,249,1)
195.94996 rgba(5,0,250,1)
196.276 rgba(5,0,250,1)
196.68944 rgba(4,0,251,1)
197.17204 rgba(4,0,251,1)
197.44336 rgba(3,0,252,1)
197.86516 rgba(3,0,252,1)
198.17524 rgba(2,0,253,1)
198.52864 rgba(2,0,253,1)
198.72244 rgba(2,0,253,1)
199.01504 rgba(1,0,254,1)
199.17236 rgba(1,0,254,1)
199.36084 rgba(1,0,254,1)
199.59796 rgba(1,0,254,1)
199.72564 rgba(0,0,255,1)
199.80544 rgba(0,0,255,1)
199.90804 rgba(0,0,255,1)
199.95136 rgba(0,0,255,1)
199.99316 rgba(0,0,255,1)
200 blue

因为 gsap 可以只关注补间的数据变化，所以这非常适合结合其他库使用，例如 PixiJS 或者 Threejs 等

Lottie

Lottie 是 Airbnb 发布的一款开源动画库，它适用于 Android、iOS、Web和 Windows 的库。Lottie 是通过 AE 设计好动画效果，直接导出 json 文件，让开发直接调用