From 8f4b40683121bee32316610e38ecaaaf6e025431 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Sat, 25 Apr 2015 14:17:16 -0500 Subject: [PATCH] start tick --- ionic/collide/animation-process.js | 1 - ionic/collide/animation.js | 3 +- ionic/collide/collide.js | 11 ------- ionic/collide/tick.js | 9 +++++- .../components/app/test/animations/main.html | 30 ++++++++++++++----- ionic/components/app/test/animations/main.js | 24 +++++++++++---- 6 files changed, 51 insertions(+), 27 deletions(-) diff --git a/ionic/collide/animation-process.js b/ionic/collide/animation-process.js index ad2b5ba580..05ec674b6f 100644 --- a/ionic/collide/animation-process.js +++ b/ionic/collide/animation-process.js @@ -4,7 +4,6 @@ import * as util from 'ionic/util/util' import {Collide} from './collide' import {CSS} from './css' import {getEasing} from './easing' -import {tick} from './tick' const data = Collide.data; diff --git a/ionic/collide/animation.js b/ionic/collide/animation.js index e5435fed44..41c569c8f3 100644 --- a/ionic/collide/animation.js +++ b/ionic/collide/animation.js @@ -1,6 +1,7 @@ import {Collide} from './collide' import {animationStart} from './animation-start' import {animationStop} from './animation-stop' +import {startTick} from './tick' export class Animation { @@ -29,7 +30,7 @@ export class Animation { start() { let promise = animationStart(this._elements, this._options, this._properties) - Collide.startTick(); + startTick(); return promise } diff --git a/ionic/collide/collide.js b/ionic/collide/collide.js index 4b5e31bf8e..c81386a386 100644 --- a/ionic/collide/collide.js +++ b/ionic/collide/collide.js @@ -55,17 +55,6 @@ export let Collide = { /* Set to 1 or 2 (most verbose) to output debug info to console. */ debug: false, - startTick: function() { - /* If the animation tick isn't running, start it. - Collide shuts it off when there are no active calls to process. */ - if (Collide.State.isTicking === false) { - Collide.State.isTicking = true; - - /* Start the tick loop. */ - tick(); - } - }, - /* initialize element data */ initData: function(element) { element.$collide = { diff --git a/ionic/collide/tick.js b/ionic/collide/tick.js index 22d1a04cf6..f943940af0 100644 --- a/ionic/collide/tick.js +++ b/ionic/collide/tick.js @@ -10,8 +10,15 @@ import {completeCall} from './complete-call' Tick ************/ +export function startTick() { + if (!Collide.State.isTicking && Collide.State.calls && Collide.State.calls.length) { + Collide.State.isTicking = true; + tick(); + } +} + /* Note: All calls to Collide are pushed to the Collide.State.calls array, which is fully iterated through upon each tick. */ -export function tick(timestamp) { +function tick(timestamp) { /* An empty timestamp argument indicates that this is the first tick occurence since ticking was turned on. We leverage this metadata to fully ignore the first tick pass since RAF's initial pass is fired whenever the browser's next tick sync time occurs, which results in the first elements subjected to Collide diff --git a/ionic/components/app/test/animations/main.html b/ionic/components/app/test/animations/main.html index 0d1ae0a16a..6f7f984edc 100644 --- a/ionic/components/app/test/animations/main.html +++ b/ionic/components/app/test/animations/main.html @@ -1,12 +1,28 @@ + + + Collide Tests + + -
+
-
-
-
+
+
+
- - +
-
+

+ +

+ + +

+ +

+ + + + + diff --git a/ionic/components/app/test/animations/main.js b/ionic/components/app/test/animations/main.js index 6882cd3cd3..6bd4d22c67 100644 --- a/ionic/components/app/test/animations/main.js +++ b/ionic/components/app/test/animations/main.js @@ -12,22 +12,34 @@ class IonicApp { @NgElement ngElement:NgElement ) { - this.trans = new Animation( ngElement.domElement.querySelector('.square') ) + this.animation = new Animation(); + this.animation.elements( ngElement.domElement.querySelectorAll('.square') ); - this.trans.duration(500) - this.trans.easing('linear') + this.animation.duration(500) + this.animation.easing('linear') - this.trans.property('opacity', 0) + this.animation.property('opacity', 0) } start() { - this.trans.start() + let q = this.animation.start(); + + q.then(()=> { + console.log('animation complete') + }); + + } stop() { - this.trans.stop() + this.animation.stop() } + + velocityStart() { + Velocity(document.querySelectorAll('.square'), { opacity: 0 }, 500); // Velocity + } + }