1. Johngo学长首页
  2. 技术点详细复盘专题
  3. 大数据

前端动效讲解与实战

• 大数据 • 阅读 72

作者：vivo 互联网前端团队- ZhaoJie

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:128e99ea-70cd-4ace-8065-7cc302dd607b

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:1de4011b-1e4a-4cc8-a36e-eda539d54a7e

一、背景

前端动画场景需求多

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:436e9f30-8ccb-40a0-85ab-acbc72f480d8

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:83c7b108-e954-4db7-9ae9-8f140ebae9eb

各动画方案的优劣及适用场景认识模糊

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:3a07c6c1-1b0a-4bee-b06f-5289c709c20b

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:1b78b13b-4259-408b-961c-3e13e80428bd

主流动画库的适用场景认识模糊

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:138d5334-7298-40a5-bef7-a9e6038d3084

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:dcc4d259-d5ec-4eb6-a00f-70fc2a604085

二、分类

2.1 用途角度

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:984005c2-db38-4ec5-8699-766038fa180e

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:eba7b23f-a22b-4536-a70a-12aafe4095a5

前端动效讲解与实战

2.1.1 展示型动画

类似于一张GIF图，或者一段视频。比如在开启宝箱的时候，我们会加入一个切场过渡动画，来替代原有的生硬等待结果。

展示型动画在实际使用的场景中，实现的方法很多，比如用GIF图，canvas，CSS3动画等，但是最终输出的 结果是不带有交互的，也就是从动画起始状态到结束状态一气呵成，这个过程 用户可以感知，但是无法参与。

2.1.2 交互型动画

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:c5beb5b0-fa14-44fa-b70e-4b20bb9aac94

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:48e34e3b-0a2b-4895-814a-05a2aeb30c93

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:8d587718-ddfa-42c8-b549-9f0c8770ac51

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:7f12afa1-3a52-4c7c-b312-639a6bb3d351

前端动效讲解与实战

2.2 绘制技术角度

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:ee4f76c8-defc-494c-95ed-1de7cd3c3ffc

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:762f5c30-309f-4c82-9c73-f7bfd1bae5ae

  1. Canvas
  2. div
  3. SVG

PS：为了简单也可以用视频，但除非动画的播放场景固定，不然移动端视频在不同app、不同机型、不同系统的播放显示都不太一样，容易踩不少坑。

2.2.1 不同绘制技术的性能差异

Canvas

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:6f8b6587-2181-4bbc-8533-82af8969006c

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:3ebd6e9b-28d7-4f57-864d-f0541152ecf2

