javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

start tick

Browse Source
This commit is contained in:
Adam Bradley
2015-04-25 14:17:16 -05:00
parent d7d1f4068f
commit 8f4b406831
6 changed files with 51 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,6 @@ import * as util from 'ionic/util/util'
import {Collide} from './collide' import {Collide} from './collide'
import {CSS} from './css' import {CSS} from './css'
import {getEasing} from './easing' import {getEasing} from './easing'
import {tick} from './tick'
const data = Collide.data; const data = Collide.data;

3
ionic/collide/animation.js
View File

@ -1,6 +1,7 @@
import {Collide} from './collide' import {Collide} from './collide'
import {animationStart} from './animation-start' import {animationStart} from './animation-start'
import {animationStop} from './animation-stop' import {animationStop} from './animation-stop'
import {startTick} from './tick'
export class Animation { export class Animation {
@ -29,7 +30,7 @@ export class Animation {
start() { start() {
let promise = animationStart(this._elements, this._options, this._properties) let promise = animationStart(this._elements, this._options, this._properties)
Collide.startTick(); startTick();
return promise return promise
} }

11
ionic/collide/collide.js
View File

@ -55,17 +55,6 @@ export let Collide = {
/* Set to 1 or 2 (most verbose) to output debug info to console. */ /* Set to 1 or 2 (most verbose) to output debug info to console. */
debug: false, 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 */ /* initialize element data */
initData: function(element) { initData: function(element) {
element.$collide = { element.$collide = {

9
ionic/collide/tick.js
View File

@ -10,8 +10,15 @@ import {completeCall} from './complete-call'
Tick 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. */ /* 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. /* 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 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 the browser's next tick sync time occurs, which results in the first elements subjected to Collide

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

@ -1,12 +1,28 @@
<html>
<head>
<title>Collide Tests</title>
</head>
<body>
<div animation> <div style="position: absolute; top: 20px; left: 300px;">
<div class="square" style="position:absolute; width:100px; height:100px; background:red; top: 100px; left: 100px;"></div> <div class="red square" style="position:absolute; width:100px; height:100px; background:red; top: 0; left: 0;"></div>
<div class="square" style="position:absolute; width:100px; height:100px; background:green; top: 100px; left: 200px;"></div> <div class="green square" style="position:absolute; width:100px; height:100px; background:green; top: 0; left: 100px;"></div>
<div class="square" style="position:absolute; width:100px; height:100px; background:blue; top: 100px; left: 300px;"></div> <div class="blue square" style="position:absolute; width:100px; height:100px; background:blue; top: 0; left: 200px;"></div>
<button class="button button-primary" (click)="start($event)">Start</button> </div>
<button class="button button-primary" (click)="stop($event)">Stop</button>
</div>
<p>
<button class="button button-primary" (click)="start($event)">Collide Start</button>
</p>
<p>
<button class="button button-primary" (click)="velocityStart($event)">Velocity Start</button>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
</body>
</html>

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

@ -12,22 +12,34 @@ class IonicApp {
@NgElement ngElement:NgElement @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.animation.duration(500)
this.trans.easing('linear') this.animation.easing('linear')
this.trans.property('opacity', 0) this.animation.property('opacity', 0)
} }
start() { start() {
this.trans.start() let q = this.animation.start();
q.then(()=> {
console.log('animation complete')
});
} }
stop() { stop() {
this.trans.stop() this.animation.stop()
} }
velocityStart() {
Velocity(document.querySelectorAll('.square'), { opacity: 0 }, 500); // Velocity
}
} }