logo

/Animation|v1.1.3

Namespace

tui.animationindex.jsline 10

Animation library

EXAMPLES

Get Module

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

Static Methods

anim(options)anim.jsline 126

Get animation runner

PARAMETERS
NameTypeDescription

options

Object

options

PROPERTIES
NameTypeDescription

from

NumberArray.<Number> = 0

beginning values

to

NumberArray.<Number> = 100

change in values

duration

Number = 1000

duration (ms)

easing

String = 'linear'

easing functions {@see easing}

frame

[ Function ]

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

complete

[ Function ]

invoked once at end of animation

usageStatistics

Boolean = true

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

RETURNS:
{

Object

} - animation runner
EXAMPLES

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!');});

cancelAnimFrame(timerId)anim.jsline 73

Shim of cancelAnimationFrame

PARAMETERS
NameTypeDescription

timerId

Number

requestAnimationFrame timerId

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

requestAnimFrame(callback)anim.jsline 57

Shim of requestAnimationFrame

PARAMETERS
NameTypeDescription

callback

Function

callback function

RETURNS:
{

Number

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