Web动画形式

背景

对于Web开发者来说，不管什么细分方向，比如数据可视化、网站系统、电商网站等等，都会涉及到一个难题“动画”。
因为动画关系到Web开发的两个比较重要的点，一是视觉效果，二是用户体验，通过酷炫动画效果可以给视觉加不少分，同样，恰到好处的微动效也会给用户体验带来不错的惊喜，基于此，我们的Web动画该如何实现，他有哪些实现方式呢？

动画形式

大概梳理了下，动画有不止以下几种形式：
一、CSS3动画
二、JS动画
三、Canvas动画
四、SVG动画
五、以Three.js为首的3D动画
针对以上动画形式，我们来简单介绍下吧。

一、CSS3动画

CSS3动画是我目前工作中用到最多的动画形式，因为它书写简单，性能好，不需要懂JavaScript也能写动画，甚至可以实现一些三维立体效果。
CSS3动画又包含几种，比如，transform，transition，animation。

Transform（变形）

transform变包含了rotate（旋转）、scale（缩放）、translate（移动）、skew（扭曲）以及matrix（矩阵变形）。
我们一般会结合transition来使用，使元素变形的过程变的平滑。

Transition（过渡）

CSS3中的transition是让元素的属性值在一定时间区间内平滑过渡，还可以定义变换速率。不是所有的属性都支持过渡的，或者说有很多属性都支持过渡，所以最好还是了解下，没准下次我们就能创造不一样的动画效果了呢！

属性名称	类型
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

Animation（动画）

“关键帧”是指在某个时间点上，定义元素的状态，如果把动画时间区间里面，每个时间点都定义元素状态，这种叫逐针动画，这种形式一般用在动画软件制作上才会用到，因为制作成本高，所以我们一般会采用另一种更方便、更简单的实现方式，就是补间动画。补间动画是指我们定义好两个时间节点上元素的状态，中间元素变化的过程由计算机帮我们计算好，比如下面的例子：

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

二、JS动画

JS动画一般是通过定时器和计时器来实现元素属性的不断变化，这里一般常用的有jQuery的animate()方法。
JS动画这里不做太多介绍，因为我平时用的也不多。

三、Canvas动画

动画的本质和以前放电影是一个原理，就是通过一系列差别不大的图片，快速的切换显示，由于人的眼睛有视觉暂留现象，造成了我们看到快速切换的图片动起来了。
Canvas动画也是不断的快速的在屏幕上绘制图像和清除屏幕，形成了动画。如下：

<canvas id="canvas" width="500" height="500"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var canvasWidth = context.canvas.width;//画布的宽
    var canvasHeight = context.canvas.height;//画布的高
    var x = 0;
    function animation(){
        x++;//用于更新动画元素的X坐标位置
        context.clearRect(0, 0, canvasWidth, canvasHeight);//清除画布
        context.fillRect(x,250,10,10);//绘制一个横向运动的矩形
        setTimeout(animation,33);        
    }
    animation();
</script>

四、SVG动画

SVG入门可以学习《SVG精髓》这本书，关于SVG动画方面下面简单介绍一下。
SVG内置了一些动画元素，比如：
<animate>属性能随时间改变属性值
<animateMotion>属性使元素沿着动作路径移动
<animateTransform>属性使SVG随时间操作Transform，这与CSS3中的Transform属性类似
<animateColor>属性随时间修改对应属性的颜色值
但是因为以上动画元素兼容性不是很好，所以建议大家尽量使用元素属性来进行SVG的动画制作，比如stroke-dasharry,stroke-dashoffset，可以实现描边动画，可以看下我之前做的案例。
《SVG初体验》

五、以Three.js为首的3D动画

Three.js是一个基于JavaScript，使用方便，运行在浏览器中的轻量级的3D框架，可以用它创建各种三维场景，包括摄影机，光影及材质等各种对象，并且提供了Canvas、SVG、CSS 3D及WebGL4中渲染器。
目前兼容到IE10，需要降级处理。

里面的动画原理和Canvas动画有点相同，也是通过Three.js的API接口，来不断快速的改变元素属性和状态，形成动画效果。
它不仅仅可以创建动画效果，还可以创建元素对象，我们CSS中，元素对象一般是用CSS样式来控制的，而Three.js 可以直接通过JS创建元素对象。

总结

以上我们对Web动画形式进行了简单的介绍，我们平时最常用的还是CSS3动画，我们也会根据项目需求，调整动画形式，这里我们没有将如何制作一个动画效果，而是大概念的梳理了下目前实现动画的形式，让大家在平时工作的过程中，不要专注于实现一个动画而忘记了实现动画有很多形式。

对于复杂动画我们有时会用帧动画来实现，那帧动画有哪些实现方式呢，我们后面也将继续介绍。