javascript - 将变量传递给 .animate Step 函数

Question

在尝试将变量传递到我的步骤函数以处理一些最终的跨浏览器后备动画时遇到了麻烦。我在这里构建了一个通用动画方法:

Animator:function(obj,aniArgs,duration,aniEasArgs,delay,stepFunction,completeFunction){
    obj.stop(true,true).animate(aniArgs,
        {duration:parseInt(duration,10),queue:false,specialEasing:aniEasArgs,
         step:function(now,fx){     
        if($.isFunction(stepFunction)){ 
                     stepFunction.apply(this,arguments); 
        };      
     },complete:function(){
        if($.isFunction(completeFunction)){   
                     completeFunction.apply(this,arguments); };}});
         };
}

这可以工作并为所需的一切提供动画效果。不过，我正在尝试调用 Animator 函数并使用步骤函数来对属性进行动画处理。电话如下:

var angle=0,            
    stepFunction=function(now,fx,angle){
    angle+=1;
        $(this).css({"-ms-transform":"rotate("+angle+"deg)"});
    };

Animator(obj,aniArgs,speed,easing,0,stepFunction,null);

传入的所有其他参数都很好并且检查良好。 obj 是正在动画的 obj，aniArgs 是包含要动画的所有 CSS 名称/值的对象文字，speed 是速度，easing 是包含所有 CSS 名称/缓动值的对象文字，stepFunction 是上面声明的函数变量，并且 null表明没有完整的函数要执行。

一切都运行良好，但我遇到了步骤函数的变量问题。我似乎无法获得实际阶跃函数内部的 Angular 值。在该步骤中，我可以记录 now 和 fx，它们运行良好，但是我无法传递初始值为 0 的 Angular ，以便我可以增加它。

有什么想法我哪里出错了吗？谢谢!

Answer 1

。 。正如 @Beetroot-Beetroot 在我完成评论前几秒所说的那样，每次调用 progress 函数 之间的时间不一定是恒定的，并且向 angle 变量添加一个恒定值会让你的动画看起来不对。

。 。 step 事件，按照 jQuery documentation ，每个属性的每个刻度可能被调用多次，并使用一组在这种情况下并不真正有用的参数。我们一直在评论 progress 回调，但使用了错误的名称。我不确定 jQuery 是否改变了它的实现(似乎在 v1.8 上添加了 progress 函数)，但出于某种原因，我脑子里有这个“步骤”名称。我觉得不可思议GreenSock's tweening library也使用“步骤”名称。无论如何，在 jQuery 中，step 和 progress 的签名如下:

步骤:函数(现在编号，Tween 补间):第一个参数是要进行动画处理的一个属性的值，第二个参数是 jQuery 的补间对象(包括 prop 属性，以便您知道 now 值引用了哪个属性)。

进度:函数(Promise动画、Number进度、Number剩余Ms):第一个参数是a jQuery promise object代表动画，第二个参数是0到1之间的数字，代表动画进度的百分比，第三个参数是动画结束之前的毫秒数。

。 。出于您的目的，progress 事件显然正是您所需要的。请记住将传递给 Animator 函数中的 jQuery.animate 的对象中的 step 属性更改为 progress。 .

。 。您需要使用 progress 值(因为它是 0 到 1 之间的值，表示动画进度的百分比)作为计算 progress 函数 内当前 Angular 因子每次调用时:

progressFunction = function(animation, progress, lastingms) {
  var startAngle = 0, endAngle = 180;
  var angleRange = endAngle -startAngle;
  var curAngle = startAngle +(angleRange *progress);
  $(this).css({"-ms-transform":"rotate("+ curAngle +"deg)"});
};

。 。每当您需要更多值进行动画处理时，请使用相同的逻辑:

progressFunction = function(animation, progress, lastingms) {
  var startA = 0, endA = 180, rangeA = (endA -startA);
  var startX = 254, endX = 894, rangeX = (endX -startX);

  var curA = startA + rangeA *progress;
  var curX = startX + rangeX *progress;
  $(this).css({
    "-ms-transform":"rotate("+ curAngle +"deg)",
    'left': curX +'px'
  });
};

。 。如果您打算在代码的许多部分将它用作库，那么尝试使其更加自动化是有意义的，这样您就不需要一直编写相同的逻辑。