夏日博客

A-A+

jquery animate step实现css3属性动画

2016年01月11日 前端设计 暂无评论 阅读 4 views 次

animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果,下面我们一起来一个jquery animate step实现css3属性动画的例子。

jquery animation的工作原理是通过将元素的css样式从一个状态改变为另一个状态。css属性值是逐渐改变的，这样就可以创建动画效果。

但是animate方法下，只有数字值可创建动画（比如 “top:30px”），字符串值类型的值则是无法创建动画（比如 “background-color:red”）。而工作中我们遇到的更多是想通过jquery animate来控制 css3属性，而css3好多效果因为不是数值的，所以是没有办法直接通过animate()开发方法 实现的。如translate(), rotate(), scale(), skew(),等开发方法 ，这些开发方法 的一个特点就是它们的值是字符和数字混合在一起，如：rotate(360deg);

还好animate()方法有个stp参数规定动画执行的每一步都要执行step这个回调函数。我们可以用使用一个不影响元素效果显著的css值来触发animate()开发方法 ，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了，实例：

  1. <style>  
  2.  .demo{width: 200px;height: 200px;border: 1px solid #f00;}  
  3. </style>  
  4. <div class="demo">  
  5.  jquery animate控制 css3属性  
  6. </div>  
  7. <script>  
  8.  $(".demo").animate({  
  9.   deg: 360  
  10.  }, {  
  11.   step: function(n, fx) {  
  12.    console.log(n);  
  13.    $(this).css("transform", "rotate(" + n + "deg)");  
  14.   },  
  15.   duration:2000  
  16.  });  
  17. </script>  

运行可看到动画效果，对于step这个关键参数的用法，可看下面的相关注释，网上的介绍几乎没有，纯属个人见解：

  1. <script>  
  2.  $(".demo").animate({  
  3.   first:2,  
  4.   second:10  
  5.  }, {  
  6.   step:function(n,fx){  
  7.    // 动画元素的每个动画属性每一次动画效果的执行都将调用的函数。第1个参数是当前动画正在改变的属性的实时值（每1次动画过程中，属性值的实时反馈呈现）；第2个参数为修改Tween 对象提供了一个机会来改变animate第1个参数中设置的属性在动画结束时的值。  
  8.    // fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如  
  9.    // 执行动画的元素：elem;  
  10.    // 动画正在改变的属性：prop;  
  11.    // 正在改变属性的当前值：now;  
  12.    // 正在改变属性的结束值：end;  
  13.    // 正在改变属性的单位：unit;等  
  14.      
  15.    // 可在这里改变animate第1个参数中设置的属性second在动画结束时的值  
  16.    if(fx.prop=="second"){fx.end=5}  
  17.    console.log(fx.prop+": "+n);  
  18.   },  
  19.   duration:2000  
  20.  })  
  21. </script>  
标签：

给我留言