Keyframes

Keyframes let properties interpolate between key values on the timeline.

Basic Examples

// Properties with keyframes are maps { time1: value, time2: value }
let layer = new vd.layer.Visual(0, 4, {
    height: {0: 0, 4: movie.height} // vertically expand to fill the entire screen
});

Supported Types

Type	How it's interpolated
number	Smooth interpolation
object	Each property is interpolated separately
all other types	Flat interpolation

To interpolate colors and fonts, they must be passed as Color or Font instances, which are then treated as objects. Vidar comes with built-in vd.parseColor and vd.parseFont that take strings as input and return respective instances. Do not pass them as plain objects, unless you implement toString.

let layer = new vd.layer.Base(0, 4, {
    color: {0: vd.parseColor('blue'), 7: vd.parseColor('red')}
});

Numeric Interpolation

By default, numbers are interpolated linearly, but you can change that by setting the interpolate property of a keyframe set, like this:

{
    0: -1, 5: +1, interpolate: (y1, y2, t, objectKeys) => {
        // return |y1| and|y2| interpolated by progress |t|
    }
}

Here, y1 is the first value, y2 is the second value, t is the progress (between 0 and 1), and objectKeys is an array of keys to interpolate if the values are objects.

Vidar comes with a couple built-in interpolation methods: vd.linearInterp and vd.cosineInterp.