-
Notifications
You must be signed in to change notification settings - Fork 86
Keyframes
Keyframes let properties interpolate between key values on the timeline.
// 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
});
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')}
});
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
.