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

内容简介：移动端专题系列（二）移动端动画

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

###transition动画

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

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

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部分代码拿出来即可。

//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);
  }
}

##插件

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

##总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• React专题：可变状态
• React专题：生命周期
• React专题：组件
• Redux专题：实用
• 微内核专题系列
• 自然语言处理专题

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。