动画在前端领域中的作用是提升用户体验、吸引用户注意力。在互联网行业中，它也是一个永久的热点话题。一般在电商平台或者娱乐类项目（快手、拼多多、淘宝、腾讯视频、抖音等）中会出现很多的动画场景。那么通过本文，大家可以提高哪些方面的认知呢？ 1. 前端人员实现动画的技术有哪些？ 2. 每种动画的实现技术有什么特点，适合什么样的场景？ 2. 拿到需求稿或者动画demo的时候，如何选择最合适的技术栈？（选择合适的技术栈在任何时候都是对程序员非常重要的一个考验） 3. 制作一系列的动画，各岗位的人该如何配合，每个人分别做什么 ### 快手今年在业内比较成功的项目——春节系列项目 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/808a5b6b6cf447bd9050691aa14ce31d~tplv-k3u1fbpfcp-watermark.image?) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78329be576aa4f3ab7f9bcc46150f8c2~tplv-k3u1fbpfcp-watermark.image?) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e95dbffdbbc440fbbaa722242ca4a9d6~tplv-k3u1fbpfcp-watermark.image?) 整个系列的项目动画元素非常多，但是每个地方都需要根据动画的特点去选择最合适的技术去实现才能达到性能以及展示的最高标准，才能演绎出最高级的动画。那么研发人员和设计人员在接到需求的时候就要去合作沟通去设计出最完美的动画技术架构。 ### 前期考虑兼容性、稳定性、体积、性能、文件类型、用户设备（低端机测试）。 ### 技术栈 APNG、css Animation、SVG、Lottie、Canvas、WebGL、MP4、cocos、WebP、WebM、TransparentVideo ... ### APNG ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/26775e58c648477e8aac9d2092ce5078~tplv-k3u1fbpfcp-watermark.image?) ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47c7fa9cc3f741d2ab9a0af5bc8194c8~tplv-k3u1fbpfcp-watermark.image?) ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d26a310fec7463aaa813fc8897552dc~tplv-k3u1fbpfcp-watermark.image?) [apng动画传送门](https://gw.alicdn.com/imgextra/i1/O1CN01304wnF1oY8SgVUetS_!!6000000005236-54-tps-206-285.apng?getAvatar=1) 介绍：全称Animated PNG，诞生于2004年。特征：支持透明动画的png（本质也是位图），是png的一个拓展。所以在不支持apng的设备上时，能降级显示一个png静图。虽然gif和apng都是动图，但是apng的画质比gif好很多，需要由设计师来产出（下图为 gif图和 apng图对比）。前端这边的使用方法和用其他格式的图片一样，可以直接作为图片插入到网页中去。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71f85b440f5341c1b5fb3dadf14d3e3b~tplv-k3u1fbpfcp-watermark.image?) 优点：（1）24位真彩色（gif是8位色，这里的位可以理解为2的多少次方，8位色就是2的8次方，即256种颜色，也就是说gif最多可以展示256种颜色，所以gif的色阶过渡会比apng差很多），（2）8位alpha透明通道（gif格式不支持alpha通道，即不支持半透明，但是我们都知道位图中图形边缘的那部分像素是半透明的，如下图，所以gif因为不支持半透明，图的边缘会有锯齿）。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82ab28d6d69f46a2bf49a8a89a405cb0~tplv-k3u1fbpfcp-watermark.image?) 一个图像的每个像素都有 RGB（红色、绿色、蓝色）三个通道，后来又出现了一个通道alpha通道。一个使用32个比特存储的位图，每8个比特表示红(8)、绿(8)、蓝(8)、alpha(8) 通道。在这种情况下，alpha通道就可以表示256（2的8次方）级的半透明度，就可以把透明度控制得比较顺滑，而gif没有alpha通道，所以它只能展示为透明或者不透明，就没有控制半透明度的余地。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24a4444b7b2a43128ad61375d4170900~tplv-k3u1fbpfcp-watermark.image?) 缺点：兼容性暂时不是很好，但是现在有一些工具会支持制作 Animated PNG 图片。 ### css Animation 前端人员应该都会比较熟悉CSS Animation。如果大家深入地去了解CSS，你会发现：万物皆可CSS。 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80da6c8c8a7e425b954b641c2cb82029~tplv-k3u1fbpfcp-watermark.image) 优点：浏览器对CSS3动画做了很多优化，比如专门新建一个图层用来跑动画、强制硬件加速。缺点：可以从头到尾完成动画，但是比较难以在动画过程中按照我们的意愿去做交互控制。大家可以一起试做这个小demo感受下CSS Animation的编写特点，肚皮抖动的效果： ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/758e0c9ef76944dbae077408189a6d55~tplv-k3u1fbpfcp-watermark.image?)

/* 第一步：画个肚皮 */ .belly { /* 第二步：给DOM元素选择器里设置属性animation */ width: 80px; height: 90px; position: absolute; background: #eeeeee; border-radius: 10% 20% 40% 40%; animation: wave2 0.08s infinite alternate;} @keyframes wave2 { /* 第三步：写@keyframes + 动画名描述动画 */ from { top: 76px; left: 8px; border-radius: 10% 20% 40% 60%; } to { top: 74px; left: 12px; border-radius: 10% 20% 30% 30%; } } 目前比较成熟的css动画库：[Animate.css](https://animate.style/) 灵感爆棚的CSS动画博主：[chokcoco](https://juejin.cn/user/2330620350437678) 适合调试css动画的在线编辑工具：[CodePen](https://codepen.io/) ### WebP 1. 支持alpha通道，可以做带透明度的动画 2. 分有损和无损（lossy 和 mixed） 3. 无损条件下，画质和png差不多 ### WebM 1. 支持alpha通道，可以做带透明度的动画 2. 播放顺畅 3. 同等条件下，比mp4更清晰 ### MP4 MP4是一种常见的多媒体**容器格式**，是一种描述较为全面的容器格式，被认为可以在其中嵌入任何形式的数据。它的特点主要有： 1. 不支持alpha通道，不能做透明动画 2. 具有更大的色彩空间 3. 体积较小：很多开发者会人为MP4格式很大，但是其实拿一张黑白的动图，mp4的大小可能为gif的1/2（一般情况下会比这更小，1/10的情况也是有的） [动图/视频格式转换在线工具（一）](https://ezgif.com/) [动图/视频格式转换在线工具（二）](https://cloudconvert.com/) 首先，在当今，mp4在某些情况下是可以取代gif的。国外部分图库网站已经这样做了，用户上传gif动画后，会被转换成mp4做前台展示。但是mp4不支持alpha通道，不能做透明动画。可能很多人会疑惑为什么MP4的格式可以这么小？这主要还是与视频的编码格式有关，现在很多mp4的编码格式为 h.264，这种编码格式的优点在于： ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/01b1ced6a9d14c869a2b508309285c34~tplv-k3u1fbpfcp-watermark.image?) 4. 可设置预览图，在网页中嵌入MP4视频文件会用