animationTimingFunction在vivus.js中是什么

Question

我只是浏览了一下vivus.js的源代码，发现了下面的代码：

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

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

这一定义的唯一其他地方如下：

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

这可以在回购这里上看到。

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

谢谢。

Answer 1

但它是代码注释中提到的函数。

完整SVG`的animTimingFunction <function>定时动画功能

从代码中，它是可以传递给Vivus构造函数的选项之一。预定义的定时函数在第66项上定义。

/** *计时函数*/**帮助开发人员的默认函数。*它总是以一个数字作为参数(0到1之间)，然后*返回一个数字(0到1之间) */ Vivus.LINEAR =函数(x) {返回x;}；Vivus.EASE =函数(x) {返回-Math.cos(x * Math.PI) /2+ 0.5;}；Vivus.EASE_OUT =函数(x) {返回1- Math.pow(1-x，3);}；Vivus.EASE_IN =函数(x) {返回Math.pow(x，3);}；Vivus.EASE_OUT_BOUNCE =函数(x) { var碱= -Math.cos(x * (0.5 * Math.PI)) + 1，速率=Math.pow(基，1.5)，rateR =Math.pow(1-x，2)，进度=-Math.abs(Math.cos(速率* (2.5 * Math.PI) + 1；返回(1- rateR) +(进度* rateR)；}；

论第204行

this.animTimingFunction = options.animTimingFunction \x~+_(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
   }
},...);