collide updates

ionic/collide/animation-percent.js

@@ -1,58 +0,0 @@
-/* Forked from Collide.js, MIT License. Julian Shapiro http://twitter.com/shapiro */
-
-import {Collide} from './collide'
-
-
-export function animationPercent(percent, elements, options, propertiesMap) {
-
-  if (!elements || !elements.length) {
-    return;
-  }
-
-  /* The length of the element set (in the form of a nodeList or an array of elements) is defaulted to 1 in case a
-     single raw DOM element is passed in (which doesn't contain a length property). */
-  var elementsLength = elements.length;
-  var elementsIndex = 0;
-  var eleData;
-
-
-  /**********************************
-      Animation Call-Wide Variables
-  **********************************/
-
-  /* A container for CSS unit conversion ratios (e.g. %, rem, and em ==> px) that is used to cache ratios across all elements
-     being animated in a single Collide call. Calculating unit ratios necessitates DOM querying and updating, and is therefore
-     avoided (via caching) wherever possible. This container is call-wide instead of page-wide to avoid the risk of using stale
-     conversion metrics across Collide animations that are not immediately consecutively chained. */
-  var callUnitConversionData = {
-        lastParent: null,
-        lastPosition: null,
-        lastFontSize: null,
-        lastPercentToPxWidth: null,
-        lastPercentToPxHeight: null,
-        lastEmToPx: null,
-        remToPx: null,
-        vwToPx: null,
-        vhToPx: null
-      };
-
-  /* A container for all the ensuing tween data and metadata associated with this call. This container gets pushed to the page-wide
-     Collide.State.calls array that is processed during animation ticking. */
-  var call = [];
-
-
-  /**************************
-     Element Set Iteration
-  **************************/
-
-  if (elements && elements.length) {
-    for (var i = 0, l = elements.length; i < l; i++) {
-      if (elements[i] && elements[i].parentElement) {
-
-        //animationProcess('percent', elements, i, options, propertiesMap, callUnitConversionData, call)
-
-      }
-    }
-  }
-
-};

ionic/collide/animation-stop.js

@@ -5,10 +5,6 @@ import {Collide} from './collide'
 
 export function animationStop(elements, options, propertiesMap) {
 
-  if (!elements || !elements.length) {
-    return Promise.resolve();
-  }
-
   var eleData;
 
 
@@ -120,6 +116,5 @@ export function animationStop(elements, options, propertiesMap) {
           completeCall(j, true);
       });
 
-      return Promise.reject();
   }
 };

ionic/collide/animation.js

@@ -1,14 +1,12 @@
 import {Collide} from './collide'
 import {animationStart} from './animation-start'
 import {animationStop} from './animation-stop'
-import {animationPercent} from './animation-percent'
 import {startTick} from './tick'
 
 
 export class Animation {
   constructor() {
     this._elements = null;
-
     this._options = {};
     this._properties = {};
   }
@@ -35,13 +33,12 @@ export class Animation {
   }
 
   stop() {
-    let promise = animationStop(this._elements, this._options, this._properties);
+    animationStop(this._elements, this._options, this._properties);
-
-    return promise;
   }
 
   percent(ratio) {
-    animationPercent(ratio, this._elements, this._options, this._properties);
+    this._options.percentComplete = parseFloat(ratio);
+    animationStart(this._elements, this._options, this._properties);
   }
 
 

ionic/collide/collide.js

@@ -37,7 +37,8 @@ export let Collide = {
     easing: 'swing',
     begin: undefined,
     complete: undefined,
-    progress: undefined,
+    percentComplete: undefined,
+    percent: undefined,
     display: undefined,
     visibility: undefined,
     loop: false,

ionic/collide/tick.js

@@ -25,6 +25,9 @@ function tick(timestamp) {
      calls being animated out of sync with any elements animated immediately thereafter. In short, we ignore
      the first RAF tick pass so that elements being immediately consecutively animated -- instead of simultaneously animated
      by the same Collide call -- are properly batched into the same initial RAF tick and consequently remain in sync thereafter. */
+
+  var percentCompleteStop = false;
+
   if (timestamp) {
     /* We ignore RAF's high resolution timestamp since it can be significantly offset when the browser is
        under high stress; we opt for choppiness over allowing the browser to drop huge chunks of frames. */
@@ -79,8 +82,16 @@ function tick(timestamp) {
       /* The tween's completion percentage is relative to the tween's start time, not the tween's start value
          (which would result in unpredictable tween durations since JavaScript's timers are not particularly accurate).
          Accordingly, we ensure that percentComplete does not exceed 1. */
-      var percentComplete = Math.min((timeCurrent - timeStart) / opts.duration, 1);
+      debugger
+      var percentComplete;
+      if (opts.percentComplete !== undefined) {
+        percentCompleteStop = true;
+        percentComplete = opts.percentComplete;
+        opts.percentComplete = undefined;
 
+      } else {
+        percentComplete = Math.min((timeCurrent - timeStart) / opts.duration, 1);
+      }
 
       /**********************
          Element Iteration
@@ -265,7 +276,7 @@ function tick(timestamp) {
   } // END: if (timestamp)
 
   /* Note: completeCall() sets the isTicking flag to false when the last call on Collide.State.calls has completed. */
-  if (Collide.State.isTicking) {
+  if (Collide.State.isTicking || percentCompleteStop) {
     dom.raf(tick);
   }
 

ionic/components/app/test/animations/main.html

@@ -13,7 +13,7 @@
   </div>
 
   <p>
-    <input type="range" (input)="percent($event)" value="0" min="0" max="100" style="width:180px">
+    <input type="range" (input)="percent($event)" value="50" min="0" max="100" style="width:200px">
   </p>
 
   <p>

ionic/components/app/test/animations/main.js

@@ -8,17 +8,16 @@ import {Animation} from 'ionic/ionic';
   templateUrl: 'main.html'
 })
 class IonicApp {
-  constructor(
+  constructor() {
-    @NgElement ngElement:NgElement
-  ) {
 
     this.animation = new Animation();
-    this.animation.elements( ngElement.domElement.querySelectorAll('.square') );
+    this.animation.elements( document.querySelectorAll('.square') );
+    this.animation.debug(2);
 
-    this.animation.duration(500)
+    this.animation.duration(500);
-    this.animation.easing('linear')
+    this.animation.easing('swing');
 
-    this.animation.property('opacity', 0)
+    this.animation.property('opacity', 0);
 
   }
 
@@ -32,17 +31,17 @@ class IonicApp {
 
   percent(ev) {
     let ratio = parseFloat(ev.srcElement.value) / 100;
-    console.log('percent ratio', ratio)
+    console.log('percent ratio', ratio);
 
-    this.animation.percent(ratio)
+    this.animation.percent(ratio);
   }
 
   stop() {
-    this.animation.stop()
+    this.animation.stop();
   }
 
   velocityStart() {
-    Velocity(document.querySelectorAll('.square'), { opacity: 0 }, 500); // Velocity
+    Velocity(document.querySelectorAll('.square'), { opacity: 0 }, 500);
   }
 
 }