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>用于完整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
   }
},...);

什么是vivus.js

1 个答案: