【前端冷知识】动画：你知道的和你不知道的

矫情吗；* 2023-07-15 02:47 16阅读 0赞

前几天我们在文章中讨论了[如何优雅地实现轨迹动画][Link 1]。轨迹动画，只是最简单的一类动画，可以用CSS也可以用JS来实现。

实际上轨迹动画只是最简单的一类动画。在今天，我们继续来看一看Web上动画究竟能做到什么程度。

### 更复杂的轨迹动画 ###

假设我们要让一个物体连续地经过固定的一系列点，完成一个完整的动画，那么我们可以用Promise来简单实现：

>     function lerp(start, end, p) {
>       return start * (1 - p) + end * p;
>     }
>     function animate(target, duration, progress) {
>       const startTime = Date.now();
>       return new Promise((resolve) => {
>         function update() {
>           const t = Date.now() - startTime;
>           const p = Math.min(t / duration, 1);
>           progress(target, p);
>           if(p < 1) {
>             requestAnimationFrame(update);
>           } else {
>             resolve(p);
>           }
>         }
>         update();
>       });
>     }
>     const spots = Array.from(document.querySelectorAll('.target'))
>       .map(t => [t.offsetLeft, t.offsetTop]);
>     (async function() {
>       // noprotect
>       for(let i = 0; i < spots.length; i++) {
>         let left = bird.offsetLeft;
>         let top = bird.offsetTop;
>         await animate(bird, 1000, (target, p) => {
>           const x = lerp(left, spots[i][0], p);
>           const y = lerp(top, spots[i][1], p);
>           bird.style.left = `${x}px`;
>           bird.style.top = `${y}px`;
>         });
>       }
>     }());

如上面代码，我们实现了一个连续的轨迹动画，它效果如下图所示：

![format_png][]

不过这个动画实际上是一段折线动画，它虽然连续，但是不平滑。如果我们要想保证连续且平滑，我们可以用贝塞尔曲线函数拟合。

我们用一下连续的二阶贝塞尔曲线：

>     function lerp(start, end, p) {
>       return start * (1 - p) + end * p;
>     }
>     function quadraticBezier([x0, y0], [x1, y1], [x2, y2], p) {
>       const t = 1 - p;
>       const x = x0 * t ** 2 + 2 * x1 * t * p + x2 * p ** 2;
>       const y = y0 * t ** 2 + 2 * y1 * t * p + y2 * p ** 2;
>       return [x, y];
>     }
>     function animate(target, duration, progress) {
>       const startTime = Date.now();
>       return new Promise((resolve) => {
>         function update() {
>           const t = Date.now() - startTime;
>           const p = Math.min(t / duration, 1);
>           progress(target, p);
>           if(p < 1) {
>             requestAnimationFrame(update);
>           } else {
>             resolve(p);
>           }
>         }
>         update();
>       });
>     }
>     const spots = Array.from(document.querySelectorAll('.target'))
>       .map(t => [t.offsetLeft, t.offsetTop]);
>     // noprotect
>     (async function() {
>       let p0 = [bird.offsetLeft, bird.offsetTop],
>           p1 = spots[0],
>           c0 = [0.5 * (p0[0] + p1[0]),
>                 0.5 * (p0[1] + p1[1])];
>       await animate(bird, 1000, (target, p) => {
>         const [x, y] = quadraticBezier(p0, c0, p1, p);
>         bird.style.left = `${x}px`;
>         bird.style.top = `${y}px`;
>       });
>       for(let i = 1; i < spots.length; i++) {
>         p0 = p1;
>         c0 = [p1[0] * 2 - c0[0],
>               p1[1] * 2 - c0[1]];
>         p1 = spots[i];
>         await animate(bird, 1000, (target, p) => {
>           const [x, y] = quadraticBezier(p0, c0, p1, p);
>           bird.style.left = `${x}px`;
>           bird.style.top = `${y}px`;
>         });
>       }
>     }());

效果如下图所示：

![format_png 1][]

我们看到，飞鸟是平滑地经过这些点的，但是，它的轨迹偏离点的幅度有点大，尤其是第三个点到第四个点，要解决这个问题，可以改用三阶贝塞尔曲线，或者用Catmull Rom样条来做插值。