* 依赖分辨率
* 不支持事件处理器
* 弱的文本渲染能力
* 能够以 .png 或 .jpg 格式保存结果图像
[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:11edd639-345b-46b0-8257-3f27801254e2

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:b13d7b5e-b2b9-48f0-94af-961a84bd4844

div

  • 包括CSS控制的DOM动画、JS控制的DOM动画
    [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:263ae7ea-79bd-4478-ad57-09c0f14cac4e
    [En]

    [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:58928e47-ff0d-49e0-99f9-3477c6d6d892

SVG

  • 处理矢量图，不失真
  • 不依赖分辨率
  • 支持事件处理器
    [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:4d9bcec6-9cc1-4a52-be26-5aabe301ef38
    [En]

    [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:df84552b-a494-498f-9b22-977974ea259e

  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

2.2.2 Canvas和SVG比较

一句话总结：都是2D做图，svg是矢量图，canvas是位图。canvas 是逐像素进行渲染的，适合游戏。

SVG

  • SVG绘制的是矢量图，缩放不影响显示，所以最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • SVG 是一种使用 XML 描述 2D 图形的语言。
  • SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
  • 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

  • Canvas 通过 JavaScript 来绘制 2D 图形。
  • Canvas 是逐像素进行渲染的。
  • 在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
  • Canvas只占用一个DOM节点，在做一些烟花、飘雪等运动元素很多的动画时，会比CSS/SVG性能好。

性能比较

  • 一般情况下，随着屏幕大小的增大，canvas将开始降级，因为需要绘制更多的像素。
  • 随着屏幕上的对象数目增多，SVG 将开始降级，因为我们正不断将这些对象添加到 DOM 中。
  • 这些度量不一定准确，以下方面的不同一定会引起变化：实现和平台、是否使用完全硬件加速的图形，以及 JavaScript 引擎的速度。

前端动效讲解与实战

2.3 动画类型角度

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:36dca6ea-d97d-4503-b050-a0ea3735460b

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:657dc6e4-41d9-4bd1-bcbf-9440e4be4c64

动画用途->确认动画类型->确认绘制技术->确认动画的实现方式。

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:ccdf03d3-f8fb-4ca2-bae2-ccc5266a4d40

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:0730df52-13c7-4093-b20b-8f89fbe01373

（1）逐帧动画(序列帧动画)

  • GIF实现
  • CSS实现（animation）
  • JS+DOM实现
  • JS+canvas实现

（2）补间动画(Tween动画\关键帧动画)

  • CSS实现（transition、animation等）使用一些缓动函数
  • JS实现

（3）SVG动画

  • 使用 XML 格式定义图形
  • 可以用AI等SVG编辑工具生成SVG图片后，配合anime.js、GSAP等现有库进行动画制作

（4）骨骼动画

  • 一般采用Spine、DragonBones等工具导出相应资源图片和JSON动画配置资源后使用。

（5）3D动画

  • DOM操作用CSS 3D实现。（perspective属性、css3d-engine）
  • 场景搭建用webGL(Three.js等)
  • 3D模型动画用Blender或maya等制作完成后导出使用

2.3.1 逐帧动画(序列帧动画)

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:e2a5c71d-39ed-4a7a-bc4e-871a34354e42

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:583a02ef-6f77-4406-a91a-548b071e05de

由于逐帧动画的帧序列内容不一样，不仅增加制作负担而且最终输出的文件量也很大，但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。

所以逐帧动画的实现核心是什么，就是将我们的这些静态的图片进行快速的循环播放，形成了一个动态的动画效果。这就是帧动画。

2.3.1.1 GIF实现

我们可以将帧动画导出成GIF图，GIF图会连续播放，无法暂停，它往往用来实现小细节动画，成本较低、使用方便。但其缺点也是很明显的：

  1. 画质上，GIF 支持颜色少(最大256色)、Alpha 透明度支持差，图像锯齿毛边比较严重；
  2. 交互上，不能直接控制播放、暂停、播放次数，灵活性差；
  3. 性能上，GIF 会引起页面周期性的 绘画，性能较差。

2.3.1.2 CSS实现

CSS3帧动画是我们今天需要重点介绍的方案，最核心的是利用CSS3中 Animation动画，确切的说是使用animation-timing-function 的阶梯函数 steps(number_of_steps, direction) 来实现逐帧动画的连续播放。

帧动画的实现原理是不断切换视觉内图片内容，利用视觉滞留生理现象来实现连续播放的动画效果，下面我们来介绍制作CSS3帧动画的几种方案。

（1）连续切换动画图片地址src（不推荐）

我们将图片放到元素的背景中（background-image），通过更改 background-image 的值实现帧的切换。但是这种方式会有以下几个缺点，所以该方案不推荐。

  • 多张图片会带来多个 HTTP 请求
    [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:386872fc-f445-4b48-9e5f-0f808ec36326
    [En]

    [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:e015729a-7481-4ce0-abc2-64ff42288dac

  • 不利于文件的管理

（2）连续切换雪碧图位置（推荐）我们将所有的帧动画图片合并成一张雪碧图，通过改变 background-position 的值来实现动画帧切换。分两步进行：

步骤一：

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:9d9660cb-399d-4d44-b828-7a4ba1245600

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:1d5b3c27-20a7-4da7-8d89-54791c9458b6

(图片来源于：帧动画的多种实现方式与性能对比)

步骤二：

使用steps阶梯函数切换雪碧图位置

写法一：

javascript;gutter:true; .sprite { width: 300px; height: 300px; background-repeat: no-repeat; background-image: url(frame.png); animation: frame 333ms steps(1,end) both infinite; } @keyframes frame { 0% {background-position: 0 0;} 5% {background-position: -300px 0;} 10% {background-position: -600px 0;} 15% {background-position: -900px 0;} 20% {background-position: -1200px 0;} 25% {background-position: -1500px 0;} 30% {background-position: -1800px 0;} 35% {background-position: -2100px 0;} 40% {background-position: -2400px 0;} 45% {background-position: -2700px 0;} 50% {background-position: -3000px 0;} 55% {background-position: -3300px 0;} 60% {background-position: -3600px 0;} 65% {background-position: -3900px 0;} 70% {background-position: -4200px 0;} 75% {background-position: -4500px 0;} 80% {background-position: -4800px 0;} 85% {background-position: -5100px 0;} 90% {background-position: -5400px 0;} 95% {background-position: -5700px 0;} 100% {background-position: -6000px 0;} }</p> <pre><code> 针对以上动画有疑问？ **问题一：**既然都详细定义关键帧了，是不是可以不用steps函数了，直接定义linear变化不就好了吗？ ;gutter:true;
animation: frame 10s linear both infinite;

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:3dfe469d-2ab3-48be-9299-cde4d4f3686f

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:06003421-2225-4c4a-92f5-099c2904bf87

前端动效讲解与实战

问题二：不是应该设置为20步吗，怎么变成了1？

这里我们先来了解下animation-timing-function属性。CSS animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:1a168de7-d581-4c2d-b22d-1b9adc22a2cf

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:b3d334c0-2e72-46de-ae5e-7b8c8491483a

写法二：

javascript;gutter:true; .sprite { width: 300px; height: 300px; background-repeat: no-repeat; background-image: url(frame.png); animation: frame 333ms steps(20) both infinite; } @keyframes frame { 0% {background-position: 0 0;}//可省略 100% {background-position: -6000px 0;} }</p> <pre><code> [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:f20584b1-3bc8-48da-8627-662ba94502b3<details><summary>*<font color='gray'>[En]</font>*</summary>*<font color='gray'>[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:514c6a8c-43b1-47c6-b2b0-eb02f1e8c3c5</font>*</details> **（3）连续移动雪碧图位置（移动端推荐）** 跟第二种基本一致，只是切换雪碧图的位置过程换成了transform:translate3d()来实现，不过要加多一层overflow: hidden;的容器包裹，这里我们以只定义初始和结束帧为例，使用 **transform**可以开启GPU加速，提高机器渲染效果，还能有效解决移动端帧动画抖动的问题。 ;gutter:true;
.sprite-wp {
width: 300px;
height: 300px;
overflow: hidden;
}
.sprite {
width: 6000px;
height: 300px;
will-change: transform;
background: url(frame.png) no-repeat center;
animation: frame 333ms steps(20) both infinite;
}
@keyframes frame {
0% {transform: translate3d(0,0,0);}
100% {transform: translate3d(-6000px,0,0);}
}

steps() 函数详解

从上面的代码我们可以发现，CSS实现的核心就是使用animation-timing-function缓动函数的阶梯函数steps(number_of_steps, direction)来实现逐帧动画的连续播放的。

接着我们来了解下steps() 函数：

steps 指定了一个阶梯函数，包含两个参数：

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:366adc9d-fabd-4351-aec2-af99116f792d

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:8599875b-e6cc-4eec-a2ee-de534c60d0d9

* 第二个参数可选，指定在每个间隔的起点或是终点发生阶跃变化，接受 start 和 end 两个值，默认为 end。
* start 第一帧是第一步动画的结束，end 第一帧是第一步动画的开始。

前端动效讲解与实战

除了 steps 函数，animation-timing-function 还有两个与逐帧动画相关的属性值 step-start 与 step-end：

  • step-start 等同于 steps(1,start)
  • step-end 等同于 steps(1,end)

2.3.1.3 JS实现

（1）通过JS来控制img的src属性切换（不推荐）

和上面CSS3帧动画里面切换元素background-image属性一样，会存在多个请求等问题，所以该方案我们不推荐，但是这是一种解决思路。

（2）通过JS来控制canvas图像绘制

通过canvas制作帧动画的原理是用drawImage方法将图片绘制到canvas上，不断擦除和重绘就能得到我们想要的效果。

javascript;gutter:true; (function () { var timer = null, canvas = document.getElementById("canvas"), context = canvas.getContext('2d'), img = new Image(), width = 300, height = 300, k = 20, i = 0; img.src = "frame.png"; function drawImg() { context.clearRect(0, 0, width, height); i++; if (i == k) { i = 0; } context.drawImage(img, i * width, 0, width, height, 0, 0, width, height); window.requestAnimationFrame(drawImg); } img.onload = function () { window.requestAnimationFrame(drawImg); } })();</p> <pre><code> 上面是通过改变裁剪图像的X坐标位置来实现动画效果的，也可以通过改变画布上放置图像的坐标位置实现，如下： ;gutter:true;
context.drawImage(img, 0, 0, width*k, height,-i*width,0,width*k,height);

（3）通过JS来控制CSS属性值变化

这种方式和前面CSS3帧动画一样，有三种方式，一种是通过JS切换元素背景图片地址background-image，一种是通过JS切换元素背景图片定位background-position，最后一种是通过JS移动元素transform:translate3d()，第一种不做介绍，因为同样会存在多个请求等问题，不推荐使用，这里实现后面两种。

切换元素背景图片位置 background-position

javascript;gutter:true; .sprite { width: 300px; height: 300px; background: url(frame.png) no-repeat 0 0; }</p> <p>(function(){ var sprite = document.getElementById("sprite"), picWidth = 300, k = 20, i = 0, timer = null; // 重置背景图片位置 sprite.style = "background-position: 0 0"; // 改变背景图位置 function changePosition(){ sprite.style = "background-position: "+(-picWidth*i)+"px 0"; i++; if(i == k){ i = 0; } window.requestAnimationFrame(changePosition); } window.requestAnimationFrame(changePosition); })();</p> <pre><code> > 移动元素背景图片位置 transform:translate3d() ;gutter:true;
.sprite-wp { width: 300px;
height: 300px;
overflow: hidden;
}
.sprite { width: 6000px;
height: 300px;
will-change: transform;
background: url(frame.png) no-repeat center;
}

(function () {
var sprite = document.getElementById("sprite"),
picWidth = 300,
k = 20,
i = 0,
timer = null;
// 重置背景图片位置
sprite.style = "transform: translate3d(0,0,0)";
// 改变背景图移动
function changePosition() {
sprite.style = "transform: translate3d(" + (-picWidth * i) + "px,0,0)";
i++;
if (i == k) {
i = 0;
}
window.requestAnimationFrame(changePosition);
}
window.requestAnimationFrame(changePosition);
})();

2.3.1.4 性能分析

我们通过Chrome浏览器的各种工具，查看了每种方案的 FPS、CPU占用率、GPU占用、Scripting、Rendering、Painting、内存的使用情况，得到以下数据：

前端动效讲解与实战

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:853ca7ab-57d9-46b8-935a-ee0ac51b20e9

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:2bea0310-6737-4f22-9364-d6be621d449c

  1. 除了CSS transform:translate3d() 方案，其他方案的FPS都能达到60FPS的流畅程度，但该方案的FPS 也不是很低。
  2. CPU占用率最低的方案是CSS transform:translate3d() 方案。
  3. GPU占用最低的方案是JS canvas 绘制方案。
  4. CSS 方案没有脚本开销。
  5. Rendering 最少的是CSS transform:translate3d() 方案。
  6. Painting 最少的是CSS transform:translate3d() 方案。
  7. 各方案内存占用区别不大。

结论：我们看到，在7个指标中，CSS transform:translate3d() 方案将其中的4个指标做到了最低，从这点看，我们完全有理由选择这种方案来实现CSS帧动画。

2.3.2 补间动画(Tween动画\关键帧动画)

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:431d3084-152b-476d-a828-315aaaa7225a

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:48fd0eaf-a40b-43d1-87ac-783a847ce0b7

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:d33ad286-998e-43e4-bcd3-92aaeebf668e

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:e8aad394-4d55-4ece-a09e-7b00c13b3c40

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:33535585-0a0d-4b80-8bc4-f491e6d09cb3

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:a8b01264-9c2b-44ef-a4e2-c94f1ac16788

  • CSS3 Animation：通过animation(除steps()以外的时间函数)属性在每个关键帧之间插入补间动画。
  • CSS3 Transition：区别于animation，transition只能设定初始和结束时刻的两个关键帧状态。
  • 利用JavaScript实现动画：例如JavaScript动画库或框架，Anime.js 或者TweenJS，它是CreateJS的其中一个套件。另外，在Flash业界久负盛名的GreenSock推出的GSAP(GreenSock Animation Platform)也新引入了对Javascript动画的支持。

2.3.2.1 CSS实现

（1）transition 动画

transition允许CSS的属性值在一定的时间区间内平滑地过渡，即指定元素的初始状态 和末尾状态，既可以完成一个动画，中间的变化完全有浏览器自己决定。动画的效果主要还是看transition相关属性即可。

然而利用transition制作的动画也有着显著的缺点：

  1. transition需要事件触发，所以没法在网页加载时自动发生。
  2. transition是一次性的，不能重复发生，除非一再触发。
  3. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
  4. 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

（2）animation 动画

利用animation可以完成一个完整的CSS补间动画，如上面所说，我们只需要定义几个特殊时刻的动画状态即可。这个特殊时刻通常我们叫做关键帧。

keyframes 关键帧

Keyframes具有其自己的语法规则，他的命名是由”@keyframes”开头，后面紧接着是这个”动画的名称”加上一对花括号”{}”，括号中就是一些不同时间段样式规则，有点像我们CSS的样式写法一样。

对于一个”@keyframes”中的样式规则是由多个百分比构成的，如”0%”到”100%”之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等。

不过有一点需要注意的是，我们可以使用”fromt””to”来代表一个动画是从哪开始，到哪结束，也就是说这个 “from”就相当于”0%”而”to”相当于”100%”,值得一说的是，其中”0%”不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（”%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。看一下具体的代码：

javascript;gutter:true; @keyframes IDENT { from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } /<em>或者全部写成百分比的形式：</em>/ @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properties:Properties value; } 100% { Properties:Properties value; } }</p> <pre><code> 其中IDENT是一个动画名称，你可以随便取，当然语义化一点更好，Percentage是百分比值，我们可以添加许多个这样的百分比，Properties为CSS的属性名，比如说left,background等，value就是相对应的属性的属性值。 #### 2.3.2.2 JS实现 利用JavaScript实现动画，可以采用开源的JavaScript动画库或框架进行实现，例如：Anime.js或者TweenJS 下面我们以Anime.js为例进行演示如何实现一个补间动画。 一定程度上，anime.js也是一个CSS3动画库，适用所有的CSS属性，并且实现的@keyframes 能更方便的实现帧动画，替代CSS3复杂的定义方式。使用对象数组的形式定义每一帧。 [戳我：keyframes实例](http://animejs.com/documentation/#keyframes) ;gutter:true;
anime({
targets: ‘div’,
translateX: [
{ value: 250, duration: 1000, delay: 500, elasticity: 0 }, //第一帧
{ value: 0, duration: 1000, delay: 500, elasticity: 0 } //第二帧
]
}) //这个例子实现了目标元素在两帧中实现水平位移

提供的Timeline能实现更为复杂的动画效果，通过这个Timeline，我们可以维护不同的动画之间的关系，进而通过多个不同的动画组成一个更为复杂的动画。

戳我：Timeline实例

javascript;gutter:true; var myTimeline = anime.timeline(); //通过.add()方法添加动画 myTimeline .add({ targets: '.square', translateX: 250 }) .add({ targets: '.circle', translateX: 250 }) .add({ targets: '.triangle', translateX: 250 });</p> <pre><code> ### 2.3.3 SVG动画 [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:29358426-1078-4ad3-85e4-3450d3da4698<details><summary>*<font color='gray'>[En]</font>*</summary>*<font color='gray'>[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:748d536b-9c70-4921-a450-ced20022fec1</font>*</details> #### 2.3.3.1 SVG动画讲解 (图片来源于：[GSAP官网](https://greensock.com/gsap/)) 从上图可以看出，元素之间是可以相互变化的，而且非常的流畅，这样的动画并不需要 canvas 这种重武器，简单的 DOM 就可以实现，SVG 真的是一个神器，不仅在实现图标，字体上特点鲜明，在实现柔性动画方面也独树一帜。 SVG 依然是 DOM ，他有自己独有的 Animation 标签，但也支持 CSS 的属性，其实现动画的 **本质是依赖于线条和填充，线条的变化，导致填充区域的改变，从而引起形状的变化。而线条则依赖于路径和锚点，路径和锚点的改变，直接影响了线条的变化。** 可以用AI等SVG编辑工具生成SVG图片后，配合anime.js、GSAP等现有库进行动画制作。 下面我们通过anime.js来实现一个SVG路径动画. SVG 绘制路径 [戳我：SVG实例](http://animejs.com/documentation/#motionPath) ;gutter:true;
var path = anime.path(‘.motion-path-demo path’);

anime({
targets: ‘.motion-path-demo .el’,
translateX: path(‘x’),
translateY: path(‘y’),
rotate: path(‘angle’),
easing: ‘linear’,
duration: 2000,
loop: true
});

(图片来源于：
animejs官网)

2.3.4 骨骼动画

SVG 实现的动画比较局部和小巧，使用范围也比较狭窄，但是当我们实现复杂的柔性动画，甚至游戏的时候，就还是需要用骨骼动画来实现。
(图片来源于：DragonBones官网)

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:60317260-104a-4d1b-8837-1270dea08e9b

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:9d7ac75a-6c26-4657-a3ca-75e31f58751f

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:494bff3d-439e-48f4-bc3b-f7f015df190a

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:77dd8a97-37ac-4bd6-b332-268b95e4dfc6

制作这样的动画并不复杂，你可以使用类似 Spine 和 DragonBones 这样的工具，但是做动画真的是一个体力活，你需要不断的调试，以求达到一种让人看起来舒服的状态。

2.3.4.1 骨骼动画讲解

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:e058df5f-6a7a-4757-993b-c1f89cb7823d

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:1ca75426-3383-453c-a27c-6837ca0db9d4

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:2379b3c4-5f11-463e-a347-4f078ffd7921

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:5ec2edfd-9396-49b7-b366-98a449ea267b

  1. 骨架（Skeleton）
  2. 蒙皮（Skin）

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:a0460a9f-ec78-4c5f-9e33-d4142c5dcfc2

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:645d7840-a87d-4218-b1dc-3797e35422f6

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:0e6df469-e1e3-4cf1-9da3-45afdf0077a8

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:1eab9e46-ac32-4180-bcf7-e11df3e1fb20

* 二是骨架的各种pose，也就是每个动作对应的整个骨架的位置信息。

蒙皮则表达的是依附在骨骼上的顶点的信息。

骨骼绑定的过程就是确定每个顶点受哪几根骨骼的影响，每根骨骼影响的权重有多大，譬如肘部的皮肤可能同时受大臂和小臂两根骨头的影响，而远离手肘的部分可能就只受小臂骨头影响。一般在3D骨骼动画里，每个顶点最多支持4-8根骨骼同时影响它就已经可以很精确地表达整个蒙皮的效果了。

  • *骨骼动画的优势：

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:41922f25-a904-4ead-a627-605bd6b7a19f

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:0bb780ea-bd17-43bb-ae90-43a4a4bde9c5

  1. 动画更加生动逼真。
  2. 图片资源占最小的存储空旷：骨骼动画的图片容量可以减少90%（配置文件H5的压缩方案后面详解）。
  3. 动画切换自动补间：过渡动画自动生成，让动作更加灵动。
  4. 骨骼可控 ：可以通过代码控制骨骼，轻松实现角色装备更换，甚至可对某骨骼做特殊控制或事件监听。
  5. 骨骼事件帧：动画执行到某个动作或某个帧，触发自定义事件行为。
  6. 动作数据继承：多角色可共用一套动画数据。
  7. 可结合物理引擎和碰撞检测。

2.3.4.2 骨骼动画制作

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:d9529377-f30b-4928-b199-6edae9faec38

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:b2fe9770-3023-4b82-b330-03f3d7a03b13

制作骨骼动画主要是使用 Spine 和 DragonBones 这样的工具进行制作。

DragonBones是从Flash动画开始创作的，初衷是减小资源量，同时实现更为细粒度的动作（比如交互式的），让美术从繁琐的逐帧绘制Sprie Sheet的工作中解放出来，所以它把一个角色每一帧的sprite sheet拆分成一个个更小的基本图块，譬如胳膊，腿，躯干等等，而每个基本图块仍然是最小的可控制单位。

以下游戏&渲染引擎都支持渲染DragonBones导出的文件：
(图片来源于：DragonBones官网)

Spine 是一款针对游戏开发的 2D 骨骼动画编辑工具。Spine 旨在提供更高效和简洁 的工作流程，以创建游戏所需的动画。

业界收费专业2D骨骼动画编辑工具，动画设计师推荐易用稳定，以下游戏&渲染引擎都支持渲染Spine导出的文件：
(图片来源于：Spine官网)

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:435dc981-4409-4ab4-bf8c-32142af1a4f7

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:f53afb5d-96ef-4c2f-868e-ac543eabd785

  • *创建骨骼

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:6fcf53ec-8e0f-4d1c-a4f0-a9d3b6ada79c

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:ebc0899a-c6a8-4caf-928b-9a84ff7606c5

前端动效讲解与实战
  1. 1确保左上角为SETUP模式
  2. 确保选中右边视图中的根骨骼，创建骨骼时必须要选中父骨骼
  3. 单击左下角的Create按钮

  4. 开始依次创建出5根骨骼

  5. *创建蒙皮网格

然后我们需要给手部创建蒙皮网格（MESH），如下图所示：

前端动效讲解与实战

首先，单击创建骨骼的Create按钮，退出骨骼创建模式

  1. 选中手部贴图（Attachment）
  2. 勾选其底部的Mesh选项
  3. 单击右下角的Edit按钮
  4. 呼出了Edit Mesh菜单
  5. 勾选Edit Mesh菜单中的Deformed选项
  6. 单击Edit Mesh菜单中的Create按钮
  7. 开始在手部创建网格顶点

  8. 可以单击Edit Mesh菜单中的Modify按钮对顶点进行位移

  9. *设置网格点权重

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:79519b05-d4bd-48ab-af5e-aff28415af6a

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:09ff1170-6785-4eed-b4e0-9f2535f7c003

前端动效讲解与实战

首先，关闭Edit Mesh菜单

  1. 确认勾选的还是手部的贴图
  2. 单击左下角的Weights按钮，呼出Weights菜单
  3. 单击Weights菜单底部的Bind按钮，来绑定骨骼
  4. 选择手部的五根骨骼，直到它们都出现Weights菜单里，注意不同的骨骼颜色是不一样的
  5. 单击Weights菜单的Auto按钮或者按esc键，来触发Spine的自动权重计算

  6. 勾选Weights菜单的Overlay，我们可以看到绑定后的权重热力图

  7. *动起来！

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:effb67c5-8da8-468b-8bc1-f59697f3e85b

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:8e0d6dd5-2a3d-4bea-889f-99b8c9b9a36a

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:bdc518ca-714f-4e0c-90af-4c234a865831

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:bbfe3d02-c7c5-498b-8134-3d3c015d3377

具体步骤如下图：

前端动效讲解与实战
  1. 确保左上角的模式处于ANIMATE模式
  2. 选中手部的五根骨骼（按住cmd键或control键依次点选）
  3. 选中第0帧
  4. 单击Rotate下的钥匙按钮，我们对手臂的旋转属性设置关键帧
  5. 选择第30帧
  6. 重复第4步的操作，使第30帧的关键帧与第0帧完全相同

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:7faff648-632e-45bf-b3a8-8d844b328329

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:248746a9-b32c-4068-9ead-135495271327

前端动效讲解与实战
  1. 选择第15帧
  2. 确保Rotate按钮被选中
  3. 向上旋转5根骨骼到一个角度
  4. 按下K帧按钮进行关键帧设置
  5. 按下播放按钮来预览动画

额外的，我给另一只手、嘴巴、脸部和头发都做了MESH，以下是动画的效果图：

前端动效讲解与实战

2.3.4.3 前端展示骨骼动画

用Spine将制作好的骨骼动画进行导出输出资源（合图信息文件：atlas；动画信息文件：json，图片合图：png），将这些资源交由前端进行展示。

前端开发根据 Spine或者 DragonBones能够支持的渲染引擎，在项目中导入渲染引擎进行展示骨骼动画。

2.3.5 3D动画

前端3D动画实现可以通过perspective属性操作用CSS 3D来实现，或者直接借助开源的Three.js开源库进行实现。

由于3D动画涉及的内容较多，篇幅有限，后面我们将专门开一章来讲解前端3D动画。

三、现有方案总结

3.1 纯CSS实现

适合场景： 简单的展示型动画

使用transition\animation属性，设置相应的关键帧状态，并且借助一些缓动函数来进行实现一些简单化的动画。

优点：开发成本低，不需要导入任何额外的依赖包

缺点与不足：只能够胜任做一些比较简单化的动画，无法实现一些过于负责的动画。

3.2 Anime.js

适用场景： 简单的展示型动画+弱交互型动画

Anime.js是一个轻量级的js驱动的动画库，主要的功能有：

  1. 支持keyframes，连接多个动画
  2. 支持Timeline，为实现更为复杂的动画提供了可能
  3. 支持动画状态的控制playback control，播放，暂停，重新启动，搜索动画或时间线。
  4. 支持动画状态的callback，在动画开始，执行中，结束时提供回调函数
  5. 支持SVG动画
  6. 可以自定义贝塞尔曲线

  7. 任何包含数值的DOM属性都可以设置动画

  8. GitHub：https://github.com/juliangarn…

  9. codepen仓库：https://codepen.io/collection…
  10. 文档演示：http://animejs.com/documentat…

功能介绍：

一定程度上，anime.js也是一个CSS3动画库，适用所有的CSS属性，并且实现的@keyframes能更方便的实现帧动画，替代CSS3复杂的定义方式。使用对象数组的形式定义每一帧。

戳我：keyframes实例

javascript;gutter:true; anime({ targets: 'div', translateX: [ { value: 250, duration: 1000, delay: 500, elasticity: 0 }, //第一帧 { value: 0, duration: 1000, delay: 500, elasticity: 0 } //第二帧 ] }) //这个例子实现了目标元素在两帧中实现水平位移</p> <pre><code> 提供的Timeline能实现更为复杂的动画效果，通过这个Timeline，我们可以维护不同的动画之间的关系，进而通过多个不同的动画组成一个更为复杂的动画。 [戳我：Timeline实例](http://animejs.com/documentation/#basicTimeline) ;gutter:true;
var myTimeline = anime.timeline();
//通过.add()方法添加动画
myTimeline
.add({
targets: ‘.square’,
translateX: 250
})
.add({
targets: ‘.circle’,
translateX: 250
})
.add({
targets: ‘.triangle’,
translateX: 250
});

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:9efa4d2b-965d-4e3b-a301-a3fd50af08b6

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:96d871d6-5e14-4e49-a62f-97d20b235b13

戳我：playback controls实例

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:a2a13f25-5e11-46d0-a7b3-e92198eab529

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:93b7e303-31b4-46f2-91d0-cfdd56ef520a

戳我：callback实例

javascript;gutter:true; var myAnimation = anime({ targets: '#begin .el', translateX: 250, delay: 1000, begin: function(anim) { // callback console.log(anim.began); // true after 1000ms } });</p> <pre><code> 支持promise，动画结束后，调用anime.finished会返回一个promise对象。 [戳我：promise实例](http://animejs.com/documentation/#finishedPromise) 支持svg绘制路径，目前不支持canvas绘制。 [戳我：SVG实例](http://animejs.com/documentation/#motionPath) 对于input这样带有数值的元素标签，也可以通过anime实例来设置动画。 [戳我：DOM ATTRIBUTES实例](http://animejs.com/documentation/#domAttributes) ;gutter:true;
anime({
targets: input,
value: 1000, // Animate the input value to 1000
round: 1 // Remove decimals by rounding the value
});

优点：

  • 显而易见，anime.js不仅实现了CSS3动画的深度封装，更多的是通过js驱动来实现操作动画的状态，timeline实现了对于多个分支动画的管理，对于实现更为复杂的动画提供了可能。

  • 通过anime.js提供的playback controls和callback，同时对于promise的支持，让我们对于动画的简单交互有了操作的空间。

  • 虽然不支持canvas，但是支持svg绘制路径。

  • 浏览器兼容性比较好，Android 4以上全部支持。

前端动效讲解与实战

缺点：

Anime.js做展示型动画是可以胜任的，但是对于特别复杂的动画也是不太能够实现，在做交互性动画方面还是需要看场景，它更多适合做一些小型的交互动画，类似于通过触摸屏幕踢足球这种强交互的，anime.js就不是很有优势了。

3.3 Lottie

适用场景： 复杂的展示型动画

通过 AE 上的 Bodymovin 插件将 AE 中制作好的动画导出成一个 json 文件，通过Lottie对JSON进行解析，最后以SVG/canvas/html的方式渲染动画。

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:4b92472a-022b-445a-84ba-6442d365c374

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:c8cde195-b26f-44d5-b96e-67b7362203af

优点：

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:31f5c5e8-7e14-4712-8ed9-f3b6e0b63364

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:54c05699-4bd7-4f0b-b591-dd6b8a58ed6a

* 文件更小，获取AE导出的JSON，最后通过lottie渲染为canvas/svg/html格式。
* 可以通过api操纵动画的一些属性，比如动画速度；添加动画各个状态的回调函数。
* 动画都是在After Effects中创建的，使用Bodymovin导出，并且本机渲染无需额外的工程工作。
* 解放前端工程师的生产力,提高设计师做动效的自由度。

缺点：

  • Bodymovin 插件待完善，仍然有部分 AE 效果无法成功导出。
    [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:55730800-9146-42be-8d56-3b9e1a6d2037
    [En]

    [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:616ee788-084a-4e6a-9dcc-b32c8696ab04

  • Lottie 对 json 文件的支持待完善，目前有部分能成功导出成 json 文件的效果在移动端上无法很好的展现。
  • 很多AE的效果是不支持的查看支持的特性：Supported Features。

3.4 PixiJs

适用场景：交互型动画，动画小游戏

PixiJS是一个2D 渲染引擎， Pixi 主要负责渲染画面。可以创建丰富的交互式图形，动画和游戏，而无需深入了解WebGL API或处理浏览器和设备兼容性的问题。与此同时，PixiJS具有完整的WebGL支持，如果需要，可以无缝地回退到HTML5的canvas。PixiJs默认使用WebGL渲染，也可以通过声明指定canvas渲染，WebGL在移动端Android 4.4 browser并不支持，不过可以使用canvas优雅降级。

特性（摘自官方DOCS）：

  • 支持WebGL渲染
  • 支持canvas 渲染（官方称PixiJS在canvas渲染方面现在是最快的）
  • 非常简单易用的API
    [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:c31b7fd1-5bd1-4124-a589-3440e88d8eb2
    [En]

    [TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:e87a399e-95ef-499f-8d36-32873b9a0ad0

  • Pixi使用和 canvas Drawing几乎一致的 api，但不同于 canvas 的绘画 api，使用 Pixi 绘制的图形是通过 WebGL 在 GPU 上渲染
  • 还有一系列特性需要在学习PixiJs之后了解

优点：

  • 最大优势莫过于通过WebGL来调用GPU渲染动画，这样极大的提升了性能。
  • 无需深入了解WebGL API或者是浏览器兼容性（因为下面这条原因）。
  • 支持canvas回退，当前设备不支持WebGL时，PixiJs会使用canvas渲染动画。
  • 完整的DOCS，比较活跃的社区，有利于深入的学习。不过我感觉PixiJs学习成本相对来说还是很高的。

缺点：

  • 首先是兼容的问题，WebGL在Android 4.4 是不支持的，只能使用canvas进行降级。
  • Pixi 主要负责渲染画面，很多其它功能开发者得自己写或搭配其它库来使用，不过按照目前来看，是满足我们的需求的。

性能：

对于手机版本Android4.4 以上的手机，除了代码层面造成的性能不足，通过WebGL调用GPU渲染，性能还是有保障的。然而对于Android4.4只能使用canvas渲染，性能还是要看动画的复杂度，以及代码的优化

3.5 总结

简单的展示型动画：对于比较简单的动画，我们可以先尝试使用原生CSS的transition\animation属性来进行实现。

简单的展示型动画+弱交互：对于简单的动画展示并且需要有简单的交互行为，比如用户点击一下暂停执行相应操作，待操作完成继续播放动画，交互方面比较偏弱，可以采用Anime.js的方案。

Anime.js不仅仅支持所有的CSS属性，而且可以通过Timeline，callback， playback controls来控制动画执行的各个状态，并且Anime.js可以配合实现SVG动画。

复杂的展示型动画：

  1. 如果所需的资源很小，可以先考虑使用GIF动图或者逐帧动画CSS实现；
  2. 如果所需的资源较大，可以使用Lottie方案，然后设计同学用AE到处动画json，将动画还原为svg/canvas/html。

强交互&互动小游戏&骨骼动画：

  1. 对于交互场景比较负责或者需要做一个小游戏，可以采用PixiJs，通过WebGL来渲染，利用硬件资源，极大的提升性能，在兼容性方面，对于不支持WebGL的浏览器，可以使用canvas渲染来平稳回退；
  2. 如果是需要展示骨骼动画，可以通过PixiJs方案进行渲染由Spine或DragonBones输出的文件。

Original: https://www.cnblogs.com/vivotech/p/16716587.html
Author: vivo互联网技术
Title: 前端动效讲解与实战

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/562215/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球