CODEWITHSUNDEEP
javascriptsvg
Alexander Solonik
Alexander Solonik

Reputation: 10240

what is animationTimingFunction in vivus.js

I was just going through the source of vivus.js and came across the followng like of code:

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

Now this function call can be seen HERE.

The only other place this is defined in is below:

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

This can be seen on the repo HERE.

Now my question is , why is this.animTimingFunction being called as a function when it actually is not a function ? can anybody explain ?

Thank you.

Upvotes: 0

Views: 238

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

But it is a function as mentioned in the code comments

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

From the code it is one of the options that can be passed to the Vivus constructor. Predefined timing functions are defined at 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);
};

On line 204 

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

you can see that it either uses the passed function or when nothing is set for animTimingFunction a default function defined at Vivus.LINEAR

So you can not pass a function, pass one of the predefined functions, or pass your own timing function:

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
   }
},...);

Upvotes: 1

Related Questions