Temple Animate
Simple animation for Temple.
Install
Download the latest version dist/
folder and use via a script tag. The variable Animate
will be attached to Temple
.
<script type="text/javascript" src="temple.js"></script>
<script type="text/javascript" src="temple.animate.js"></script>
If using Browserify or Node.js, you can install via NPM and use via require("temple-animate")
.
$ npm install temple-animate
Usage
animate
view.animate(path, to [, options ])
This plugin adds an .animate()
method to Temple views. It is very similar to .set()
, except that it will change the value over time instead of instantly. Keep in mind that both to
and the existing value must be numbers or an error will be thrown. This method returns a valid Promise that resolves when the animation completes. If an existing animation is running at the path, it is completed immediately.
Valid options:
duration
— The number of milliseconds to run the animation for.easing
— Either a string name of a preset easing function or a function that will take tick
(float between 0 and 1) and should return a computed tick value. This controls how a value reaches its result.repeat
— Instead of completing, the animation will continue to animate in the reverse direction. Pass true
to repeat infinitely, or pass a number to limit the number of repeats. The limit does not include the initial run, so a value of 1
will cause the animation to run a total of two times (out and back). Call stopAnimating()
to stop a repeating animation.complete
— A function that is called when the animation completes.
stopAnimating
view.stopAnimating(path)
This will cause an existing animation at path to complete immediately. This will not set the value at path
to to
and will instead leave the value untouched.
Example
The following example animates a div's width and height between 10px and 200px, infinitely.
var view = new Temple({ size: 10 });
view.render = function() {
var model = this.getModel(),
div = new Temple.Element("div");
div.attr("style", function() {
var size = model.get("size") + "px";
return "background-color: blue;"
+ "width: " + size + ";"
+ "height: " + size + ";"
});
return div;
}
view.use(Temple.Animate);
view.paint(document.body);
view.animate("size", 200, {
easing: "easeInOutQuad",
duration: 500,
repeat: true
});