Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
anymation - npm Package Compare versions
Comparing version 0.4.0 to 0.5.0
| { | ||
| "name": "anymation", | ||
| "version": "0.4.0", | ||
| "version": "0.5.0", | ||
| "description": "Simple & easy animation/tweener", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -16,7 +16,4 @@ # anymation | ||
| object: objectToAnimate, | ||
| duration: 3000, // 3 seconds | ||
| props: { | ||
| x: 500 | ||
| } | ||
| }; | ||
| duration: 3000 // 3 seconds | ||
| }.tween("x", 40, 500); // Smoothly interpolate objectToAnimate.x between 40 and 500 over the course of the animation | ||
@@ -36,2 +33,16 @@ // Your render loop is up to you | ||
| ## 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 | ||
@@ -46,10 +57,48 @@ | ||
| * duration (number, optional, default=1000) - Duration for animation, in milliseconds | ||
| * props (object, optional) - Specification of what to actually animate. See below. | ||
| * 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 | ||
| #### Props object | ||
| ## Animation.tween(propertyName, from, to) returns this Animation | ||
| ... to be continued | ||
| 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 |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by62.8%
8350
- Number of lines in readme file
- increased by90.57%
101
No dependency changes