I am trying to create an interpolate function for an animation library to achieve a tweening effect between frames.
I want this to work with Bezier curves. I have created a jsFiddle (here) of my progress so far.
I am trying to create a linear tween using this bezier definition:
{
p0: new Vector(0,0), //Start point
p1: new Vector(0,0), //Control point 1
p2: new Vector(1,1), //Control point 2
p3: new Vector(1,1) //End point
}
I have implemented the interpolation function from this tutorial.
var u = 1 - t;
var tt = t*t;
var uu = u*u;
var uuu = uu * u;
var ttt = tt * t;
var p = p0.multiply(uuu);
p = p.add(p1.multiply(3 * uu * t));
p = p.add(p2.multiply(3 * u * tt));
p = p.add(p3.multiply(ttt));
The problem I am having is that when I run the function, the animation does not appear to be linear, but rather like 'ease-in-out'.
Ideally I would like the linear animation to work the same as this CSS transition.
Can anybody see why it is not animating in a linear fashion?