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

getting closer

Browse Source
This commit is contained in:
Adam Bradley
2015-04-26 21:59:56 -05:00
parent 08a4cf32ca
commit c6f2f49a43
3 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ionic/collide/tick.js
View File

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

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

@ -8,12 +8,12 @@
<div class="red square" style="position:absolute; width:100px; height:100px; background:red; top: 0; left: 0;"></div>
<div class="green square" style="position:absolute; width:100px; height:100px; background:green; top: 0; left: 100px;"></div>
<!-- <div class="blue square" style="position:absolute; width:100px; height:100px; background:blue; top: 0; left: 200px;"></div> -->
<div class="blue square" style="position:absolute; width:100px; height:100px; background:blue; top: 0; left: 200px;"></div>
</div>
<p>
<input type="range" (input)="percent($event)" value="50" min="0" max="100" style="width:200px">
<input type="range" (input)="percent($event)" value="0" min="0" max="100" style="width:200px">
</p>
<p>

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

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