animar - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

lib/animar.js

@@ -21,2 +21,6 @@ 'use strict';
 
+var _hook = require('./hook');
+
+var _hook2 = _interopRequireDefault(_hook);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,3 +30,3 @@
 
-// NOTE: All flow type definitions are currently in comment form due to esdoc's inability to parse the syntax
+// NOTE: All flow type definitions are currently in comment form due to them causing issues with esdoc.
 
@@ -37,3 +41,3 @@ /**
 /**
- * Options passed into {@link Animar#add} to dictate animation behavior.
+ * Options to dictate animation-wide behavior.
  * @typedef {Object} AnimationOptions
@@ -44,2 +48,9 @@ * @property {?number} delay - The amount of ticks to wait before beginning animation.
  * @public
+ *
+ * @example
+ * let animationOptions = {
+ *   delay: 0,
+ *   easingFunction: (t, b, c, d) => c * t / d + b,
+ *   duration: 60
+ * }
  */
@@ -58,3 +69,3 @@ /*:: type AnimationOptions = {
  * @property {number} duration - The amount of time the animation will take.
- * @public
+ * @private
  */
@@ -71,2 +82,8 @@ /*:: type ResolvedAnimationOptions = {
  * @public
+ *
+ * @example
+ * let attributesOptions = {
+ *   translateX: [0, 100],
+ *   translateY: [0, 200]
+ * };
  */
@@ -106,3 +123,4 @@ /*:: export type AttributesOptions = { [key: string]: Array<number> }; */
  * @typedef {Object} ThenPayload
- * @property {ThenFunction} then
+ * @property {AddFunction} add
+ * @property {HookFunction} hook
  * @public
@@ -134,6 +152,7 @@ */
  * @typedef {Object} FullChainObject
- * @property {StartFunction} start - start animating the animation chain.
- * @property {LoopFunction} loop - loop the entire animation chain.
- * @property {AddFunction} add - add an animation to the current chain step.
- * @property {ThenFunction} then - start a new chain step.
+ * @property {StartFunction} start - Start animating the animation chain.
+ * @property {LoopFunction} loop - Loop the entire animation chain.
+ * @property {AddFunction} add - Add an animation to the current chain step.
+ * @property {ThenFunction} then - Start a new chain step.
+ * @property {HookFunction} hook - Add an arbitrary function to the animation chain.
  * @public
@@ -145,3 +164,4 @@ */
   add: AddFunction,
-  then: ThenFunction
+  then: ThenFunction,
+  hook: HookFunction
 }; */
@@ -171,2 +191,9 @@
 
+/**
+ * Add an arbitrary function to the animation chain.
+ * @typedef {function(hook: function): FullChainObject} HookFunction
+ * @public
+ */
+/*:: type HookFunction = (hook:Function) => FullChainObject */
+
 var EMPTY_ANIMATION_OPTIONS = {
@@ -179,2 +206,4 @@ delay: null,
 
+var TARGET_FRAME_DELAY = 16.67;
+
 /**
@@ -190,3 +219,2 @@ * The main Animar class which the user interacts with.
    * @param {ConstructorOptions} constructorOptions
-   * @returns {Animar}
    * @public
@@ -208,2 +236,3 @@ */
     this.ticking = false;
+
     /**
@@ -214,3 +243,5 @@ * @type {ElementMap}
     this.elementMap = new Map();
+
     /**
+     * Animar instance's default animation option values
      * @type {Defaults}
@@ -226,14 +257,30 @@ * @public
     }, resolvedDefaults);
+
     /**
-     * How fast the animations should run (`1` is real-time).
-     * @type {number}
+     * Whether or not to force animating using the GPU
+     * @type {boolean}
      * @public
      */
-    this.timescale = 1;
+    this.hardwareAcceleration = hardwareAcceleration == null ? true : hardwareAcceleration;
+
     /**
-     * Whether or not to force animating using the GPU
+     * List of all the pending function hooks in this animar instance.
+     * @type {Array}
+     * @private
+     */
+    this.hooks = [];
+
+    /**
+     * Flag to determine if the current frame is the first frame in a requestTick call
      * @type {boolean}
-     * @public
+     * @private
      */
-    this.hardwareAcceleration = hardwareAcceleration == null ? true : hardwareAcceleration;
+    this.firstFrame = true;
+
+    /**
+     * The timestamp of the previous frame rendering.
+     * @type {number}
+     * @private
+     */
+    this.previousTime = 0;
   }
@@ -259,3 +306,3 @@
         totalDuration: 0
-      }, new Map());
+      }, new Map(), []);
     }
