Dynamic Properties
Dynamic properties are generic values that are automatically evaluated at runtime. There are three types of dynamic properties:
- Constant values
- Keyframe animations
- Functions
Constant Values
Constant values are the simplest type of dynamic properties. They do not change unless they are manually replaced with a new value.
const effect = new etro.effect.Channels({
factors: {
r: 1,
g: 0,
b: 0,
},
})
// The only way to update constant values is to manually replace them
effect.factors = {
r: 0,
g: 1,
b: 1,
}
Keyframe Animations
Keyframe animations are a list of keyframes that are interpolated between. Each point in the keyframe has a start time and a value:
const effect = new etro.effect.Channels({
factors: {
r: new etro.KeyFrame([
[0, 1],
[1, 0],
]),
g: 0,
b: 0,
},
})
The above example will animate the red channel from 1 to 0 over the course of one second.
Functions
Functions are JavaScript functions that are called every frame to get the current value. They are useful for creating custom animations:
const effect = new etro.effect.Channels({
factors: {
r: (element: etro.EtroObject, time: number) => {
return Math.random()
},
g: 0,
b: 0,
},
})
The above example will animate the red channel to a random value every frame.
Custom Classes
To add a dynamic property to your custom layer or effect, use the Dynamic
generic type. To evaluate the property on a given frame, use etro.val()
.
class MyEffect extends etro.effect.Base {
foo: Dynamic<number>
constructor(foo: Dynamic<number> = 1) {
super()
this.foo = foo
}
apply(target: etro.Movie | etro.layer.Base, time: number) {
super(target, time)
const foo = etro.val(this, 'foo', time)
// Do something with the evaluated `foo`
}
}