Mobile Web Wearable Web

Creating Applications with Animation

You can create a simple application using TAU Animation. With the following example, you can learn how to import TAU Animation into your application and create a basic simple application with animation.

Loading a TAU Animation

You can import the TAU Animation with HTML:

<head>
   <title>TAU Animation Sample</title>
   <script src="lib/tau/animation/tau.animation.min.js" type="text/javascript"></script>
</head>

tau.animation is the namespace of the TAU Animation. You can call TAU Animation functions through this namespace.

Note
To get tau.animation.min.js library, please create new project with UIComponents sample and you can get this in lib/tau/animation directory.

Creating TAU Animations

The following code snippet shows how to create a TAU Animation:

<div id="redBox" style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>
<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px; left: 200px;"></div>

var t = tau.animation.target;
t('#redBox').tween('swing', 1000);
t('#blueBox').tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000);

If you want to animate the HTML element directly, you can use mixin. You can animate any effect, transform, or CSS property. You can use the 'target' method. Like a CSS selector, '.' means class selector, '#' means ID selector. Also, a pure HTML element can be a parameter of the target function.

Available animation methods:

  • Predefined effects

    When the first parameter of the tween() method indicates a string (such as 'swing' above) instead of an object, it is a predefined effect animation. Various predefined effects are available.

  • Chaining

    The blueBox animation above is a type of a connected animation. If animations are connected to the same target object, it is added to the queue. And if the play() function is invoked, all animations in the queue are called in the sequence order.

  • Tween

    tween() is a TAU Animation method. It animates a target object based on parameters. The following example shows the use of the tween() method:

    tween({animation}, {option})
    • animation is the part moving, such as a transform, CSS, or predefined effect.
    • transform options:

      translateX, translateY, translateZ, rotateX, rotateY, rotateZ, scaleX, scaleY, skewX, skewY

    • css options:

      left, top, width, height, background-color, color, border, border-width, border-color, margin, marginTop, marginRight, marginBottom, marginLeft, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, font-size, line-height, clip-path, background-position, background-size, box-shadow

    <div id="redBox" style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>

    var t = tau.animation.target;
t('#redBox').tween({rotateZ: 120}, 1000); /* Transform */
t('#redBox').tween({backgroundColor: 'red', border: '10px 10px 10px 3px white'}, 1000); /* CSS property */
t('#redBox').tween('swing', 1000).tween('tada', 1000); /* Pre-defined effect */
  • Option

    An option consists of a duration, ease, delay, callback, and stagger. In order to provide better usage, if you want to use only duration, you can set the duration as a number value like in the previous examples. If any other options are needed, you must make an {option} object and insert the duration: value into the object. 

    <div id="redBox" style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>
<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px; left: 200px;"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

    var t = tau.animation.target;
t('#redBox').tween({rotateZ: 120}, 1000);
t('#redBox').tween({rotateZ: 120}, {duration: 1000});
/* The result of this tween method is identical with the above method */
t('#blueBox').tween({rotateZ: 120}, {duration: 1000, ease: 'bounceInOut'});
t('#blueBox').tween({rotateZ: 120}, {duration: 1000, delay: 500}); /* After 500ms, blueBox is rotated */
t('#blueBox').tween({rotateZ: 120}, {duration: 1000, onStart: function()
   {
      t('#blueBox').style.innerText = 'start'; /* Before animation, the text is inserted into blueBox */
   },
   onComplete: function()
   {
      t('#blueBox').tween('swing', 1000); /* After animation, blueBox is animated with a pre-defined effect */
   }
});
/* All boxes that include the className 'box' are rotated sequentially with a 200ms time difference */
t('.box').tween({rotateZ: 120}, {duration: 1000, stagger: 200});

The following code snippet shows the full code for the first animation example described above.

<!DOCTYPE html>
<html>
<head>
   <style>
      .box 
      {
         position: absolute;
         width: 100px;
         height: 100px;
         background-color: red;
         left: 100px;
         top: 100px;
      }
   </style>

   <title>TAU Animation Sample</title>

   <!-- load TAU Animation -->
   <script src="lib/tau/animation/tau.animation.min.js" type="text/javascript"></script>
</head>
<body>
   <div id="redBox" style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>
   <div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>

   <script>
      var t = tau.animation.target;
      t('#redBox').tween('swing', 1000); /* Single animation */
      t('#blueBox').tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000); /* Single animation */
      t('.box').tween({translateY: 500}, {duration: 1000, stagger: 200}); /* Group animation */
   </script>
</body>
</html>
Go to top