Keyframe Animation
AnimationClip with VectorTracks drives position and scale. action.timeScale controls playback speed.
Controls
Speed
0.1
3
import * as EASEL from "easel";
import { LoopRepeat } from "easel";
const posTrack = new EASEL.VectorTrack(
"position",
[0, 0.5, 1 ],
[0,0,0, 0,3,0, 0,0,0],
3,
);
const scaleTrack = new EASEL.VectorTrack(
"scale",
[0, 0.5, 1 ],
[1.2,0.7,1.2, 0.8,1.4,0.8, 1.2,0.7,1.2],
3,
);
const clip = new EASEL.AnimationClip("bounce", 1, [posTrack, scaleTrack]);
const animator = new EASEL.Animator(box);
const action = animator.clipAction(clip);
action.setLoop(LoopRepeat, Infinity);
action.timeScale = speed;
action.play();
animator.update(dt);