总之我们还有其他办法改进动画效果，让它变得更完美，在这里限于篇幅就不一一赘述了。

### 帧动画 ###

上面的动画有一个遗憾，就是鸟在飞的过程中翅膀没有动，这可以通过帧动画来实现。

帧动画比固定轨迹动画更简单，我们只要用CSS将元素的背景切换一下就可以了。

>     @keyframes flap {
>       0% {
>         background-position: 0 0px;
>       }
>       33% {
>         background-position: 0 -62px;
>       }
>       66% {
>         background-position: 0 -124px;
>       }
>       100% {
>         background-position: 0 0px;
>       }
>     }
>     #bird {
>       position: absolute;
>       background-image: url(https://p1.ssl.qhimg.com/t01dc66725cf859e983.png);
>       width: 86px;
>       height: 60px;
>       background-position: 0 -62px;
>       transform: translate(-50%,-50%) scale(0.5);
>       z-index: 100;
>       animation: flap .5s step-end infinite;
>     }

![format_png 2][]

我们给飞鸟的元素加一个切换背景background-position的关键帧动画，让这个动画的缓动函数设为step-end，这样就实现了飞鸟的扇翅膀动画。

![format_png 3][]

然后我们把它和前面的轨迹动画结合一下，就实现了扇翅膀飞行的效果。

![format_png 4][]

### gradient 和 mask 动画 ###

CSS的渐变和遮罩，是非常有用的两个属性，用它们配合，可以实现各种比较好玩的动画。

比如我们在前面介绍CSS gradients这篇文章中，就介绍过遮罩实现百叶窗渐显的效果。

![format_png 5][]

### 像素动画 ###

要实现更加复杂的动画，我们还可以用Canvas2D或者WebGL直接操作图像的像素，对像素应用动画。这个就更加复杂了，但是能实现更有趣的效果。

![format_png 6][]

Canvas2D因为CPU处理能力的限制，处理不了太复杂的效果。但是用WebGL的shader，就可以处理更加炫酷的效果了，比如类似下面的水纹滤镜：

![format_png 7][]

还有更加炫酷的效果可以做出来哦。

![format_png 8][]

这些动画效果有没有让你觉得惊艳？

这些效果都可以实现，它的基础是以下这些：

*  JavaScript固定轨迹动画和连续动画
 *  CSS特殊属性的特殊动画
 *  Canvas的像素操作
 *  WebGL的FragmentShader

这些内容的前两部分，在课程《前端进阶十日谈》中有详细介绍，后两部份在不久后也会有专门的课程来讲解的。

关于动画，还有什么想要讨论的，欢迎给我们留言。更多内容，尽在《前端进阶十日谈》

![format_png 9][]

[Link 1]: https://mp.weixin.qq.com/s?__biz=MzI1MzU5MTIyNA%3D%3D&chksm=e9d36a6bdea4e37dcf6bd52e05daee8e083a78d8998787ee88de54fab10210c7d1c338424efa&idx=1&lang=zh_CN&mid=2247483836&scene=21&sn=0a0425afb186187bc9a77faaea96d70a&token=892335825#wechat_redirect
[format_png]: /images/20230529/aa81acf707c34e09ae87e54398941644.png
[format_png 1]: /images/20230529/3f4a6294bf9e41c2a4cbaff6a3b7ef88.png
[format_png 2]: /images/20230529/f715c80c368345a9a5e4ae6b9b408243.png
[format_png 3]: /images/20230529/38b42d77027d4577b9803d276bb6395e.png
[format_png 4]: /images/20230529/d9cd0aeacfa3441b8bc102d0c1fe7794.png
[format_png 5]: /images/20230529/dc9d0960636e4b2ab604f6a4f517f77b.png
[format_png 6]: /images/20230529/ac4aae25fc754ea0a0ed8fa1edac695c.png
[format_png 7]: /images/20230529/b1b013fb10b24e7c9b4cd5cd07baaaaf.png
[format_png 8]: /images/20230529/879ccd91dba44e6981bad686b602accc.png
[format_png 9]: /images/20230529/6fe09bc434fb49f4a50ef61b4d4bc2c6.png