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:

  1. export type TweenEasing =
  2. 'linear'    | 'smooth'     | 'fade'         | 'constant'     |
  3. 'quadIn'    | 'quadOut'    | 'quadInOut'    | 'quadOutIn'    |
  4. 'cubicIn'   | 'cubicOut'   | 'cubicInOut'   | 'cubicOutIn'   |
  5. 'quartIn'   | 'quartOut'   | 'quartInOut'   | 'quartOutIn'   | 
  6. 'quintIn'   | 'quintOut'   | 'quintInOut'   | 'quintOutIn'   |
  7. 'sineIn'    | 'sineOut'    | 'sineInOut'    | 'sineOutIn'    |
  8. 'expoIn'    | 'expoOut'    | 'expoInOut'    | 'expoOutIn'    |
  9. 'circIn'    | 'circOut'    | 'circInOut'    | 'circOutIn'    |
  10. 'elasticIn' | 'elasticOut' | 'elasticInOut' | 'elasticOutIn' |
  11. 'backIn'    | 'backOut'    | 'backInOut'    | 'backOutIn'    |
  12. 'bounceIn'  | 'bounceOut'  | 'bounceInOut'  | 'bounceOutIn';

The effect can be seen in the following figure:

tweener

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.

  1. let tweenDuration: number = 1.0;                            // Duration of the tween
  2. tween(this.node)
  3.     .to(tweenDuration, { position: new Vec3(0, 10, 0) }, {  // 
  4.         easing: "backIn",                                   // Tween function
  5.     })
  6.     .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:

  1. let tweenDuration: number = 1.0;                            // Duration of the tween
  2. tween(this.node)
  3.     .to(tweenDuration, { position: new Vec3(0, 10, 0) }, {  // 
  4.         easing: "backIn",                                   // Tween function
  5.         onStart: (target?: object) => {                     // Tween function
  7.         },
  8.         onUpdate: (target: Vec3, ratio: number) => {        // Tween process
  9.             this.node.position = target;                    // Assign the position of the node to the result calculated by the tween system
  10.         },
  11.         onComplete: (target?: object) => {                  // Start the tween
  13.         },
  14.         progress: (start: number, end: number, current: number, ratio: number): number => {
  15.             // Return custom interpolation progress
  16.             return 0.0;
  17.         }
  18.     })
  19.     .start();                                               // Start the tween

The tween progress can also be customized through the progress interface, with the following code example:

  1. tween(this.node)
  2.     .to(1.0, {
  3.         position: new Vec3(0, 100, 0),
  4.     }, {
  5.         progress: (start: number, end: number, current: number, ratio: number): number => {
  6.             return math.lerp(start, end, ratio);
  7.         }
  8.     })
  9.     .start()

For full API description, please refer to: ITweenOption