Mobile Web前端开发系列: 动画系列（一）

谈到动画效果，CSS动画不得不谈，CSS动画是Mobile web开发的利器，受限于Mobile设备性能 等问题，PC上的动画实现方案在Mobile上大都行不通，幸运的是，在Mobile上我们可以用CSS动画， 今天我们就来了解一下CSS动画的3个主要成员。

CSS变换（Transitions）

transitions是默认的渐变动画，我们定义好需要变换的CSS属性，当CSS属性变化的时候，transitions 动画被触发。但是并不是所有的CSS属性变化都会触发translations，目前，并没有一个官方的文档列出来 那些可以，那些不可以，但是，我们可以通过一些小窍门来判断，像那些值是连续数值的属性，例如width、height、 top、left、color、opacity都是可以的，visibility是不可以的，虽然它的值是数值类型的，但是它不是连续的。

transitions在iphone和Andriod平台上都可以运行，而且有很高的性能。

我们可以通过CSS来定义transitions，也可以通过JavaScript来定义，使用起来非常简单，

1.定义Dom元素的transitions属性（duration、delay、timing function等） 2.使用JavaScript改变Dom元素的CSS样式

怎么样，很简单吧，下面我们来看一下transition的属性，

-webkit-transition-property 定义需要渐变的属性 -webkit-transition-duration 定义动画时间 -webkit-transition-delay 定义延迟时间 -webkit-transition-timing-function 定义贝赛尔曲线函数

-webkit-transition-property可以定义具体的属性，例如width，height，多个属性用逗号隔开， 也可以定义all，这样所有具有连续数值类型的样式属性变化都会触发transtions，现在我们可以尝试 创建一个transitions，

div.zoom-fade { -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: 4s, 2s; -webkit-transition-delay: 2s, 0; }

我们也可以把这些属性写在一行，

div.sliding { -webkit-transition: opacity 500ms ease-out 100ms; }

-webkit-transition-timing-function可以定义动画的渐变速度曲线，可以设置为，

ease 默认，逐渐慢下来，贝赛尔曲线函数为cubic-bezier(0.25, 0.1, 0.25, 1.0) linear， 均速，贝赛尔曲线函数为cubic-bezier(0.0, 0.0, 1.0, 1.0) ease-in， 在渐入时加速，贝赛尔曲线函数为cubic-bezier(0.42, 0, 1.0, 1.0) ease-out，在淡出时减速，贝赛尔曲线函数为cubic-bezier(0, 0, 0.58, 1.0) ease-in-out， 加速然后减速，贝赛尔曲线函数为cubic-bezier(0.42, 0, 0.58, 1.0)

-webkit-transition-timing-function既可以设置简称，也可以直接设置自己定义的贝赛尔曲线函数

transitions结束后会触发webkitTransitionEnd事件，我们可以使用addEventListener来添加事件 监听器，

element.addEventListener('webkitTransitionEnd', function(event) { alert("Finished transition"); });

Animations

transitions使用起来很简单，很方便，但是如果你想自己控制每帧的变化，那transitions就不能满足 你了，这时候你需要使用animations，animations有如下属性，

-webkit-animation-name 指定关键帧名称（动画的名称） -webkit-animation-duration 指定多少秒或毫秒的时间才能完成动画 -webkit-animation-timing-function 指定动画的速度曲线 -webkit-animation-delay 延迟开始动画 -webkit-animation-iteration-count 播放次数；默认：1，可以定义为infinite（无穷） -webkit-animation-direction 动画方向；默认：normal

与transitions不同的是，animations需要定义帧，我们可以使用 @-webkit-keyframes来定义帧，

@-webkit-keyframes squarePath { from { top: 100px; left: 100px; } to { top: 0px; left: 0px; }

我们用from代表起始的帧，to代表最后的帧，也可以采用百分比来定义帧，

@-webkit-keyframes squarePath { from { top: 0px; left: 0px; } 25% { top: 0px; left: 100px; } 50% { top: 100px; left: 100px; } 75% { top: 100px; left: 0px; } 100% { top: 0px; left: 0px; }

这样我们可以定义一个完整的animations，

.squareAnimation { -webkit-animation-name: squarePath; -webkit-animation-duration: 4s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; }

我们也可以采用缩写，

-webkit-animation: squarePath 4s linear 0 infinite

当我们定义好animations，使用JavaScript把动画设置到元素上，动画开始运行，动画运行结束后，所有的属性会还原到 最开始的状态，当我们需要重新运行动画的时候，我们需要重新为元素定义动画。

animations运行的时候会触发一系列事件，

webkitAnimationStart 动画开始 webkitAnimationIteration 动画重复执行 webkitAnimationEnd 动画结束

我们依然可以监听这些事件。

Transforms

transforms主要是改变，使…变形，转换，它本身并没有渐变或者动画的效果，但是transform和transitions结合可以实现很漂亮很强大的效果，它的常用属性主要有，

rotate 旋转 skew 倾斜 scale 比例 translate 变动，位移

transform的坐标系和文档流的坐标系不同，也就是说当元素transform的时候并不会影响原有文档流。

我们可以使用CSS操作transform，

<div style="-webkit-transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/>

我们也可以使用JavaScript操作webkitTransform属性来设置或获取transform，

div.style.webkitTransform = 'rotateY(10deg) translateX(10px)';

通过以上方式操作的是字符串，我们也可以通过WebKitCSSMatrix来操作对象，

var theTransform = window.getComputedStyle(div).webkitTransform; var matrix = new WebKitCSSMatrix(theTransform);

返回的matrix不仅包含矩阵属性，还包含一些方法，让我们可以设置transform,

var box3 = document.getElementByIdx_x('box3'); box3.style.webkitTransform = matrix.scale(0.5, 0.5);