Added update and start callbacks

Author: daniel-lundin

docs/snabbt.min.js

@@ -13,7 +13,7 @@ function createAnimation(startState, endState, options) {
   currentState.transformOrigin = options.transformOrigin;
   currentState.perspective = options.perspective;
 
-  var startTime = 0;
+  var startTime = -1;
   var currentTime = 0;
   var stopped = false;
   var started = false;
@@ -62,7 +62,7 @@ function createAnimation(startState, endState, options) {
 
     restart() {
       // Restart timer
-      startTime = undefined;
+      startTime = -1;
       easer.resetFrom(0);
     },
 
@@ -76,17 +76,23 @@ function createAnimation(startState, endState, options) {
       }
 
       // If first tick, set startTime
-      if (!startTime) {
+      if (startTime === -1) {
         startTime = time;
       }
 
       if (time - startTime >= delay) {
+        if (!started && options.start) {
+          options.start();
+        }
         started = true;
         currentTime = time - delay;
 
         var curr = Math.min(Math.max(0.0, currentTime - startTime), duration);
         easer.tick(curr / duration);
         this.updateCurrentTransform();
+        if (options.update) {
+          options.update(curr / duration);
+        }
         if (this.completed() && manualCallback) {
           manualCallback();
         }

src/animation.js

@@ -51,6 +51,16 @@ function preprocessOptions(options, index, len) {
       return options.easing(i, index, len);
     };
   }
+  if (utils.isFunction(options.start)) {
+    clone.start = function() {
+      return options.start(index, len);
+    };
+  }
+  if (utils.isFunction(options.update)) {
+    clone.update = function(i) {
+      return options.update(i, index, len);
+    };
+  }
 
   var properties = Object.keys(tweenableProperties).concat(['perspective', 'transformOrigin', 'duration', 'delay']);
 

src/properties.js

@@ -1,20 +1,28 @@
 'use strict';
 
-var sinon = require('sinon');
-var expect = require('chai').expect;
-var createAnimation = require('../animation.js').createAnimation;
-var createState = require('../state.js').createState;
+const sinon = require('sinon');
+const expect = require('chai').expect;
+const createAnimation = require('../animation.js').createAnimation;
+const createState = require('../state.js').createState;
 
 
 describe('animations', () => {
 
   describe('tick', () => {
-    var animation;
+    let animation;
+    let startedCallback;
+    let updateCallback;
+    const startState = createState({});
+    const endState = createState({});
+
     beforeEach(() => {
-      var startState = createState({});
-      var endState = createState({});
-      animation = createAnimation(startState, endState, {});
-      sinon.spy(animation, 'updateCurrentTransform');
+      startedCallback = sinon.stub();
+      updateCallback = sinon.stub();
+      animation = createAnimation(startState, endState, {
+        start: startedCallback,
+        update: updateCallback
+      });
+      sinon.stub(animation, 'updateCurrentTransform');
     });
 
     afterEach(() => {
@@ -29,6 +37,26 @@ describe('animations', () => {
       expect(animation.isStarted()).to.be.ok;
       sinon.assert.calledOnce(animation.updateCurrentTransform);
     });
+
+    it('should call started callback for first tick', () => {
+
+      animation.tick(1);
+      animation.tick(2);
+
+      sinon.assert.calledOnce(startedCallback);
+    });
+
+    it('should call update callback for every tick', () => {
+
+      animation.tick(0);
+      animation.tick(250);
+      animation.tick(500);
+
+      sinon.assert.calledThrice(updateCallback);
+      expect(updateCallback.firstCall.args[0]).to.equal(0);
+      expect(updateCallback.secondCall.args[0]).to.equal(0.5);
+      expect(updateCallback.thirdCall.args[0]).to.equal(1);
+    });
   });