移动端专题系列（二）移动端动画

发表于 | 分类于

随着css3逐渐被各大浏览器全面支持，移动端的动画可以借助css3，从而避开js的运动实现。再配合canvas、svg等技术，在移动端做出酷炫的动效已经不是什么难题了。

###transition动画

准备的说，transiton不算动画，transiton是过渡的意思。css本身的状态变化是即时完成的，css3提供的transiton就是让这个变化有个过程，这样就产生了过渡的动画。

1
2
3
4
5
6
7
8
9
10
img{
    transition: 1s 1s height ease;
}
//完整的形式
img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

transion简单易用，但是有局限的：

  • transition需要事件触发，所以没法在网页加载时自动发生。这一度被认为是transition的bug.详细的单独看《transition自动加载问题》
  • transition是一次性的，不能重复发生，除非一再触发。
  • transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

要解决这些问题，animation被提出来了。

##animation动画

animation是真正的动画，是基于帧的动画（感觉跟flash差不多），所以很强大。

animation参数详解：
animation：animation-name | animation-duration | animation-timing-function | animation-delay |animationiteration-count | animation-direction

1
2
3
4
5
6
7
8
9
10
animation-name //检索或设置对象所应用的动画名称；自己定义一个或多个，
animation-duration //检索或设置动画的持续时间，默认值0；
animation-timing-function //检索或设置动画的过渡类型即频率；同过渡的频率；
animation-delay //延迟时间，意思就是多久后执行这个动画；
animation-iteration-count //循环次数，默认值是1，infinite（无限次）|number；
animation-direction //检索或设置对象动画在循环中是否反向运动，normal | alternative（第一次运动结束后然后反向运动）；
animation-fill-mode //动画结束后，默认跳回到起始状态 
//forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
//backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
//both 向前和向后填充模式都被应用。

tips:animation动画只有在active状态下才起作用(display:block)，如果元素display:none，animation不起作用，利用这一点，可以做翻屏一页页的动画形式。原理就是给当前的page加active标志

##Animate.css

Animate.css是一个css3的动画库，可以方便的做出一些常见的动画。当我们需要使用其中一种动画时候，把对应的动画keyframes部分代码拿出来即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//fadeIndown动画
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

##插件
一些特殊的效果借助于插件将更便捷的实现。

####视差滚动效果
parallax
skrollr

####页面切换
zepto.onepagescroll
jquery.onepage-scroll

##总结
动画重在积累，平时看到好的动画效果一定要研究下，储藏起来。等到用的时候才会顺手。