Timed Actions & Tweens in AniGraph
You can add timed actions---meaning actions that occur at every time update for a certain finite duration of time---using AniGraph's AController.addTimedAction function. This makes the most sense to use on your scene controller. Here is a function that, when called from the scene controller, will cause sceneController.model.meshModel to spin according to a spline:
spinLC(){
const self = this;
/**
* This function will be called at each time update for the duration of the action
* @param actionProgress - this is a number [0,1] indicating progress along the action. If a tween is provided, it will be progress along the tween. If no tween is provided, then it will correspond to how much of the action duration time has passed
*/
function twirl(actionProgress:number){
// In this example, we set transform to a rotation based on action progress
let transform = NodeTransform3D.RotationZ(actionProgress*Math.PI*8);
self.model.meshModel.setTransform(transform);
}
/**
* A cleanup function will reset the transform to the identity when the action is complete
*/
function twirlDone(){
// Set transform back to identity
self.model.meshModel.setTransform(new NodeTransform3D());
}
/**
* AniGraph's BezierTween class defines a bezier tween.
* The curve always starts at [0,0] and ends at [1,1]. You can define the two middle control points
* with the constraint that there must be a unique y for every x.
* @type {BezierTween}
*/
let tween = new BezierTween([0.3,-0.5, 0.7, 1.5]);
/**
* The second argument is the duration.
* The last argument is a handle that prevents overlapping fires and can optionally be used to cancel the action early.
*/
this.addTimedAction(
twirl,
2,
twirlDone,
tween,
"Twirl"
)
}
The arguments to the tween (a,b,c,d) correspond to coordinates of the middle control points in a normalized cubic beizier tween:
When spinLC
is called on the scene controller, this happens:
You can try adding other timed events with different durations, tweens, and behavior.