# 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();
      }