4回答

• 

  GavinZeng

  2016-10-28 15:09:31

  已采纳

  step这个属性，研究了1天了，我来尝试回答一下：

  先引入一个概念：

  一个动画执行的进度，可以用2个指标来描述，一个是动画属性的变动值，另一个是动画在整个执行过程的进度

  比如有一个动画效果：div向左移动100px，用时200毫秒

  那么我们怎么描述这个动画的每一步是什么呢？

  我们可以说：div向左每移动1个px，可以看成动画执行了一步；

  同时我们也可以说：我们把200毫秒分成100个时间段，动画开始后，把每个时间段的流逝，看作动画执行了一步。

  要特别特别注意的是：在animate方法中，每一步具体是怎么分解的，不是由我们设定的CSS属性值和动画时长来决定的，是由系统来决定的。

  举个例子：

  var i = 0;
  $("div").animate({left:100},{
      duration:100,
      step:function(now,fx){
          console.log(i) //控制台输出，看看这个动画被分解成了几个片段
      }
  });

  上面的代码中，不论使用step属性或者progress属性都可以执行。

  你会发现，每次重复执行，然而几乎每一次 i 的值都有少量的差别，好了，结论就是：系统决定动画片段的数量。

  上面扯的有点远了，不过对我们理解动画进度这个概念还是有帮助的，现在可以来解释 step 和 progress 的区别了

  • 相同点：step 和 progress 这两个属性，都是在动画执行的每个阶段来调用函数，大部分情况下，使用任意一个，都可以得到我们想要的效果。

  • 不同点，主要在fx这个参数上：

    step： fx返回的是和css相关的属性；

    progress： fx返回的是动画进度本身的属性；

  举个例子：
  

  <div style="width:100px;height:100px;background-color:red"></div>
  <p style="width:100px;height:100px;background-color:black"></p>
  <script>
  $("div").animate({left:100},{
      duration:100,
      step:function(now,fx){
          console.log("参与动画的元素："+fx.elem);
          fx.elem = $("p");
      }
  });
  </script>

  运行一下你会发现，虽然我们在div元素上添加了动画，但是实际执行动画的元素却是p
  

  有意思吧，原因就在于，fx.elem = $("p");  将参与动画的元素改变成了$("p")

  step的回调函数fx，还添加了很多属性，可以参考jQuery的API文档：http://www.css88.com/jqapi-1.9/animate/

  不过progress的回调函数fx，就没有这么多花样了，因为它返回的就是动画进度本身，也就是返回当前的进度值。代码如下：

  $("div").animate({left:100},{
      duration:1000,
      progress:function(now,fx){
          console.log("当前进度值："+arguments[1]);
      }
  })

  另外要说明的是：step 函数只能返回我们在代码中设置的最后一条CSS属性值，如：

  $("div").animate({
      left:100,
      opacity:0.2
      },{
      duration:1000,
      step:function(now,fx){
          console.log("返回的CSS属性是："+fx.prop);
          console.log("属性初始值："+fx.start);
          console.log("属性结束值："+fx.end);
          console.log("属性当前值："+fx.now);
      }
  })

  以上代码只能返回 opacity 属性的相关值，而无法返回left的值，虽然这个值也参与了动画效果

  4 21

  _Rainy

  以上代码只能返回 opacity 属性的相关值，而无法返回left的值，虽然这个值也参与了动画效果，以上经测试用text打印出来now，可以看见其实三个值都是有的。但是因为每一步的三个css值改变用的同一个now，所以每一步最后的now都是显示最后一个css属性的当前。

  2018-01-20 15:29:45

  共 4 条回复 >

• 

  慕移动9181930

  2022-03-25 16:42:11

  可以嵌套?只要不交叉随便用异步调用。。各种与服务器进行交互的方法吧。

  0 0
• 

  慕粉4026868

  2016-12-14 15:33:06

  step：规定每个动画的每一步完成之后要执行的函数

  progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念

  
  

  0 0
• 

  韩_小_信

  2016-09-30 09:47:18

  step - 规定动画的每一步完成之后要执行的函数

  H5:<progress> 标签定义运行中的进度（进程）。

  1 0

  any_do

  1、那‘每一步’是怎么理解的？比如一个w:200,H:200的矩形，变成400*400，这个算是一个step吗？然后执行一次函数？ 2、还是200*200变400*400的动画，执行这个动画时，<progress>是什么意思？

  2016-10-10 17:44:14

  共 1 条回复 >