Tween Functions
Engine implements a series of different types of tween functions, through which different real-time animation effects can be achieved. These tween functions are mainly used in the Tween.to
and Tween.by
interfaces.
Built-in Tween Functions
The current tween functions provided by the engine are shown below:
export type TweenEasing =
'linear' | 'smooth' | 'fade' | 'constant' |
'quadIn' | 'quadOut' | 'quadInOut' | 'quadOutIn' |
'cubicIn' | 'cubicOut' | 'cubicInOut' | 'cubicOutIn' |
'quartIn' | 'quartOut' | 'quartInOut' | 'quartOutIn' |
'quintIn' | 'quintOut' | 'quintInOut' | 'quintOutIn' |
'sineIn' | 'sineOut' | 'sineInOut' | 'sineOutIn' |
'expoIn' | 'expoOut' | 'expoInOut' | 'expoOutIn' |
'circIn' | 'circOut' | 'circInOut' | 'circOutIn' |
'elasticIn' | 'elasticOut' | 'elasticInOut' | 'elasticOutIn' |
'backIn' | 'backOut' | 'backInOut' | 'backOutIn' |
'bounceIn' | 'bounceOut' | 'bounceInOut' | 'bounceOutIn';
The effect can be seen in the following figure:
Figure from http://hosted.zeh.com.br/tweener/docs/en-us/
The ITweenOption
interface allows you to modify the tween function. The code example is as follows.
let tweenDuration: number = 1.0; // Duration of the tween
tween(this.node)
.to(tweenDuration, { position: new Vec3(0, 10, 0) }, { //
easing: "backIn", // Tween function
})
.start(); // Start the tween
ITweenOption
ITweenOption
is an optional property interface definition for tween. The interfaces are all optional and can be used on demand. The full example is as follows:
let tweenDuration: number = 1.0; // Duration of the tween
tween(this.node)
.to(tweenDuration, { position: new Vec3(0, 10, 0) }, { //
easing: "backIn", // Tween function
onStart: (target?: object) => { // Tween function
},
onUpdate: (target: Vec3, ratio: number) => { // Tween process
this.node.position = target; // Assign the position of the node to the result calculated by the tween system
},
onComplete: (target?: object) => { // Start the tween
},
progress: (start: number, end: number, current: number, ratio: number): number => {
// Return custom interpolation progress
return 0.0;
}
})
.start(); // Start the tween
The tween progress can also be customized through the progress
interface, with the following code example:
tween(this.node)
.to(1.0, {
position: new Vec3(0, 100, 0),
}, {
progress: (start: number, end: number, current: number, ratio: number): number => {
return math.lerp(start, end, ratio);
}
})
.start()
For full API description, please refer to: ITweenOption