anymation
Version:
Simple & easy animation/tweener
1 lines • 15.6 kB
Markdown
{"filter":false,"title":"README.md","tooltip":"/README.md","undoManager":{"mark":81,"position":81,"stack":[[{"start":{"row":4,"column":3},"end":{"row":12,"column":3},"action":"insert","lines":["Installation","","For node or browserify,","","> npm install browserify","","For a manual configuration system, grab dist/anymation.js or dist/anymation-min.js from the git repository. These export the Anymation constructor through a require.js define() if you are using it, otherwise they add the Anymation constructor to the global window object.","","## "],"id":2,"ignore":true},{"start":{"row":23,"column":17},"end":{"row":23,"column":18},"action":"remove","lines":[","]},{"start":{"row":24,"column":0},"end":{"row":27,"column":2},"action":"remove","lines":[" props: {"," x: 500"," }","};"]},{"start":{"row":24,"column":0},"end":{"row":24,"column":116},"action":"insert","lines":["}.tween(\"x\", 40, 500); // Smoothly interpolate objectToAnimate.x between 40 and 500 over the course of the animation"]},{"start":{"row":39,"column":3},"end":{"row":57,"column":0},"action":"remove","lines":["API","","### Animation(options)","","Constructor for an Animation. Calling it with the new operator is optional. The animation starts immediately.","","* options: An object specifying options:"," * object (object, required) - The object whose properties are going to get changed by the animation."," * duration (number, optional, default=1000) - Duration for animation, in milliseconds"," * props (object, optional) - Specification of what to actually animate. See below."," * onComplete (function, optional) -Function called when the animation completes"," * onCancel (function, optional) - Function called when the animation is canceled","","#### Props object","","... to be continued","","",""]},{"start":{"row":39,"column":3},"end":{"row":108,"column":121},"action":"insert","lines":["Easing functions","","Anymation doesn't provide any built-in easing functions except for the trivial linear default. Specifying an easing function from a library like [eases](https://www.npmjs.com/package/eases) is super-easy though.","","```javascript","var Animation = require(\"anymation\");","var eases = require(\"eases\");","","new Animation({"," object: someObject,"," easing: eases.elasticOut","});","```","","## API","","### Animation(options)","","Constructor for an Animation. Calling it with the new operator is optional. The animation starts immediately.","","* options: An object specifying options:"," * object (object, required) - The object whose properties are going to get changed by the animation."," * duration (number, optional, default=1000) - Duration for animation, in milliseconds"," * easing (function, optional, default=linear) - Easing function for the animation. "," * setter (function, optional) - Function called to change a property value. Signature (object, propertyName, value. The default function sets object[propertyName] = value."," * onComplete (function, optional) -Function called when the animation completes"," * onCancel (function, optional) - Function called when the animation is canceled","","## Animation.tween(propertyName, from, to) returns this Animation","","Smoothly change a numeric property between the start and end values. Shortcut for Animation.addProp(propertyName, { tween: [from, to] }).","","* propertyName (string) - Name of the property on the object","* start (number) - Starting value","* end (number) - Ending value","","## Animation.discrete(propertyName, array) returns this Animation","","Cycle a property through a specified list of values (of any type) over the course of the animation. Shortcut for Animation.addProp(propertyName, { discreteValues: array }).","","* propertyName (string) - Name of the property on the object","* array (array) - Specified values","","## Animation.fn(propertyName, fn) returns this Animation","","Animate a property using a callback function returning a value of any type. Shortcut for Animation.addProp(propertyName, { valueFn: fn});","","* propertyName (string) - Name of the property on the object","* fn (function) - a function with signature fn(t_eased) returns value, where t_eased is the eased current time. With linear easing this is 0 at the start of the animation and 1 at the end, increasing linearly in between. In general it is 0 at the start and 1 at the end, with no promises it can't be negative or greater than one in-between (in elastic easing functions for example). The function should return the desired value for the property at the given eased time.","","## Animation.addProp(propertyName, options) returns this Animation","","Animates a property during the course of the animation, specifying all options, many of which can override the animation's default options.","","* propertyName (string) - Name of the property on the object","* options (object):"," * object (object, optional, default=this.options.object) - The object whose property is to be changed."," * easing (function, optional, default=this.options.easing) - Easing function for this property. "," * setter (function, optional, default=this.options.setter) - Function called to change this property value. Signature (object, propertyName, value. The default function sets object[propertyName] = value."," * tween (array[number], optional) - see Animation.tween()"," * discreteValues (array, optional) - see Animation.discrete()"," * valueFn (function, optional) - see Animation.fn()",""," ## Animation.update(timeNow) returns boolean",""," Updates all animated properties. Generally no need to pass the timeNow parameter. ",""," * timeNow (number, optional, default=current system time in milliseconds)",""," Returns false if the animation is done (if timeNow >= the animation start time + the animation duration) otherwise true"]}],[{"start":{"row":102,"column":1},"end":{"row":102,"column":2},"action":"remove","lines":[" "],"id":3}],[{"start":{"row":102,"column":0},"end":{"row":102,"column":1},"action":"remove","lines":[" "],"id":4}],[{"start":{"row":55,"column":3},"end":{"row":55,"column":4},"action":"insert","lines":["#"],"id":5}],[{"start":{"row":67,"column":2},"end":{"row":67,"column":3},"action":"insert","lines":["#"],"id":6}],[{"start":{"row":75,"column":2},"end":{"row":75,"column":3},"action":"insert","lines":["#"],"id":7}],[{"start":{"row":82,"column":2},"end":{"row":82,"column":3},"action":"insert","lines":["#"],"id":8}],[{"start":{"row":89,"column":2},"end":{"row":89,"column":3},"action":"insert","lines":["#"],"id":9}],[{"start":{"row":102,"column":2},"end":{"row":102,"column":3},"action":"insert","lines":["#"],"id":10}],[{"start":{"row":53,"column":2},"end":{"row":53,"column":3},"action":"insert","lines":["#"],"id":11}],[{"start":{"row":39,"column":2},"end":{"row":39,"column":3},"action":"insert","lines":["#"],"id":12}],[{"start":{"row":12,"column":2},"end":{"row":12,"column":3},"action":"insert","lines":["#"],"id":13}],[{"start":{"row":4,"column":2},"end":{"row":4,"column":3},"action":"insert","lines":["#"],"id":14}],[{"start":{"row":0,"column":0},"end":{"row":0,"column":1},"action":"insert","lines":["#"],"id":15}],[{"start":{"row":0,"column":1},"end":{"row":0,"column":2},"action":"remove","lines":["#"],"id":16}],[{"start":{"row":2,"column":0},"end":{"row":2,"column":1},"action":"remove","lines":[">"],"id":17}],[{"start":{"row":6,"column":12},"end":{"row":6,"column":22},"action":"remove","lines":["browserify"],"id":45},{"start":{"row":6,"column":12},"end":{"row":6,"column":48},"action":"insert","lines":["[browserify](http://browserify.org/)"]}],[{"start":{"row":2,"column":48},"end":{"row":2,"column":129},"action":"remove","lines":[". Currently works in node or in browsers w/ [browserify](http://browserify.org/)."],"id":46},{"start":{"row":2,"column":48},"end":{"row":2,"column":49},"action":"insert","lines":[" "]}],[{"start":{"row":2,"column":49},"end":{"row":2,"column":50},"action":"insert","lines":["f"],"id":47}],[{"start":{"row":2,"column":50},"end":{"row":2,"column":51},"action":"insert","lines":["o"],"id":48}],[{"start":{"row":2,"column":51},"end":{"row":2,"column":52},"action":"insert","lines":["r"],"id":49}],[{"start":{"row":2,"column":52},"end":{"row":2,"column":53},"action":"insert","lines":[" "],"id":50}],[{"start":{"row":2,"column":53},"end":{"row":2,"column":54},"action":"insert","lines":["n"],"id":51}],[{"start":{"row":2,"column":54},"end":{"row":2,"column":55},"action":"insert","lines":["o"],"id":52}],[{"start":{"row":2,"column":55},"end":{"row":2,"column":56},"action":"insert","lines":["d"],"id":53}],[{"start":{"row":2,"column":56},"end":{"row":2,"column":57},"action":"insert","lines":["e"],"id":54}],[{"start":{"row":2,"column":57},"end":{"row":2,"column":58},"action":"insert","lines":[" "],"id":55}],[{"start":{"row":2,"column":58},"end":{"row":2,"column":59},"action":"insert","lines":["o"],"id":56}],[{"start":{"row":2,"column":59},"end":{"row":2,"column":60},"action":"insert","lines":["r"],"id":57}],[{"start":{"row":2,"column":60},"end":{"row":2,"column":61},"action":"insert","lines":[" "],"id":58}],[{"start":{"row":2,"column":61},"end":{"row":2,"column":62},"action":"insert","lines":["b"],"id":59}],[{"start":{"row":2,"column":62},"end":{"row":2,"column":63},"action":"insert","lines":["r"],"id":60}],[{"start":{"row":2,"column":63},"end":{"row":2,"column":64},"action":"insert","lines":["o"],"id":61}],[{"start":{"row":2,"column":64},"end":{"row":2,"column":65},"action":"insert","lines":["w"],"id":62}],[{"start":{"row":2,"column":65},"end":{"row":2,"column":66},"action":"insert","lines":["s"],"id":63}],[{"start":{"row":2,"column":66},"end":{"row":2,"column":67},"action":"insert","lines":["e"],"id":64}],[{"start":{"row":2,"column":67},"end":{"row":2,"column":68},"action":"insert","lines":["r"],"id":65}],[{"start":{"row":2,"column":68},"end":{"row":2,"column":69},"action":"insert","lines":["s"],"id":66}],[{"start":{"row":2,"column":69},"end":{"row":2,"column":70},"action":"insert","lines":["."],"id":67}],[{"start":{"row":108,"column":121},"end":{"row":109,"column":0},"action":"insert","lines":["",""],"id":68},{"start":{"row":109,"column":0},"end":{"row":109,"column":2},"action":"insert","lines":[" "]}],[{"start":{"row":109,"column":2},"end":{"row":110,"column":0},"action":"insert","lines":["",""],"id":69},{"start":{"row":110,"column":0},"end":{"row":110,"column":2},"action":"insert","lines":[" "]}],[{"start":{"row":110,"column":1},"end":{"row":110,"column":2},"action":"remove","lines":[" "],"id":70}],[{"start":{"row":110,"column":0},"end":{"row":110,"column":1},"action":"remove","lines":[" "],"id":71}],[{"start":{"row":110,"column":0},"end":{"row":110,"column":1},"action":"insert","lines":["#"],"id":72}],[{"start":{"row":110,"column":1},"end":{"row":110,"column":2},"action":"insert","lines":["#"],"id":73}],[{"start":{"row":110,"column":2},"end":{"row":110,"column":3},"action":"insert","lines":["#"],"id":74}],[{"start":{"row":110,"column":3},"end":{"row":110,"column":4},"action":"insert","lines":[" "],"id":75}],[{"start":{"row":110,"column":4},"end":{"row":110,"column":5},"action":"insert","lines":["L"],"id":76}],[{"start":{"row":110,"column":5},"end":{"row":110,"column":6},"action":"insert","lines":["i"],"id":77}],[{"start":{"row":110,"column":6},"end":{"row":110,"column":7},"action":"insert","lines":["c"],"id":78}],[{"start":{"row":110,"column":7},"end":{"row":110,"column":8},"action":"insert","lines":["e"],"id":79}],[{"start":{"row":110,"column":8},"end":{"row":110,"column":9},"action":"insert","lines":["n"],"id":80}],[{"start":{"row":110,"column":9},"end":{"row":110,"column":10},"action":"insert","lines":["s"],"id":81}],[{"start":{"row":110,"column":10},"end":{"row":110,"column":11},"action":"insert","lines":["e"],"id":82}],[{"start":{"row":110,"column":11},"end":{"row":111,"column":0},"action":"insert","lines":["",""],"id":83}],[{"start":{"row":111,"column":0},"end":{"row":112,"column":0},"action":"insert","lines":["",""],"id":84}],[{"start":{"row":112,"column":0},"end":{"row":112,"column":1},"action":"insert","lines":["M"],"id":85}],[{"start":{"row":112,"column":1},"end":{"row":112,"column":2},"action":"insert","lines":["I"],"id":86}],[{"start":{"row":112,"column":2},"end":{"row":112,"column":3},"action":"insert","lines":["T"],"id":87}],[{"start":{"row":67,"column":3},"end":{"row":67,"column":4},"action":"insert","lines":["#"],"id":88}],[{"start":{"row":75,"column":3},"end":{"row":75,"column":4},"action":"insert","lines":["#"],"id":89}],[{"start":{"row":82,"column":0},"end":{"row":82,"column":1},"action":"insert","lines":["#"],"id":90}],[{"start":{"row":89,"column":0},"end":{"row":89,"column":1},"action":"insert","lines":["#"],"id":91}],[{"start":{"row":102,"column":1},"end":{"row":102,"column":2},"action":"insert","lines":["#"],"id":92}],[{"start":{"row":77,"column":0},"end":{"row":78,"column":0},"action":"insert","lines":["",""],"id":93}],[{"start":{"row":77,"column":0},"end":{"row":78,"column":0},"action":"remove","lines":["",""],"id":95}],[{"start":{"row":0,"column":0},"end":{"row":1,"column":0},"action":"insert","lines":["",""],"id":96}],[{"start":{"row":0,"column":0},"end":{"row":0,"column":119},"action":"insert","lines":["[](https://travis-ci.org/scottglz/anymation)"],"id":97}],[{"start":{"row":0,"column":119},"end":{"row":1,"column":0},"action":"insert","lines":["",""],"id":98}],[{"start":{"row":1,"column":0},"end":{"row":2,"column":0},"action":"remove","lines":["",""],"id":99}],[{"start":{"row":1,"column":0},"end":{"row":2,"column":0},"action":"insert","lines":["",""],"id":101}],[{"start":{"row":0,"column":0},"end":{"row":0,"column":119},"action":"remove","lines":["[](https://travis-ci.org/scottglz/anymation)"],"id":102}],[{"start":{"row":2,"column":11},"end":{"row":2,"column":12},"action":"insert","lines":[" "],"id":103}],[{"start":{"row":2,"column":12},"end":{"row":2,"column":131},"action":"insert","lines":["[](https://travis-ci.org/scottglz/anymation)"],"id":104}],[{"start":{"row":2,"column":11},"end":{"row":2,"column":131},"action":"remove","lines":[" [](https://travis-ci.org/scottglz/anymation)"],"id":112}],[{"start":{"row":4,"column":0},"end":{"row":4,"column":1},"action":"remove","lines":[" "],"id":113}],[{"start":{"row":5,"column":0},"end":{"row":6,"column":0},"action":"insert","lines":["",""],"id":114}],[{"start":{"row":6,"column":0},"end":{"row":7,"column":0},"action":"insert","lines":["",""],"id":115}],[{"start":{"row":6,"column":0},"end":{"row":6,"column":120},"action":"insert","lines":[" [](https://travis-ci.org/scottglz/anymation)"],"id":116}],[{"start":{"row":6,"column":0},"end":{"row":6,"column":1},"action":"remove","lines":[" "],"id":117}],[{"start":{"row":0,"column":0},"end":{"row":1,"column":0},"action":"remove","lines":["",""],"id":118}],[{"start":{"row":0,"column":0},"end":{"row":1,"column":0},"action":"remove","lines":["",""],"id":119}]]},"ace":{"folds":[],"scrolltop":424,"scrollleft":0,"selection":{"start":{"row":7,"column":0},"end":{"row":7,"column":0},"isBackwards":false},"options":{"guessTabSize":true,"useWrapMode":false,"wrapToView":true},"firstLineState":{"row":23,"state":"jscode-start","mode":"ace/mode/markdown"}},"timestamp":1452096716000,"hash":"c7af0588f0790148f0f39e677515755f24dbe192"}