diff --git a/ionic/collide/tick.js b/ionic/collide/tick.js index 978564f220..7ec82e7c4d 100644 --- a/ionic/collide/tick.js +++ b/ionic/collide/tick.js @@ -26,8 +26,6 @@ function tick(timestamp) { 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. */ @@ -84,14 +82,12 @@ function tick(timestamp) { Accordingly, we ensure that percentComplete does not exceed 1. */ 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 **********************/ @@ -266,7 +262,7 @@ function tick(timestamp) { } /* If this call has finished tweening, pass its index to completeCall() to handle call cleanup. */ - if (percentComplete === 1) { + if (percentComplete === 1 || opts.percentComplete !== undefined) { completeCall(i); } diff --git a/ionic/components/app/test/animations/main.html b/ionic/components/app/test/animations/main.html index e2dd1301ad..7a59168a2c 100644 --- a/ionic/components/app/test/animations/main.html +++ b/ionic/components/app/test/animations/main.html @@ -8,12 +8,12 @@
- +

- +

diff --git a/ionic/components/app/test/animations/main.js b/ionic/components/app/test/animations/main.js index 6566aa2434..344aff9499 100644 --- a/ionic/components/app/test/animations/main.js +++ b/ionic/components/app/test/animations/main.js @@ -16,13 +16,15 @@ class IonicApp { fadeOut() { this.animation = new Animation(); this.animation.elements( document.querySelectorAll('.square') ); - this.animation.debug(2); - this.animation.duration(500); + this.animation.duration(2000); this.animation.easing('swing'); - this.animation.property('opacity', 0); + this.animation.property('opacity', 0.2); this.animation.property('translateX', '100px'); + this.animation.property('translateY', '100px'); + this.animation.property('rotateZ', '180deg'); + this.animation.property('scale', '0.5'); let q = this.animation.start(); @@ -34,13 +36,15 @@ class IonicApp { fadeIn() { this.animation = new Animation(); this.animation.elements( document.querySelectorAll('.square') ); - this.animation.debug(2); - this.animation.duration(2500); + this.animation.duration(2000); this.animation.easing('swing'); this.animation.property('opacity', 1); this.animation.property('translateX', '0px'); + this.animation.property('translateY', '0px'); + this.animation.property('rotateZ', '0deg'); + this.animation.property('scale', '1'); let q = this.animation.start(); @@ -57,6 +61,18 @@ class IonicApp { let ratio = parseFloat(ev.srcElement.value) / 100; console.log('percent ratio', ratio); + this.animation = new Animation(); + this.animation.elements( document.querySelectorAll('.square') ); + + this.animation.duration(2000); + this.animation.easing('swing'); + + this.animation.property('opacity', 0.2); + this.animation.property('translateX', '100px'); + this.animation.property('translateY', '100px'); + this.animation.property('rotateZ', '180deg'); + this.animation.property('scale', '0.5'); + this.animation.percent(ratio); } @@ -68,12 +84,13 @@ class IonicApp { var elements = document.querySelectorAll('.square'); Velocity(elements, { opacity: 0, - translateX: '100px' - }, 5000); + translateX: '100px', + rotateZ: '90deg' + }, 2000); - setTimeout(function() { - Velocity(elements, "stop"); - }, 1000) + // setTimeout(function() { + // Velocity(elements, "stop"); + // }, 1000) } }