5 - TIGL Manager & Tweening libraries

  • One of the benefit of TIGL Manager is that you may use tweening libraries to make great animations.
  • Look at the code below to see how to create easily animations.
  • For this demo we used library from https://github.com/tweenjs/tween.js/, but any tweening library would do the job.

    # myView.xml
    1
    2
    3
    4
    5
    6
    7
    <Alloy>
      <Window>
        <TIGLView module="fr.dzzd.glsprite" onInit="init" onResize="resize" onLoop="loop"/>
        <Button title="Tween it left!" left="10dp" top="10dp" onClick="doTweenLeft"/>
        <Button title="Tween it right!" right="10dp" top="10dp" onClick="doTweenRight"/>
      </Window>
    </Alloy>
    


    # myView.js
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    /*
     * Import TIGL manager
     */
    const TIGLManager = require("tiglmanager");
    
    /*
     * Import Tween module
     */
    const TWEEN = require("tween.cjs");
    
    
    /*
     * Some globals vars
     */
    var tm;
    var myEntity;
    var width;
    var height;
    
    /*
     * Init must be declared as an attribute of the Alloy tag TIGLView (eg: onInit="init")
     */
    function init()
    {
        /*
         * Create and initialise TIGL manager
         */
        tm = new TIGLManager(this);
    
        /*
         * Load a sprite andsets its pivots
         */
        myEntity = tm.addSprite({url: "Resources/sprite.png"});
        myEntity.px = 100;
        myEntity.py = 128;
    }
    
    
    /*
     * Resize must be declared as an attribute of the Alloy tag TIGLView (eg: onResize="resize")
     */ 
    function resize(e)
    {
        width = e.width;
        height = e.height;
        myEntity.x = width * 0.5;
        myEntity.y = height * 0.5;
    }
    
    /*
     * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop="loop")
     */ 
    function loop()
    {
        
        TWEEN.update();
    }
    
    
    function doTweenLeft()
    {
        var tween = new TWEEN.Tween(myEntity).to({x: 120, y: 200, r: 359}, 2000)
                    .easing(TWEEN.Easing.Quadratic.Out)
        tween.start();
    }
    
    
    function doTweenRight()
    {
        var tween = new TWEEN.Tween(myEntity).to({x: width - 120, y: height * 0.5, r: 0}, 2000)
                    .easing(TWEEN.Easing.Quadratic.Out)
        tween.start();
    }