@@ -315,2 +362,3 @@
      * @param {ElementMap} currentChain - The element map of the current chain (has not yet been merged with the instance element map).
+     * @param {Array<Hook>} hooks
      * @returns {FullChainObject}
@@ -322,3 +370,3 @@ * @private
     key: '_add',
-    value: function _add(element /*:HTMLElement*/, attributes /*:AttributesOptions*/, options /*:AnimationOptions*/, chainOptions /*:ChainOptions*/, currentChain /*:ElementMap*/) {
+    value: function _add(element /*:HTMLElement*/, attributes /*:AttributesOptions*/, options /*:AnimationOptions*/, chainOptions /*:ChainOptions*/, currentChain /*:ElementMap*/, hooks /*:Array<Hook>*/) {
       var _this = this;
@@ -336,3 +384,3 @@
       chainOptions.currentDuration = Math.max(chainOptions.currentDuration, resolvedOptions.delay + resolvedOptions.duration);
-      return this.fullChainObjectFactory(chainOptions, currentChain);
+      return this.fullChainObjectFactory(chainOptions, currentChain, hooks);
     }
@@ -372,5 +420,23 @@
     /**
+     * Add an arbitrary function hook to the animation chain.
+     * @param hook
+     * @param chainOptions
+     * @param chain
+     * @param hooks
+     * @private
+     */
+
+  }, {
+    key: 'addHook',
+    value: function addHook(hook /*:Function*/, chainOptions /*:ChainOptions*/, chain /*:ElementMap*/, hooks /*:Array<Hook>*/) {
+      var newHook = new _hook2.default(hook, 0 - chainOptions.delay, false, chainOptions.delay, 0);
+      hooks.push(newHook);
+      return this.fullChainObjectFactory(chainOptions, chain, hooks);
+    }
+
+    /**
      * Create a new chain object that contains all of the chain functions.
      * @param chainOptions
      * @param chain
+     * @param hooks
      * @returns {FullChainObject}
@@ -382,8 +448,9 @@ * @private
     key: 'fullChainObjectFactory',
-    value: function fullChainObjectFactory(chainOptions /*:ChainOptions*/, chain /*:ElementMap*/) {
+    value: function fullChainObjectFactory(chainOptions /*:ChainOptions*/, chain /*:ElementMap*/, hooks /*:Array<Hook>*/) {
       return {
-        start: this.startChainFunctionFactory(chain),
-        loop: this.loopChainFunctionFactory(chainOptions, chain),
-        add: this.addChainFunctionFactory(chainOptions, chain),
-        then: this.thenChainFunctionFactory(chainOptions, chain)
+        start: this.startChainFunctionFactory(chain, hooks),
+        loop: this.loopChainFunctionFactory(chainOptions, chain, hooks),
+        add: this.addChainFunctionFactory(chainOptions, chain, hooks),
+        then: this.thenChainFunctionFactory(chainOptions, chain, hooks),
+        hook: this.hookChainFunctionFactory(chainOptions, chain, hooks)
       };
@@ -396,2 +463,3 @@ }
      * @param {ElementMap} chain
+     * @param hooks
      * @returns {ThenFunction}
@@ -403,3 +471,3 @@ * @private
     key: 'thenChainFunctionFactory',
-    value: function thenChainFunctionFactory(chainOptions /*:ChainOptions*/, chain /*:ElementMap*/) {
+    value: function thenChainFunctionFactory(chainOptions /*:ChainOptions*/, chain /*:ElementMap*/, hooks /*:Array<Hook>*/) {
       var _this2 = this;
@@ -415,3 +483,4 @@
         return {
-          add: _this2.addChainFunctionFactory(newChainOptions, chain)
+          add: _this2.addChainFunctionFactory(newChainOptions, chain, hooks),
+          hook: _this2.hookChainFunctionFactory(newChainOptions, chain, hooks)
         };
@@ -425,2 +494,3 @@ };
      * @param {ElementMap} chain
+     * @param hooks
      * @returns {AddFunction}
@@ -432,3 +502,3 @@ * @private
     key: 'addChainFunctionFactory',
-    value: function addChainFunctionFactory(chainOptions /*:ChainOptions*/, chain /*:ElementMap*/) {
+    value: function addChainFunctionFactory(chainOptions /*:ChainOptions*/, chain /*:ElementMap*/, hooks /*:Array<Hook>*/) {
       var _this3 = this;
@@ -438,3 +508,3 @@
         var resolvedOptions = options || EMPTY_ANIMATION_OPTIONS;
-        return _this3._add(element, attributes, resolvedOptions, chainOptions, chain);
+        return _this3._add(element, attributes, resolvedOptions, chainOptions, chain, hooks);
       };
@@ -447,2 +517,3 @@ }
      * @param {ElementMap} chain
+     * @param hooks
      * @returns {LoopFunction}
@@ -454,3 +525,3 @@ * @private
     key: 'loopChainFunctionFactory',
-    value: function loopChainFunctionFactory(chainOptions /*:ChainOptions*/, chain /*:ElementMap*/) {
+    value: function loopChainFunctionFactory(chainOptions /*:ChainOptions*/, chain /*:ElementMap*/, hooks /*:Array<Hook>*/) {
       var _this4 = this;
@@ -468,4 +539,8 @@
 
+        hooks.forEach(function (hook) {
+          hook.loop(chainOptions);
+        });
+
         return {
-          start: _this4.startChainFunctionFactory(chain)
+          start: _this4.startChainFunctionFactory(chain, hooks)
         };
@@ -478,2 +553,3 @@ };
      * @param {ElementMap} chain
+     * @param hooks
      * @returns {StartFunction}
@@ -485,3 +561,3 @@ * @private
     key: 'startChainFunctionFactory',
-    value: function startChainFunctionFactory(chain /*:ElementMap*/) {
+    value: function startChainFunctionFactory(chain /*:ElementMap*/, hooks /*:Array<Hook>*/) {
       var _this5 = this;
@@ -491,2 +567,3 @@
         _this5.elementMap = _this5.mergeElementMaps(_this5.elementMap, chain);
+        _this5.hooks = _this5.hooks.concat(hooks);
         _this5.requestTick();
@@ -497,2 +574,21 @@ };
     /**
+     * Create a new function which will hook an arbitrary function to the animation chain.
+     * @param chainOptions
+     * @param chain
+     * @param hooks
+     * @returns {Function}
+     * @private
+     */
+
+  }, {
+    key: 'hookChainFunctionFactory',
+    value: function hookChainFunctionFactory(chainOptions /*:ChainOptions*/, chain /*:ElementMap*/, hooks /*:Array<Hook>*/) {
+      var _this6 = this;
+
+      return function (hook) {
+        return _this6.addHook(hook, chainOptions, chain, hooks);
+      };
+    }
+
+    /**
      * Request to start the requestAnimationFrame loop.
@@ -518,5 +614,13 @@ * @private
     key: 'update',
-    value: function update() {
+    value: function update(timestamp /*:number*/) {
+      var changeInTime = timestamp - this.previousTime;
+      if (this.firstFrame) {
+        changeInTime = TARGET_FRAME_DELAY;
+        this.firstFrame = false;
+      }
+      var timescale = changeInTime / TARGET_FRAME_DELAY;
+      this.previousTime = timestamp;
+
       this.ticking = false;
-      var hasChanged = this.step();
+      var hasChanged = this.step(timescale);
 
@@ -526,2 +630,4 @@ if (hasChanged) {
         this.requestTick();
+      } else {
+        this.firstFrame = true;
       }
@@ -538,6 +644,6 @@ }
     value: function render() {
-      var _this6 = this;
+      var _this7 = this;
 
       this.elementMap.forEach(function (element) {
-        element.render(_this6.hardwareAcceleration);
+        element.render(_this7.hardwareAcceleration);
       });
@@ -548,2 +654,3 @@ }
      * Step the instance's element map forward.`
+     * @param {number} timescale
      * @returns {boolean} - Anything has changed from stepping forward.
@@ -555,11 +662,26 @@ * @private
     key: 'step',
-    value: function step() {
-      var _this7 = this;
+    value: function step(timescale /*:number*/) {
+      var _this8 = this;
 
       var somethingChanged = false;
+
       this.elementMap.forEach(function (element) {
-        if (element.step(_this7.timescale)) {
+        if (element.step(timescale)) {
           somethingChanged = true;
         }
       });
+
+      var newHooks = this.hooks.map(function (hook) {
+        if (hook.step(timescale)) {
+          return hook;
+        }
+      });
+
+      this.hooks = [];
+      newHooks.forEach(function (hook) {
+        if (hook != null) {
+          _this8.hooks.push(hook);
+        }
+      });
+
       return somethingChanged;
@@ -566,0 +688,0 @@ }

lib/attribute.js

@@ -20,2 +20,16 @@ 'use strict';
 /**
+ * Regex expression to detect transform attributes that require the px unit.
+ * @type {RegExp}
+ * @protected
+ */
+var pxRegex = /(perspective)|(translate[XYZ])/;
+
+/**
+ * Regex expression to detect transform attributes that require the deg unit.
+ * @type {RegExp}
+ * @protected
+ */
+var degRegex = /rotate[XYZ]?/;
+
+/**
  * Class that holds all of the animation information for an {@link Element}'s Attribute.
@@ -92,3 +106,3 @@ * @protected
      * @param domElement
-     * @returns {string}
+     * @returns {Object}
      */
@@ -99,12 +113,10 @@
     value: function render(domElement /*:HTMLElement*/) {
-      var transformValue = '';
+      var transformValue = [];
       var targetValue = String(this.model + (0, _helpers.calculateAnimationValue)(this.animations));
 
-      var pxRegex = /(perspective)|(translate[XYZ])/,
-          degRegex = /rotate[XYZ]?/;
-
       targetValue += pxRegex.test(this.name) ? 'px' : degRegex.test(this.name) ? 'deg' : '';
 
       if (_helpers.TRANSFORM_ATTRIBUTES.indexOf(this.name) !== -1) {
-        transformValue += this.name + '(' + targetValue + ') ';
+        transformValue.push(this.name);
+        transformValue.push(targetValue);
       } else {
@@ -111,0 +123,0 @@ (0, _helpers.applyStyle)(domElement, this.name, targetValue);

lib/element.js

@@ -48,14 +48,28 @@ 'use strict';
 
-      var transformValue = '';
+      var transformValues /*:Array<?[string, string]>*/ = [];
 
       this.attributes.forEach(function (attribute) {
-        transformValue += attribute.render(_this.domElement);
+        var currentTransform = attribute.render(_this.domElement);
+        var index = _helpers.TRANSFORM_ATTRIBUTES.indexOf(currentTransform[0]);
+        transformValues[index] = currentTransform;
       });
 
-      if (transformValue !== '') {
-        if (hardwareAcceleration) {
-          transformValue += 'translateZ(0)';
+      if (transformValues.length !== 0) {
+        if (hardwareAcceleration && transformValues[2] == null) {
+          transformValues[2] = ['translateZ', '0'];
         }
 
-        (0, _helpers.applyStyle)(this.domElement, 'transform', transformValue);
+        // Array.filter function currently doesn't work properly with FlowType
+        var filteredTransformValues /*:Array<[string, string]>*/ = [];
+        for (var i = 0; i < transformValues.length; i++) {
+          if (transformValues[i] != null) {
+            filteredTransformValues.push(transformValues[i]);
+          }
+        }
+
+        var transformStringArray = filteredTransformValues.map(function (v) {
+          return v[0] + '(' + v[1] + ')';
+        });
+
+        (0, _helpers.applyStyle)(this.domElement, 'transform', transformStringArray.join(' '));
       }
@@ -62,0 +76,0 @@ }

lib/helpers.js

@@ -17,2 +17,6 @@ 'use strict';
  * List of all the transform attributes that are possible to animate.
+ *
+ * **NOTE**: The order of this array dictates the order that the transforms will by applied to an element (order taken
+ * from GSAP's CSSPlugin documentation).
+ *
  * @type {Array<string>}
@@ -22,3 +26,3 @@ * @protected
 /*:: import type {AttributesOptions} from './animar';*/
-var TRANSFORM_ATTRIBUTES = exports.TRANSFORM_ATTRIBUTES = ['translateX', 'translateY', 'translateZ', 'scale', 'scaleX', 'scaleY', 'rotate', 'rotateX', 'rotateY', 'rotateZ'];
+var TRANSFORM_ATTRIBUTES = exports.TRANSFORM_ATTRIBUTES = ['translateX', 'translateY', 'translateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'rotateX', 'rotateY', 'rotateZ', 'rotate'];
 
@@ -33,2 +37,6 @@ /**
 function setTransform(element /*:HTMLElement*/, transformString /*:string*/) /*:HTMLElement*/ {
+  element.style.webkitTransform = transformString;
+  element.style.mozTransform = transformString;
+  element.style.msTransform = transformString;
+  element.style.oTransform = transformString;
   element.style.transform = transformString;
@@ -35,0 +43,0 @@ return element;

package.json

 {
   "name": "animar",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "a modern, focused, flexible javascript animation library.",
@@ -25,2 +25,3 @@ "keywords": [
   "license": "MIT",
+  "main": "index.js",
   "scripts": {
@@ -40,3 +41,6 @@ "clean": "rimraf dist",
   },
-  "main": "index.js",
+  "pre-commit": [
+    "test",
+    "build"
+  ],
   "devDependencies": {
@@ -67,2 +71,3 @@ "babel-cli": "^6.2.0",
     "mocha": "^2.3.4",
+    "pre-commit": "^1.1.2",
     "rewire": "^2.5.1",
@@ -76,6 +81,3 @@ "rimraf": "^2.3.1",
     "webpack": "^1.12.8"
-  },
-  "dependencies": {
-    "codecov.io": "^0.1.6"
   }
 }

README.md

@@ -13,14 +13,30 @@ [![Build Status](https://img.shields.io/travis/vincentriemer/animar/master.svg?style=flat)](https://travis-ci.org/vincentriemer/animar) [![npm version](https://badge.fury.io/js/animar.svg)](https://badge.fury.io/js/animar)
 
-## Initialization
+## Example
 
 ```javascript
-var animar = new Animar();
-```
+var Animar = require('animar');
 
-## Animating an Element
+// Custom easing function (Animar only defaults to a linear ease)
+function quadInOut(t, b, c, d) {
+  t /= d / 2;
+  if (t < 1) { return c / 2 * t * t + b; }
+  t--;
+  return -c / 2 * (t * (t - 2) - 1) + b;
+}
 
-The Animar library only provides one function for animating an element. The syntax is as follows:
+// Initialize the library (set the default easing function to the one created above)
+var animar = new Animar({ 
+  defaults: { 
+    easingFunction: quadInOut 
+  } 
+});
 
+// Get the target from the DOM
+var target = document.getElementById('target');
+
+// Construct an animation chain and start it immediately.
+animar.add(target, { translateX: [0, 300], translateY: [0, 300] })
+      .then() // Any animation added after this point will start after the previous ones have finished
+      .add(target, { translateX: [300, 0], translateY: [300, 0], { delay: -30 }) // set a negative delay to make it begin sooner than the time the previous step ends.
+      .start();
 ```
-animar.add([DOMElement element], [Object attributeMap], [Object options]);
-```

No alert changes

Improved metrics

Total package byte prevSize

42400

increased by22.71%

Dependency count

0

decreased by-100%

Number of package files

10

increased by11.11%

Lines of code

1005

increased by24.69%

Number of lines in readme file

42

increased by61.54%

Worsened metrics

Dev dependency count

33

increased by3.13%

Dependency changes

• - Removedcodecov.io@^0.1.6

• - Removedasn1@0.1.11(transitive)

• - Removedassert-plus@0.1.5(transitive)

• - Removedasync@0.9.2(transitive)

• - Removedaws-sign2@0.5.0(transitive)

• - Removedbl@0.9.5(transitive)

• - Removedboom@0.4.2(transitive)

• - Removedcaseless@0.6.0(transitive)

• - Removedcodecov.io@0.1.6(transitive)

• - Removedcombined-stream@0.0.7(transitive)

• - Removedcore-util-is@1.0.3(transitive)

• - Removedcryptiles@0.2.2(transitive)

• - Removedctype@0.5.3(transitive)

• - Removeddeep-equal@0.1.2(transitive)

• - Removeddefined@0.0.0(transitive)

• - Removeddelayed-stream@0.0.5(transitive)

• - Removedduplexer@0.1.2(transitive)

• - Removedforever-agent@0.5.2(transitive)

• - Removedform-data@0.1.4(transitive)

• - Removedhawk@1.1.1(transitive)

• - Removedhoek@0.9.1(transitive)

• - Removedhttp-signature@0.10.1(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedisarray@0.0.1(transitive)

• - Removedjson-stringify-safe@5.0.1(transitive)

• - Removedjsonify@0.0.1(transitive)

• - Removedmime@1.2.11(transitive)

• - Removedmime-types@1.0.2(transitive)

• - Removednode-uuid@1.4.8(transitive)

• - Removedoauth-sign@0.4.0(transitive)

• - Removedqs@1.2.2(transitive)

• - Removedreadable-stream@1.0.34(transitive)

• - Removedrequest@2.42.0(transitive)

• - Removedresumer@0.0.0(transitive)

• - Removedsntp@0.2.4(transitive)

• - Removedsplit@0.2.10(transitive)

• - Removedstream-combiner@0.0.4(transitive)

• - Removedstring_decoder@0.10.31(transitive)

• - Removedstringstream@0.0.6(transitive)

• - Removedtape@2.3.0(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedtldts@6.1.78(transitive)

• - Removedtldts-core@6.1.78(transitive)

• - Removedtough-cookie@5.1.1(transitive)

• - Removedtunnel-agent@0.4.3(transitive)

• - Removedurlgrey@0.4.0(transitive)