javascript - vivus.js中的animationTimingFunction是什么

Question

我刚刚浏览了 vivus.js 的源代码，发现了以下代码:

  currentFrame = this.animTimingFunction(this.currentFrame / this.frameLength) * this.frameLength;

现在可以看到这个函数调用 HERE 。

唯一定义它的其他地方如下:

  this.animTimingFunction = options.animTimingFunction || Vivus.LINEAR;

这可以在存储库中看到 HERE 。

现在我的问题是，为什么 this.animTimingFunction 被作为函数调用，而它实际上不是一个函数？有人能解释一下吗？

谢谢。

Answer 1

但是it is a function as mentioned in the code comments

animTimingFunction <function> timing animation function for the complete SVG`

从代码来看，它是可以传递给 Vivus 构造函数的选项之一。预定义的计时函数定义于 line 66

/**
 * Timing functions
 ************************************** 
 * 
 * Default functions to help developers.
 * It always take a number as parameter (between 0 to 1) then
 * return a number (between 0 and 1)
 */
Vivus.LINEAR          = function (x) {return x;};
Vivus.EASE            = function (x) {return -Math.cos(x * Math.PI) / 2 + 0.5;};
Vivus.EASE_OUT        = function (x) {return 1 - Math.pow(1-x, 3);};
Vivus.EASE_IN         = function (x) {return Math.pow(x, 3);};
Vivus.EASE_OUT_BOUNCE = function (x) {
  var base = -Math.cos(x * (0.5 * Math.PI)) + 1,
    rate = Math.pow(base,1.5),
    rateR = Math.pow(1 - x, 2),
    progress = -Math.abs(Math.cos(rate * (2.5 * Math.PI) )) + 1;
  return (1- rateR) + (progress * rateR);
};

关于line 204

this.animTimingFunction = options.animTimingFunction || Vivus.LINEAR;

您可以看到它要么使用传递的函数，要么在没有为 animTimingFunction 设置任何内容时定义于 Vivus.LINEAR 的默认函数

所以你不能传递一个函数，传递一个预定义的函数，或者传递你自己的计时函数:

Vivus(...,{},...);

//OR
Vivus(...,{
   animTimingFunction:Vivus.EASE
},...);

//OR
Vivus(...,{
   animTimingFunction:Vivus.EASE_OUT
},...);

//OR
Vivus(...,{
   //custom function
   //input number between 0 and 1
   //output number between 0 and 1
   animTimingFunction:function(x){
       //manipulate x as needed and return the new number
   }
},...);