Static Methods
anim(options)anim.jsline 126
Get animation runner
PARAMETERS
Name Type Description options
Object
options
PROPERTIES
Name Type Description 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 valuescomplete
[ 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 runnerEXAMPLES
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
Name Type Description timerId
Number
requestAnimationFrame timerId
EXAMPLES
var animation = require('tui-animation'); var timerId = animation.requestAnimFrame(function() { $('box').css(left, '100px'); }); animation.cancelAnimFrame(timerId);