js实现动画的方法

1.css的transition。

语法：

transition: property duration timing-function delay;

property:填写需要变化的css属性如：width,line-height,font-size,color等;

duration:完成过渡效果需要的时间（2s 或者2000ms）

timing-function:完成效果的速度曲线（linear,ease,ease-in,ease-out等等）

值	描述
linear	匀速（等于 cubic-bezier(0,0,1,1)）。
ease	从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	慢慢变快（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	慢慢变慢（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)）。渐显渐隐效果
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

timing-delay:动画效果的延迟触发时间（2s 或者2000ms）。

默认值分别为：all 0 ease 0 

   transition抓住了所设置变化属性的起始态和完成态，通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性，默认为all，则所有变化的属性都会在出发时，以动画的形式展现出来。

这种动画方式是css3的，因此ie9以下是不支持的，其他的浏览器需要加前缀，并且只有两态，不支持自定义中间的状态。

例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<style type= "text/css" > div { width : 100px ; height : 100px ; background : red ; transition:width  2 s; -moz-transition:width  2 s;  /* Firefox 4 */ -webkit-transition:width  2 s;  /* Safari and Chrome */ -o-transition:width  2 s;  /* Opera */ }    div:hover { width : 300px ; } </style> <div></div>

　　

tips：transform是一种变化属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。可以作为transition中需要变化的属性。

　　　前缀：

　　　　　　transform:rotate(9deg);
　　　　　　-ms-transform:rotate(9deg); /* Internet Explorer */
　　　　　　-moz-transform:rotate(9deg); /* Firefox */
　　　　　　-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
　　　　　　-o-transform:rotate(9deg); /* Opera */　　

 

2.css3的animation属性

语法：

animation: name duration timing-function delay iteration-count direction;

name:keyframe的名称，也就是定义了关键帧的动画的名称,这个名称用来区别不同的动画。
duration:完成动画所需要的时间（2s 或者 2000ms）
timing-function:完成动画的速度曲线
delay：动画开始之前的延迟
iteration-count：动画播放次数
direction：是否轮流反向播放动画（normal:正常顺序播放，alternate下一次反向播放）如果把动画设置为只播放一次，则该属性没有效果。

使用animation属性制作动画可以更加灵活的设置动画帧，通过不同keyframe（动画帧）的设置，实现很多优雅的效果，keyframe中的百分数是动画完成总时间的比例。
animation是设置总的动画效果，而keyframe中设置上相应的动画名字，然后在keyframe中设置具体的动画效果。当然由于是css3的属性，仍然需要注意它的兼容性，加上必须的前缀。

例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<style> div {      width : 100px ;      height : 100px ;      background : red ;      position : relative ;      animation:mymove  5 s infinite;      -webkit-animation:mymove  5 s infinite;  /*Safari and Chrome*/ }   @keyframes mymove {      1%  { left : 0px ;}      20% { left : 200px ;}      50%  { left : 300px ;}      100% { left : 200px ;} }   @-webkit-keyframes mymove  /*Safari and Chrome*/ {      1%  { left : 0px ;}      20% { left : 200px ;}      50%  { left : 300px ;}      100% { left : 200px ;} } </style>   <div></div>

3.Jquery的animate函数

语法：

$(selector).animate(styles,options)

styles:产生动画的css样式和值；
options={
   speed:动画的速度（可选参数：slow,normal,fase）
   easing：动画的速度函数（可选参数：swing，linear）
   callback：动画完成之后要执行的函数；
   queue：是否放置在效果队列中，是布尔值，为false则立即开始
   specialEasing:styles参数的一个或多个属性映射及对应的easing函数。}

1 2 3 4 5 6 7 8 9

$(myElement).animate({         left :  500 ,         top :  200 }, {<br><br>　　　　duration: '3000' ,         specialEasing: {              left :  'swing' ,              top :  'linear'          } });

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

可以使用的属性有：（使用比如 "fontSize"来设置，而非 CSS 名称（比如 "font-size"））

backgroundPosition，borderWidth，borderBottomWidth，borderLeftWidth

borderRightWidth，borderTopWidth，borderSpacing

margin，marginBottom，marginLeft，marginRight，marginTop

outlineWidth

padding，paddingBottom，paddingLeft，paddingRight，paddingTop

height，width

maxHeight，maxWidth，minHeight，minWidth

font，fontSize

bottom，left，right，top

letterSpacing，wordSpacing，lineHeight，textIndent

可见通过jquery的animation生成动画的过程中可同时使用多个属性，也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=，如（height:'+=150px'），还可以使用队列机制进行步骤式的动画如：

 

1 2 3 4

div.animate({ height : '300px' ,opacity: '0.4' }, "slow" ); div.animate({ width : '300px' ,opacity: '0.8' }, "slow" ); div.animate({ height : '100px' ,opacity: '0.4' }, "slow" ); div.animate({ width : '100px' ,opacity: '0.8' }, "slow" );

 

动画就会按照顺序一步一步实现，并且不用考虑兼容性，因为几乎都兼容。　

 

但是，animate函数只能够实现一些数值属性，能够实现的变化非常有限制，而且使用这个函数时还要配合stop来使用，在达到某条件时终止动画，设置比较复杂。

4.原生js动画 

 原生js动画利用js代码，将动画一步以函数的方式写出来，可以实现多种动画样式，而且可以自己做兼容性处理，自己设立每一步的动画效果，并且能够完成比较复杂的效果，但是代码量很大。如下面的例子：需要自己定义所有的动态函数，并进行计算、判断和处理

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<div id= "odiv"  class= "odiv" >       <div id= "sdiv"  class= "sdiv" >       </div> </div>   <script language= "javascript" > window.onload = function(){       var odiv = document.getElementById( 'odiv' );       odiv.onmouseover = function(){        startMover( 0 );   }   odiv.onmouseout = function(){        startMover( -200 );   } } var timer = null; function startMover(a){//速度和目标值       clearInterval(timer);//执行当前动画同时清除之前的动画       var odiv = document.getElementById( 'odiv' );   timer = setInterval(function(){       var speed = (a-odiv.offsetLeft)/ 10 ;//缓冲动画的速度参数变化值   //如果速度是大于 0 ，说明是向右走，那么就向上取整       speed = speed> 0 ?Math.ceil(speed):Math.floor(speed);   //Math.floor();向下取整       if(odiv.offsetLeft == a){        clearInterval(timer);       }   else{        odiv.style. left  = odiv.offsetLeft+speed+ 'px' ;    }   }, 30 ); } </script>

5.插件

网上可以搜到很多封装好的动画插件，这些插件可以直接引入到页面中，通过初试话和配置的方式进行设定，直接在页面中展示动画。

如：waves，textillate.js等等。

 

6.使用canvas制作动画

我们还可以使用canvas在浏览器上画图，并且利用其api，制作动画。canvas使用的地方非常多，尤其是在制作h5小游戏上。

同样都是使用编码的方式由前端开发工程师完成动画效果，canvas要比原生js效率高的多，流畅的多。通过画笔的方式，能够轻松的实现更多的动画效果。

至于canvas如何使用，请看我博客中正在连载的教程--html5 canvas常用api总结。

 

7.引用gif图片

如果在需求特别紧急，而且动画又特别复杂的情况下，自己没有把握按时实现效果，或者代价太大，真的，别犹豫，上gif图片吧，不要在技术上纠结了，虽然在工程师的角度上这样做很low，但是，用户的体验是没有影响的~所以，别纠结，就是要快！完成最重要了！