animation

Animation library

Example

Get Module

var animation = require('tui-animation'); // commonjs type
var animation = tui.animation; // when using bundle file
var runner = animation.anim({...});
});

Methods

static anim(options) → {Object}

Get animation runner

Parameters:
Name Type Description
options Object

options

Properties
Name Type Attributes Default Description
from Number | Array.<Number> <optional>
0

beginning values

to Number | Array.<Number> <optional>
100

change in values

duration Number <optional>
1000

duration (ms)

easing String <optional>
'linear'

easing functions {@see easing}

frame function <optional>

invoking each frames. you can manipulate specific element by this function the arguments passed with same sequence with from, to option values

complete function <optional>

invoked once at end of animation

usageStatistics Boolean <optional>
true

Let us know the hostname. If you don't want to send the hostname, please set to false.

Returns:
Object -

animation runner

Tutorials:
Example

Initialize and Run animation runner

var animation = require('tui-animation');
var runner = tui.animation.anim({
  from: [1, 5],  // initial x, y position
  to: [100, 500],
  duration: 2000,
  easing: 'easeInOut',
  // manipulate x, y position
  frame: function(x, y) {
    $box.css({
      left: x + 'px',
      top: y + 'px'
    });
  },
  complete: function() {
    $box.css({
      backgroundColor: 'red'
    });
  }
});

// Run animation
runner.run();

// If browser support Promise then method `run()` is return it, otherwise it return `null`
// So below line has be possible throw an errors. use carefully
runner.run().then(function() {console.log('done!');});

static cancelAnimFrame(timerId)

Shim of cancelAnimationFrame

Parameters:
Name Type Description
timerId Number

requestAnimationFrame timerId

Example
var animation = require('tui-animation');
var timerId = animation.requestAnimFrame(function() {
  $('box').css(left, '100px');
});
animation.cancelAnimFrame(timerId);

static requestAnimFrame(callback) → {Number}

Shim of requestAnimationFrame

Use setTimeout trick on below Internet Explorer 8

Parameters:
Name Type Description
callback function

callback function

Returns:
Number -

timer id

Example
var animation = require('tui-animation');
var timerId = animation.requestAnimFrame(function() {
  $('box').css(left, '100px');
});