From 3777e1dc083cf22d26d338efb63b2a4b814e2719 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Sun, 26 Apr 2015 20:24:04 -0500 Subject: [PATCH] collide updates --- ionic/collide/animation-process.js | 2 +- ionic/collide/animation-start.js | 2 +- ionic/collide/animation-stop.js | 142 ++++++++++-------- ionic/collide/animation.js | 2 +- ionic/collide/calculate-unit-ratios.js | 2 +- ionic/collide/collide.js | 2 +- ionic/collide/complete-call.js | 2 +- ionic/collide/css.js | 34 ++--- ionic/collide/easing.js | 2 +- ionic/collide/tick.js | 4 +- .../components/app/test/animations/main.html | 5 +- ionic/components/app/test/animations/main.js | 44 ++++-- 12 files changed, 127 insertions(+), 116 deletions(-) diff --git a/ionic/collide/animation-process.js b/ionic/collide/animation-process.js index 756937a821..0c1a645df1 100644 --- a/ionic/collide/animation-process.js +++ b/ionic/collide/animation-process.js @@ -1,4 +1,4 @@ -/* Forked from VelocityJS: https://github.com/julianshapiro/velocity | MIT License. Julian Shapiro http://twitter.com/shapiro */ +/* Forked from VelocityJS, MIT License: https://github.com/julianshapiro/velocity | Julian Shapiro http://twitter.com/shapiro */ import * as util from 'ionic/util/util' import {Collide} from './collide' diff --git a/ionic/collide/animation-start.js b/ionic/collide/animation-start.js index 3769463202..341dfecd85 100644 --- a/ionic/collide/animation-start.js +++ b/ionic/collide/animation-start.js @@ -1,4 +1,4 @@ -/* Forked from VelocityJS: https://github.com/julianshapiro/velocity | MIT License. Julian Shapiro http://twitter.com/shapiro */ +/* Forked from VelocityJS, MIT License: https://github.com/julianshapiro/velocity | Julian Shapiro http://twitter.com/shapiro */ import {Collide} from './collide' import {animationProcess} from './animation-process' diff --git a/ionic/collide/animation-stop.js b/ionic/collide/animation-stop.js index cf0861e619..14307df2ad 100644 --- a/ionic/collide/animation-stop.js +++ b/ionic/collide/animation-stop.js @@ -1,20 +1,20 @@ -/* Forked from VelocityJS: https://github.com/julianshapiro/velocity | MIT License. Julian Shapiro http://twitter.com/shapiro */ +/* Forked from VelocityJS, MIT License: https://github.com/julianshapiro/velocity | Julian Shapiro http://twitter.com/shapiro */ import {Collide} from './collide' -export function animationStop(elements, options, propertiesMap) { - - var eleData; +export function animationStop(elements, action) { + var customQueue = undefined; + var elementsLength = elements.length; /****************** Action: Stop *******************/ /* Clear the currently-active delay on each targeted element. */ - for (var i = 0, l = elements.length; i < l; i++) { - eleData = Collide.data(elements[i]); + for (var i = 0; i < elementsLength; i++) { + var eleData = Collide.data(elements[i]); if (eleData && eleData.delayTimer) { /* Stop the timer from triggering its cached next() function. */ @@ -31,7 +31,6 @@ export function animationStop(elements, options, propertiesMap) { var callsToStop = []; - var activeCall; /* When the stop action is triggered, the elements' currently active call is immediately stopped. The active call might have been applied to multiple elements, in which case all of the call's elements will be stopped. When an element @@ -42,68 +41,83 @@ export function animationStop(elements, options, propertiesMap) { regardless of the element's current queue state. */ /* Iterate through every active call. */ - for (var i = 0, l = Collide.State.calls.length; i < l; i++) { + for (var i = 0, callLength = Collide.State.calls.length; i < callLength; i++) { /* Inactive calls are set to false by the logic inside completeCall(). Skip them. */ - activeCall = Collide.State.calls[i]; + var activeCall = Collide.State.calls[i]; if (activeCall) { /* Iterate through the active call's targeted elements. */ + var activeElements = activeCall[1]; - $.each(activeCall[1], function(k, activeElement) { - /* If true was passed in as a secondary argument, clear absolutely all calls on this element. Otherwise, only - clear calls associated with the relevant queue. */ - /* Call stopping logic works as follows: - - options === true --> stop current default queue calls (and queue:false calls), including remaining queued ones. - - options === undefined --> stop current queue:'' call and all queue:false calls. - - options === false --> stop only queue:false calls. - - options === 'custom' --> stop current queue:'custom' call, including remaining queued ones (there is no functionality to only clear the currently-running queue:'custom' call). */ - var queueName = (options === undefined) ? '' : options; + for (var j = 0, activeElementsLength = activeElements.length; j < activeElementsLength; j++) { + /* If true was passed in as a secondary argument, clear absolutely all calls on this element. Otherwise, only + clear calls associated with the relevant queue. */ + /* Call stopping logic works as follows: + - customQueue === true --> stop current default queue calls (and queue:false calls), including remaining queued ones. + - customQueue === undefined --> stop current queue:'' call and all queue:false calls. + - customQueue === false --> stop only queue:false calls. + - customQueue === 'custom' --> stop current queue:'custom' call, including remaining queued ones (there is no functionality to only clear the currently-running queue:'custom' call). */ + + var queueName = (customQueue === undefined) ? '' : customQueue; + if (queueName !== true && (activeCall[2].queue !== queueName) && !(customQueue === undefined && activeCall[2].queue === false)) { + return true; + } + + var activeElement = activeElements[j]; + + /* Iterate through the calls targeted by the stop command. */ + for (var k = 0; k < elementsLength; k++) { + var element = elements[k]; + + /* Check that this call was applied to the target element. */ + if (element === activeElement) { + + /* Optionally clear the remaining queued calls. */ + if (customQueue === true || typeof customQueue === 'string') { + + /* Iterate through the items in the element's queue. */ + + var eleQueueName = typeof customQueue === 'string' ? customQueue : ''; + var eleQueue = Collide.queue(element, eleQueueName); + for (var l = 0; l < eleQueue.length; l++) { + /* The queue array can contain an 'inprogress' string, which we skip. */ + if (typeof eleQueue[l] === 'function') { + /* Pass the item's callback a flag indicating that we want to abort from the queue call. + (Specifically, the queue will resolve the call's associated promise then abort.) */ + eleQueue[l](null, true); + } + } + + /* Clearing the queue() array is achieved by resetting it to []. */ + Collide.queue(element, eleQueueName, []); + } + + if (action === 'stop') { + /* Since 'reverse' uses cached start values (the previous call's endValues), these values must be + changed to reflect the final value that the elements were actually tweened to. */ + /* Note: If only queue:false animations are currently running on an element, it won't have a tweensContainer + object. Also, queue:false animations can't be reversed. */ + var eleData = Collide.data(element); + if (eleData && eleData.tweensContainer && queueName !== false) { + for (var tweenName in eleData.tweensContainer) { + eleData.tweensContainer[tweenName].endValue = eleData.tweensContainer[tweenName].currentValue; + } + } + + callsToStop.push(i); + + } else if (action === 'finish') { + /* To get active tweens to finish immediately, we forcefully shorten their durations to 1ms so that + they finish upon the next rAf tick then proceed with normal call completion logic. */ + activeCall[2].duration = 1; + } - if (queueName !== true && (activeCall[2].queue !== queueName) && !(options === undefined && activeCall[2].queue === false)) { - return true; } - /* Iterate through the calls targeted by the stop command. */ - $.each(elements, function(l, element) { - /* Check that this call was applied to the target element. */ - if (element === activeElement) { - /* Optionally clear the remaining queued calls. */ - if (options === true || Type.isString(options)) { - /* Iterate through the items in the element's queue. */ - $.each($.queue(element, Type.isString(options) ? options : ''), function(_, item) { - /* The queue array can contain an 'inprogress' string, which we skip. */ - if (Type.isFunction(item)) { - /* Pass the item's callback a flag indicating that we want to abort from the queue call. - (Specifically, the queue will resolve the call's associated promise then abort.) */ - item(null, true); - } - }); + } - /* Clearing the $.queue() array is achieved by resetting it to []. */ - $.queue(element, Type.isString(options) ? options : '', []); - } - - if (propertiesMap === 'stop') { - /* Since 'reverse' uses cached start values (the previous call's endValues), these values must be - changed to reflect the final value that the elements were actually tweened to. */ - /* Note: If only queue:false animations are currently running on an element, it won't have a tweensContainer - object. Also, queue:false animations can't be reversed. */ - if (Data(element) && Data(element).tweensContainer && queueName !== false) { - $.each(Data(element).tweensContainer, function(m, activeTween) { - activeTween.endValue = activeTween.currentValue; - }); - } - - callsToStop.push(i); - } else if (propertiesMap === 'finish') { - /* To get active tweens to finish immediately, we forcefully shorten their durations to 1ms so that - they finish upon the next rAf tick then proceed with normal call completion logic. */ - activeCall[2].duration = 1; - } - } - }); - }); + } } @@ -111,10 +125,10 @@ export function animationStop(elements, options, propertiesMap) { /* Prematurely call completeCall() on each matched active call. Pass an additional flag for 'stop' to indicate that the complete callback and display:none setting should be skipped since we're completing prematurely. */ - if (propertiesMap === 'stop') { - $.each(callsToStop, function(i, j) { - completeCall(j, true); - }); - + if (action === 'stop') { + for (var i = 0; i < callsToStop.length; i++) { + completeCall(i, true); + } } + }; diff --git a/ionic/collide/animation.js b/ionic/collide/animation.js index b5bcba8783..cc7612b5d1 100644 --- a/ionic/collide/animation.js +++ b/ionic/collide/animation.js @@ -33,7 +33,7 @@ export class Animation { } stop() { - animationStop(this._elements, this._options, this._properties); + animationStop(this._elements, 'stop'); } percent(ratio) { diff --git a/ionic/collide/calculate-unit-ratios.js b/ionic/collide/calculate-unit-ratios.js index a9277d4f0b..a76d017508 100644 --- a/ionic/collide/calculate-unit-ratios.js +++ b/ionic/collide/calculate-unit-ratios.js @@ -1,4 +1,4 @@ -/* Forked from VelocityJS: https://github.com/julianshapiro/velocity | MIT License. Julian Shapiro http://twitter.com/shapiro */ +/* Forked from VelocityJS, MIT License: https://github.com/julianshapiro/velocity | Julian Shapiro http://twitter.com/shapiro */ /*************************** Unit Ratio Calculation diff --git a/ionic/collide/collide.js b/ionic/collide/collide.js index d200f63734..12b53e746d 100644 --- a/ionic/collide/collide.js +++ b/ionic/collide/collide.js @@ -1,4 +1,4 @@ -/* Forked from VelocityJS: https://github.com/julianshapiro/velocity | MIT License. Julian Shapiro http://twitter.com/shapiro */ +/* Forked from VelocityJS, MIT License: https://github.com/julianshapiro/velocity | Julian Shapiro http://twitter.com/shapiro */ import {dom} from 'ionic/util' diff --git a/ionic/collide/complete-call.js b/ionic/collide/complete-call.js index 3f63334fc3..d4c5f0b732 100644 --- a/ionic/collide/complete-call.js +++ b/ionic/collide/complete-call.js @@ -1,4 +1,4 @@ -/* Forked from VelocityJS: https://github.com/julianshapiro/velocity | MIT License. Julian Shapiro http://twitter.com/shapiro */ +/* Forked from VelocityJS, MIT License: https://github.com/julianshapiro/velocity | Julian Shapiro http://twitter.com/shapiro */ import {Collide} from './collide' import {CSS} from './css' diff --git a/ionic/collide/css.js b/ionic/collide/css.js index f8975d8db8..e8779a9945 100644 --- a/ionic/collide/css.js +++ b/ionic/collide/css.js @@ -1,4 +1,4 @@ -/* Forked from VelocityJS: https://github.com/julianshapiro/velocity | MIT License. Julian Shapiro http://twitter.com/shapiro */ +/* Forked from VelocityJS, MIT License: https://github.com/julianshapiro/velocity | Julian Shapiro http://twitter.com/shapiro */ import {Collide} from './collide' @@ -90,26 +90,6 @@ export var CSS = { hookTemplate, hookNames; - /* In IE, color values inside compound-value properties are positioned at the end the value instead of at the beginning. - Thus, we re-arrange the templates accordingly. */ - // if (IE) { - // for (rootProperty in CSS.Hooks.templates) { - // hookTemplate = CSS.Hooks.templates[rootProperty]; - // hookNames = hookTemplate[0].split(' '); - - // var defaultValues = hookTemplate[1].match(CSS.RegEx.valueSplit); - - // if (hookNames[0] === 'Color') { - // // Reposition both the hook's name and its default value to the end of their respective strings. - // hookNames.push(hookNames.shift()); - // defaultValues.push(defaultValues.shift()); - - // // Replace the existing template for the hook's root property. - // CSS.Hooks.templates[rootProperty] = [ hookNames.join(' '), defaultValues.join(' ') ]; - // } - // } - // } - /* Hook registration. */ for (rootProperty in CSS.Hooks.templates) { hookTemplate = CSS.Hooks.templates[rootProperty]; @@ -308,9 +288,9 @@ export var CSS = { /* Note: Batched normalizations extend the CSS.Normalizations.registered object. */ register: function() { - /***************** + /**************************************** CSS Batched Registration Transforms - *****************/ + ****************************************/ /* Transforms are the subproperties contained by the CSS 'transform' property. Transforms must undergo normalization so that they can be referenced in a properties map by their individual names. */ @@ -384,9 +364,9 @@ export var CSS = { })(); } - /************* + /************************************ CSS Batched Registration Colors - *************/ + ************************************/ /* Since Collide only animates a single numeric value per property, color animation is achieved by hooking the individual RGBA components of CSS color properties. Accordingly, color values must be normalized (e.g. '#ff0000', 'red', and 'rgb(255, 0, 0)' ==> '255 0 0 1') so that their components can be injected/extracted by CSS.Hooks logic. */ @@ -929,3 +909,7 @@ export var CSS = { }; const vendorPrefixes = [ '', 'Webkit', 'ms' ]; + +/* Register hooks and normalizations. */ +CSS.Hooks.register(); +CSS.Normalizations.register(); diff --git a/ionic/collide/easing.js b/ionic/collide/easing.js index f1a9930665..cd22371641 100644 --- a/ionic/collide/easing.js +++ b/ionic/collide/easing.js @@ -1,4 +1,4 @@ -/* Forked from VelocityJS: https://github.com/julianshapiro/velocity | MIT License. Julian Shapiro http://twitter.com/shapiro */ +/* Forked from VelocityJS, MIT License: https://github.com/julianshapiro/velocity | Julian Shapiro http://twitter.com/shapiro */ import * as util from 'ionic/util/util' import {Collide} from './collide' diff --git a/ionic/collide/tick.js b/ionic/collide/tick.js index 6c9e437183..978564f220 100644 --- a/ionic/collide/tick.js +++ b/ionic/collide/tick.js @@ -1,4 +1,4 @@ -/* Forked from VelocityJS: https://github.com/julianshapiro/velocity | MIT License. Julian Shapiro http://twitter.com/shapiro */ +/* Forked from VelocityJS, MIT License: https://github.com/julianshapiro/velocity | Julian Shapiro http://twitter.com/shapiro */ import {dom} from 'ionic/util' import {Collide} from './collide' @@ -29,8 +29,6 @@ function tick(timestamp) { var percentCompleteStop = false; if (timestamp) { - console.debug('tick, calls', Collide.State.calls.length) - /* 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. */ var timeCurrent = (new Date).getTime(); diff --git a/ionic/components/app/test/animations/main.html b/ionic/components/app/test/animations/main.html index 46ecc756cd..e2dd1301ad 100644 --- a/ionic/components/app/test/animations/main.html +++ b/ionic/components/app/test/animations/main.html @@ -17,8 +17,9 @@

- - + + +

diff --git a/ionic/components/app/test/animations/main.js b/ionic/components/app/test/animations/main.js index 3905abcd50..6566aa2434 100644 --- a/ionic/components/app/test/animations/main.js +++ b/ionic/components/app/test/animations/main.js @@ -14,16 +14,17 @@ class IonicApp { } fadeOut() { - let animation = new Animation(); - animation.elements( document.querySelectorAll('.square') ); - animation.debug(2); + this.animation = new Animation(); + this.animation.elements( document.querySelectorAll('.square') ); + this.animation.debug(2); - animation.duration(500); - animation.easing('swing'); + this.animation.duration(500); + this.animation.easing('swing'); - animation.property('opacity', 0); + this.animation.property('opacity', 0); + this.animation.property('translateX', '100px'); - let q = animation.start(); + let q = this.animation.start(); q.then(()=> { console.log('fade out complete') @@ -31,22 +32,27 @@ class IonicApp { } fadeIn() { - let animation = new Animation(); - animation.elements( document.querySelectorAll('.square') ); - animation.debug(2); + this.animation = new Animation(); + this.animation.elements( document.querySelectorAll('.square') ); + this.animation.debug(2); - animation.duration(500); - animation.easing('swing'); + this.animation.duration(2500); + this.animation.easing('swing'); - animation.property('opacity', 1); + this.animation.property('opacity', 1); + this.animation.property('translateX', '0px'); - let q = animation.start(); + let q = this.animation.start(); q.then(()=> { console.log('fade in complete') }); } + stop() { + this.animation.stop(); + } + percent(ev) { let ratio = parseFloat(ev.srcElement.value) / 100; console.log('percent ratio', ratio); @@ -59,7 +65,15 @@ class IonicApp { } velocityStart() { - window.Velocity(document.querySelectorAll('.square'), { opacity: 0 }, 500); + var elements = document.querySelectorAll('.square'); + Velocity(elements, { + opacity: 0, + translateX: '100px' + }, 5000); + + setTimeout(function() { + Velocity(elements, "stop"); + }, 1000) } }