javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

collide updates

Browse Source
This commit is contained in:
Adam Bradley
2015-04-26 20:24:04 -05:00
parent c8b6a4a535
commit 3777e1dc08
12 changed files with 127 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/collide/animation-process.js
View File

@@ -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'

2
ionic/collide/animation-start.js
View File

@@ -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'

142
ionic/collide/animation-stop.js
View File

@@ -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);
}
}
};

2
ionic/collide/animation.js
View File

@@ -33,7 +33,7 @@ export class Animation {
}
stop() {
animationStop(this._elements, this._options, this._properties);
animationStop(this._elements, 'stop');
}
percent(ratio) {

2
ionic/collide/calculate-unit-ratios.js
View File

@@ -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

2
ionic/collide/collide.js
View File

@@ -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'

2
ionic/collide/complete-call.js
View File

@@ -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'

34
ionic/collide/css.js
View File

@@ -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();

2
ionic/collide/easing.js
View File

@@ -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'

4
ionic/collide/tick.js
View File

@@ -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();

5
ionic/components/app/test/animations/main.html
View File

@@ -17,8 +17,9 @@
</p>
<p>
<button class="button button-primary" (click)="fadeOut($event)">Collide Fade Out</button>
<button class="button button-primary" (click)="fadeIn($event)">Collide Fade In</button>
<button class="button button-primary" (click)="fadeOut($event)">Fade Out</button>
<button class="button button-primary" (click)="fadeIn($event)">Fade In</button>
<button class="button button-primary" (click)="stop($event)">Stop</button>
</p>

44
ionic/components/app/test/animations/main.js
View File

@@ -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)
}
}