mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Shouldn't have been in there
This commit is contained in:
Max Lynch
61
js/angular/service/animation.js
vendored
61
js/angular/service/animation.js
vendored
@@ -1,61 +0,0 @@
|
||||
|
||||
/**
|
||||
* @ngdoc service
|
||||
* @name $ionicAnimation
|
||||
* @module ionic
|
||||
* @description
|
||||
*
|
||||
* A powerful animation and transition system for Ionic apps.
|
||||
*
|
||||
* @usage
|
||||
*
|
||||
* ```js
|
||||
* angular.module('mySuperApp', ['ionic'])
|
||||
* .controller(function($scope, $ionicAnimation) {
|
||||
* var anim = $ionicAnimate({
|
||||
* // A unique, reusable name
|
||||
* name: 'popIn',
|
||||
*
|
||||
* // The duration of an auto playthrough
|
||||
* duration: 0.5,
|
||||
*
|
||||
* // How long to wait before running the animation
|
||||
* delay: 0,
|
||||
*
|
||||
* // Whether to reverse after doing one run through
|
||||
* autoReverse: false,
|
||||
*
|
||||
* // How many times to repeat? -1 or null for infinite
|
||||
* repeat: -1,
|
||||
*
|
||||
* // Timing curve to use (same as CSS timing functions), or a function of time "t" to handle it yourself
|
||||
* curve: 'ease-in-out'
|
||||
*
|
||||
* onStart: function() {
|
||||
* // Callback on start
|
||||
* },
|
||||
* onEnd: function() {
|
||||
* // Callback on end
|
||||
* },
|
||||
* step: function(amt) {
|
||||
*
|
||||
* }
|
||||
* })
|
||||
* });
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
IonicModule
|
||||
.provider('$ionicAnimation', function() {
|
||||
var useSlowAnimations = false;
|
||||
this.setSlowAnimations = function(isSlow) {
|
||||
useSlowAnimations = isSlow;
|
||||
};
|
||||
|
||||
this.$get = [function() {
|
||||
return function(opts) {
|
||||
opts.useSlowAnimations = useSlowAnimations;
|
||||
return ionic.Animation.create(opts);
|
||||
};
|
||||
}];
|
||||
});
|
||||
@@ -1,325 +0,0 @@
|
||||
(function(window) {
|
||||
var time = Date.now || function() {
|
||||
return +new Date();
|
||||
};
|
||||
var desiredFrames = 60;
|
||||
var millisecondsPerSecond = 1000;
|
||||
var running = {};
|
||||
var counter = 1;
|
||||
|
||||
// Namespace
|
||||
ionic.Animation = {};
|
||||
|
||||
/**
|
||||
* The main animation system manager. Treated as a singleton.
|
||||
*/
|
||||
ionic.Animation = {
|
||||
create: function(opts) {
|
||||
return new ionic.Animation.Animation(opts);
|
||||
},
|
||||
|
||||
animationStarted: function(instance) {
|
||||
var id = counter++;
|
||||
|
||||
// Compacting running db automatically every few new animations
|
||||
if (id % 20 === 0) {
|
||||
var newRunning = {};
|
||||
for (var usedId in running) {
|
||||
newRunning[usedId] = true;
|
||||
}
|
||||
running = newRunning;
|
||||
}
|
||||
|
||||
// Mark as running
|
||||
running[id] = true;
|
||||
|
||||
instance.isRunning = true;
|
||||
instance._animationId = id;
|
||||
|
||||
// Return unique animation ID
|
||||
return id;
|
||||
},
|
||||
|
||||
animationStopped: function(instance) {
|
||||
instance.isRunning = false;
|
||||
}
|
||||
|
||||
/* TODO: Move animation set management here instead of instance
|
||||
anims: [],
|
||||
add: function(animation) {
|
||||
this.anims.push(animation);
|
||||
},
|
||||
remove: function(animation) {
|
||||
var i, j;
|
||||
for(i = 0, j = this.anims.length; i < j; i++) {
|
||||
if(this.anims[i] === animation) {
|
||||
return this.anims.splice(i, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
clear: function(shouldStop) {
|
||||
while(this.anims.length) {
|
||||
var anim = this.anims.pop();
|
||||
if(shouldStop === true) {
|
||||
anim.stop();
|
||||
}
|
||||
}
|
||||
},
|
||||
*/
|
||||
|
||||
/**
|
||||
* Stops the given animation.
|
||||
*
|
||||
* @param id {Integer} Unique animation ID
|
||||
* @return {Boolean} Whether the animation was stopped (aka, was running before)
|
||||
* TODO: Requires above fix
|
||||
stop: function(id) {
|
||||
var cleared = running[id] != null;
|
||||
if (cleared) {
|
||||
running[id] = null;
|
||||
}
|
||||
|
||||
return cleared;
|
||||
},
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Whether the given animation is still running.
|
||||
*
|
||||
* @param id {Integer} Unique animation ID
|
||||
* @return {Boolean} Whether the animation is still running
|
||||
isRunning: function(id) {
|
||||
return running[id] != null;
|
||||
},
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation instance
|
||||
*/
|
||||
ionic.Animation.Animation = function(opts) {
|
||||
ionic.extend(this, opts);
|
||||
|
||||
if(opts.useSlowAnimations) {
|
||||
console.warn('Running animation', opts.name, 'with SLOW animations (duration and delay increased by 3x)');
|
||||
this.delay *= 3;
|
||||
this.duration *= 3;
|
||||
}
|
||||
};
|
||||
|
||||
ionic.Animation.Animation.prototype = {
|
||||
el: null,
|
||||
curve: 'linear',
|
||||
duration: 500,
|
||||
delay: 0,
|
||||
repeat: -1,
|
||||
reverse: false,
|
||||
autoReverse: false,
|
||||
|
||||
step: function(percent) {},
|
||||
|
||||
stop: function() {
|
||||
this.isRunning = false;
|
||||
this.shouldEnd = true;
|
||||
},
|
||||
play: function() {
|
||||
this.isPaused = false;
|
||||
this.start();
|
||||
},
|
||||
pause: function() {
|
||||
this.isPaused = true;
|
||||
},
|
||||
_saveState: function(percent, iteration, reverse) {
|
||||
this._pauseState = {
|
||||
percent: percent,
|
||||
iteration: iteration,
|
||||
reverse: reverse
|
||||
};
|
||||
},
|
||||
restart: function() {
|
||||
},
|
||||
|
||||
start: function() {
|
||||
var self = this;
|
||||
|
||||
var tf;
|
||||
|
||||
console.log('Starting animation', this);
|
||||
|
||||
|
||||
// Grab the timing function
|
||||
if(typeof this.curve === 'string') {
|
||||
tf = ionic.Animation.TimingFn[this.curve] || ionic.Animation.TimingFn.linear;
|
||||
} else {
|
||||
tf = this.curve;
|
||||
}
|
||||
|
||||
// Get back a timing function for the given duration (used for precision)
|
||||
tf = tf(this.duration);
|
||||
|
||||
// Set up the initial animation state
|
||||
var animState = {
|
||||
startPercent: this.reverse === true ? 1 : 0,
|
||||
endPercent: this.reverse === true ? 0 : 1,
|
||||
duration: this.duration,
|
||||
easingMethod: tf,
|
||||
delay: this.delay,
|
||||
reverse: this.reverse,
|
||||
repeat: this.repeat,
|
||||
autoReverse: this.autoReverse
|
||||
};
|
||||
|
||||
|
||||
if(this._pauseState) {
|
||||
// We were paused, so update the fields
|
||||
ionic.extend(animState, this._pauseState);
|
||||
this._pauseState = null;
|
||||
}
|
||||
|
||||
ionic.Animation.animationStarted(this);
|
||||
|
||||
return this._run(function(percent, now, render) {
|
||||
if(render) {
|
||||
self.step(percent);
|
||||
}
|
||||
}, function(droppedFrames, finishedAnimation) {
|
||||
ionic.Animation.animationStopped(self);
|
||||
console.log('Finished anim:', droppedFrames, finishedAnimation);
|
||||
}, animState);
|
||||
},
|
||||
|
||||
/**
|
||||
* Start the animation.
|
||||
*
|
||||
* @param stepCallback {Function} Pointer to function which is executed on every step.
|
||||
* Signature of the method should be `function(percent, now, virtual) { return continueWithAnimation; }`
|
||||
* @param completedCallback {Function}
|
||||
* Signature of the method should be `function(droppedFrames, finishedAnimation) {}`
|
||||
* @param duration {Integer} Milliseconds to run the animation
|
||||
* @param easingMethod {Function} Pointer to easing function
|
||||
* Signature of the method should be `function(percent) { return modifiedValue; }`
|
||||
* @return {Integer} Identifier of animation. Can be used to stop it any time.
|
||||
*/
|
||||
_run: function(stepCallback, completedCallback, state) {
|
||||
|
||||
var self = this;
|
||||
var start = time();
|
||||
var lastFrame = start;
|
||||
var startTime = start + state.delay;
|
||||
var percent = state.startPercent;
|
||||
var startPercent = state.startPercent;
|
||||
var endPercent = state.endPercent;
|
||||
var autoReverse = state.autoReverse;
|
||||
var delay = state.delay;
|
||||
var duration = state.duration;
|
||||
var easingMethod = state.easingMethod;
|
||||
var repeat = state.repeat;
|
||||
var reverse = state.reverse;
|
||||
|
||||
var dropCounter = 0;
|
||||
var iteration = 0;
|
||||
|
||||
var perhapsAutoreverse = function() {
|
||||
// Check if we hit the end and should auto reverse
|
||||
if(percent === endPercent && autoReverse) {
|
||||
// Flip the start and end values
|
||||
var sp = endPercent;
|
||||
reverse = !reverse;
|
||||
endPercent = startPercent;
|
||||
startPercent = sp;
|
||||
|
||||
if(repeat === 0) {
|
||||
autoReverse = false;
|
||||
}
|
||||
} else {
|
||||
// Otherwise, just start over
|
||||
percent = startPercent;
|
||||
}
|
||||
// Start fresh either way
|
||||
start = time();
|
||||
ionic.requestAnimationFrame(step);
|
||||
};
|
||||
|
||||
|
||||
// This is the internal step method which is called every few milliseconds
|
||||
var step = function(virtual) {
|
||||
|
||||
// Normalize virtual value
|
||||
var render = virtual !== true;
|
||||
|
||||
// Get current time
|
||||
var now = time();
|
||||
var diff = now - start;
|
||||
|
||||
// Verification is executed before next animation step
|
||||
if(self.isPaused) {
|
||||
self._saveState(percent, iteration, reverse);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!self.isRunning) {// || (verifyCallback && !verifyCallback(id))) {
|
||||
|
||||
completedCallback && completedCallback(desiredFrames - (dropCounter / ((now - start) / millisecondsPerSecond)), self._animationId, false);
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
|
||||
// For the current rendering to apply let's update omitted steps in memory.
|
||||
// This is important to bring internal state variables up-to-date with progress in time.
|
||||
if (render) {
|
||||
|
||||
var droppedFrames = Math.round((now - lastFrame) / (millisecondsPerSecond / desiredFrames)) - 1;
|
||||
for (var j = 0; j < Math.min(droppedFrames, 4); j++) {
|
||||
step(true);
|
||||
dropCounter++;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Compute percent value
|
||||
if (diff > delay && duration) {
|
||||
percent = (diff - delay) / duration;
|
||||
if(reverse === true) {
|
||||
percent = 1 - percent;
|
||||
if (percent < 0) {
|
||||
percent = 0;
|
||||
}
|
||||
} else {
|
||||
if (percent > 1) {
|
||||
percent = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Execute step callback, then...
|
||||
var value = easingMethod ? easingMethod(percent) : percent;
|
||||
if ((stepCallback(value, now, render) === false || percent === endPercent) && render) {
|
||||
if(repeat === -1) {
|
||||
perhapsAutoreverse();
|
||||
} else if(iteration < repeat) {
|
||||
// Track iterations
|
||||
iteration++;
|
||||
perhapsAutoreverse();
|
||||
} else if(repeat === 0 && autoReverse) {
|
||||
perhapsAutoreverse();
|
||||
} else {
|
||||
completedCallback && completedCallback(desiredFrames - (dropCounter / ((now - start) / millisecondsPerSecond)), self._animationId, percent === endPercent || duration === null);
|
||||
}
|
||||
} else if (render) {
|
||||
lastFrame = now;
|
||||
ionic.requestAnimationFrame(step);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Init first step
|
||||
ionic.requestAnimationFrame(step);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
})(window);
|
||||
@@ -1,429 +0,0 @@
|
||||
/*
|
||||
* Copyright (C) 2008 Apple Inc. All Rights Reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions
|
||||
* are met:
|
||||
* 1. Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* 2. Redistributions in binary form must reproduce the above copyright
|
||||
* notice, this list of conditions and the following disclaimer in the
|
||||
* documentation and/or other materials provided with the distribution.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
||||
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
|
||||
* CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
|
||||
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
|
||||
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
|
||||
* OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||||
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*/
|
||||
(function(ionic) {
|
||||
|
||||
var bezierCoord = function (x,y) {
|
||||
if(!x) x=0;
|
||||
if(!y) y=0;
|
||||
return {x: x, y: y};
|
||||
};
|
||||
|
||||
function B1(t) { return t*t*t; }
|
||||
function B2(t) { return 3*t*t*(1-t); }
|
||||
function B3(t) { return 3*t*(1-t)*(1-t); }
|
||||
function B4(t) { return (1-t)*(1-t)*(1-t); }
|
||||
|
||||
ionic.Animation = ionic.Animation || {};
|
||||
|
||||
|
||||
/**
|
||||
* JavaScript port of Webkit implementation of CSS cubic-bezier(p1x.p1y,p2x,p2y) by http://mck.me
|
||||
* http://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/UnitBezier.h
|
||||
*/
|
||||
ionic.Animation.Bezier = (function(){
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Duration value to use when one is not specified (400ms is a common value).
|
||||
* @const
|
||||
* @type {number}
|
||||
*/
|
||||
var DEFAULT_DURATION = 400;//ms
|
||||
|
||||
/**
|
||||
* The epsilon value we pass to UnitBezier::solve given that the animation is going to run over |dur| seconds.
|
||||
* The longer the animation, the more precision we need in the timing function result to avoid ugly discontinuities.
|
||||
* http://svn.webkit.org/repository/webkit/trunk/Source/WebCore/page/animation/AnimationBase.cpp
|
||||
*/
|
||||
var solveEpsilon = function(duration) {
|
||||
return 1.0 / (200.0 * duration);
|
||||
};
|
||||
|
||||
/**
|
||||
* Defines a cubic-bezier curve given the middle two control points.
|
||||
* NOTE: first and last control points are implicitly (0,0) and (1,1).
|
||||
* @param p1x {number} X component of control point 1
|
||||
* @param p1y {number} Y component of control point 1
|
||||
* @param p2x {number} X component of control point 2
|
||||
* @param p2y {number} Y component of control point 2
|
||||
*/
|
||||
var unitBezier = function(p1x, p1y, p2x, p2y) {
|
||||
|
||||
// private members --------------------------------------------
|
||||
|
||||
// Calculate the polynomial coefficients, implicit first and last control points are (0,0) and (1,1).
|
||||
|
||||
/**
|
||||
* X component of Bezier coefficient C
|
||||
* @const
|
||||
* @type {number}
|
||||
*/
|
||||
var cx = 3.0 * p1x;
|
||||
|
||||
/**
|
||||
* X component of Bezier coefficient B
|
||||
* @const
|
||||
* @type {number}
|
||||
*/
|
||||
var bx = 3.0 * (p2x - p1x) - cx;
|
||||
|
||||
/**
|
||||
* X component of Bezier coefficient A
|
||||
* @const
|
||||
* @type {number}
|
||||
*/
|
||||
var ax = 1.0 - cx -bx;
|
||||
|
||||
/**
|
||||
* Y component of Bezier coefficient C
|
||||
* @const
|
||||
* @type {number}
|
||||
*/
|
||||
var cy = 3.0 * p1y;
|
||||
|
||||
/**
|
||||
* Y component of Bezier coefficient B
|
||||
* @const
|
||||
* @type {number}
|
||||
*/
|
||||
var by = 3.0 * (p2y - p1y) - cy;
|
||||
|
||||
/**
|
||||
* Y component of Bezier coefficient A
|
||||
* @const
|
||||
* @type {number}
|
||||
*/
|
||||
var ay = 1.0 - cy - by;
|
||||
|
||||
/**
|
||||
* @param t {number} parametric timing value
|
||||
* @return {number}
|
||||
*/
|
||||
var sampleCurveX = function(t) {
|
||||
// `ax t^3 + bx t^2 + cx t' expanded using Horner's rule.
|
||||
return ((ax * t + bx) * t + cx) * t;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param t {number} parametric timing value
|
||||
* @return {number}
|
||||
*/
|
||||
var sampleCurveY = function(t) {
|
||||
return ((ay * t + by) * t + cy) * t;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param t {number} parametric timing value
|
||||
* @return {number}
|
||||
*/
|
||||
var sampleCurveDerivativeX = function(t) {
|
||||
return (3.0 * ax * t + 2.0 * bx) * t + cx;
|
||||
};
|
||||
|
||||
/**
|
||||
* Given an x value, find a parametric value it came from.
|
||||
* @param x {number} value of x along the bezier curve, 0.0 <= x <= 1.0
|
||||
* @param epsilon {number} accuracy limit of t for the given x
|
||||
* @return {number} the t value corresponding to x
|
||||
*/
|
||||
var solveCurveX = function(x, epsilon) {
|
||||
var t0;
|
||||
var t1;
|
||||
var t2;
|
||||
var x2;
|
||||
var d2;
|
||||
var i;
|
||||
|
||||
// First try a few iterations of Newton's method -- normally very fast.
|
||||
for (t2 = x, i = 0; i < 8; i++) {
|
||||
x2 = sampleCurveX(t2) - x;
|
||||
if (Math.abs (x2) < epsilon) {
|
||||
return t2;
|
||||
}
|
||||
d2 = sampleCurveDerivativeX(t2);
|
||||
if (Math.abs(d2) < 1e-6) {
|
||||
break;
|
||||
}
|
||||
t2 = t2 - x2 / d2;
|
||||
}
|
||||
|
||||
// Fall back to the bisection method for reliability.
|
||||
t0 = 0.0;
|
||||
t1 = 1.0;
|
||||
t2 = x;
|
||||
|
||||
if (t2 < t0) {
|
||||
return t0;
|
||||
}
|
||||
if (t2 > t1) {
|
||||
return t1;
|
||||
}
|
||||
|
||||
while (t0 < t1) {
|
||||
x2 = sampleCurveX(t2);
|
||||
if (Math.abs(x2 - x) < epsilon) {
|
||||
return t2;
|
||||
}
|
||||
if (x > x2) {
|
||||
t0 = t2;
|
||||
} else {
|
||||
t1 = t2;
|
||||
}
|
||||
t2 = (t1 - t0) * 0.5 + t0;
|
||||
}
|
||||
|
||||
// Failure.
|
||||
return t2;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the bezier curve, 0.0 <= x <= 1.0
|
||||
* @param epsilon {number} the accuracy of t for the given x
|
||||
* @return {number} the y value along the bezier curve
|
||||
*/
|
||||
var solve = function(x, epsilon) {
|
||||
return sampleCurveY(solveCurveX(x, epsilon));
|
||||
};
|
||||
|
||||
// public interface --------------------------------------------
|
||||
|
||||
/**
|
||||
* Find the y of the cubic-bezier for a given x with accuracy determined by the animation duration.
|
||||
* @param x {number} the value of x along the bezier curve, 0.0 <= x <= 1.0
|
||||
* @param duration {number} the duration of the animation in milliseconds
|
||||
* @return {number} the y value along the bezier curve
|
||||
*/
|
||||
return function(x, duration) {
|
||||
return solve(x, solveEpsilon(+duration || DEFAULT_DURATION));
|
||||
};
|
||||
};
|
||||
|
||||
// http://www.w3.org/TR/css3-transitions/#transition-timing-function
|
||||
return {
|
||||
/**
|
||||
* @param x {number} the value of x along the bezier curve, 0.0 <= x <= 1.0
|
||||
* @param duration {number} the duration of the animation in milliseconds
|
||||
* @return {number} the y value along the bezier curve
|
||||
*/
|
||||
linear: unitBezier(0.0, 0.0, 1.0, 1.0),
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the bezier curve, 0.0 <= x <= 1.0
|
||||
* @param duration {number} the duration of the animation in milliseconds
|
||||
* @return {number} the y value along the bezier curve
|
||||
*/
|
||||
ease: unitBezier(0.25, 0.1, 0.25, 1.0),
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the bezier curve, 0.0 <= x <= 1.0
|
||||
* @param duration {number} the duration of the animation in milliseconds
|
||||
* @return {number} the y value along the bezier curve
|
||||
*/
|
||||
easeIn: unitBezier(0.42, 0, 1.0, 1.0),
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the bezier curve, 0.0 <= x <= 1.0
|
||||
* @param duration {number} the duration of the animation in milliseconds
|
||||
* @return {number} the y value along the bezier curve
|
||||
*/
|
||||
easeOut: unitBezier(0, 0, 0.58, 1.0),
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the bezier curve, 0.0 <= x <= 1.0
|
||||
* @param duration {number} the duration of the animation in milliseconds
|
||||
* @return {number} the y value along the bezier curve
|
||||
*/
|
||||
easeInOut: unitBezier(0.42, 0, 0.58, 1.0),
|
||||
|
||||
/**
|
||||
* @param p1x {number} X component of control point 1
|
||||
* @param p1y {number} Y component of control point 1
|
||||
* @param p2x {number} X component of control point 2
|
||||
* @param p2y {number} Y component of control point 2
|
||||
* @param x {number} the value of x along the bezier curve, 0.0 <= x <= 1.0
|
||||
* @param duration {number} the duration of the animation in milliseconds
|
||||
* @return {number} the y value along the bezier curve
|
||||
*/
|
||||
cubicBezier: function(p1x, p1y, p2x, p2y, x, duration) {
|
||||
return unitBezier(p1x, p1y, p2x, p2y)(x, duration);
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
/**
|
||||
* Various fast approximations and alternates to cubic-bezier easing functions.
|
||||
* http://www.w3.org/TR/css3-transitions/#transition-timing-function
|
||||
*/
|
||||
var Easing = (function(){
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @const
|
||||
*/
|
||||
var EASE_IN_OUT_CONST = 0.5 * Math.pow(0.5, 1.925);
|
||||
|
||||
return {
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
linear: function(x) {
|
||||
return x;
|
||||
},
|
||||
|
||||
// /**
|
||||
// * @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
// * @return {number} the y value along the curve
|
||||
// */
|
||||
// ease: function(x) {
|
||||
// // TODO: find fast approximations
|
||||
// return x;
|
||||
// },
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
easeInApprox: function(x) {
|
||||
// very close approximation to cubic-bezier(0.42, 0, 1.0, 1.0)
|
||||
return Math.pow(x, 1.685);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
easeInQuadratic: function(x) {
|
||||
return (x * x);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
easeInCubic: function(x) {
|
||||
return (x * x * x);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
easeOutApprox: function(x) {
|
||||
// very close approximation to cubic-bezier(0, 0, 0.58, 1.0)
|
||||
return 1 - Math.pow(1-x, 1.685);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
easeOutQuadratic: function(x) {
|
||||
x -= 1;
|
||||
return 1 - (x * x);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
easeOutCubic: function(x) {
|
||||
x -= 1;
|
||||
return 1 + (x * x * x);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
easeInOutApprox: function(x) {
|
||||
// very close approximation to cubic-bezier(0.42, 0, 0.58, 1.0)
|
||||
if (x < 0.5) {
|
||||
return EASE_IN_OUT_CONST * Math.pow(x, 1.925);
|
||||
|
||||
} else {
|
||||
return 1 - EASE_IN_OUT_CONST * Math.pow(1-x, 1.925);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
easeInOutQuadratic: function(x) {
|
||||
if (x < 0.5) {
|
||||
return (2 * x * x);
|
||||
|
||||
} else {
|
||||
x -= 1;
|
||||
return 1 - (2 * x * x);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
easeInOutCubic: function(x) {
|
||||
if (x < 0.5) {
|
||||
return (4 * x * x * x);
|
||||
|
||||
} else {
|
||||
x -= 1;
|
||||
return 1 + (4 * x * x * x);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
easeInOutQuartic: function(x) {
|
||||
if (x < 0.5) {
|
||||
return (8 * x * x * x * x);
|
||||
|
||||
} else {
|
||||
x -= 1;
|
||||
return 1 + (8 * x * x * x * x);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param x {number} the value of x along the curve, 0.0 <= x <= 1.0
|
||||
* @return {number} the y value along the curve
|
||||
*/
|
||||
easeInOutQuintic: function(x) {
|
||||
if (x < 0.5) {
|
||||
return (16 * x * x * x * x * x);
|
||||
|
||||
} else {
|
||||
x -= 1;
|
||||
return 1 + (16 * x * x * x * x * x);
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
})(ionic);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,34 +0,0 @@
|
||||
(function(window) {
|
||||
|
||||
// Namespace
|
||||
ionic.Animation = ionic.Animation || {};
|
||||
|
||||
|
||||
ionic.Animation.TimingFn = {
|
||||
'linear': function(duration) {
|
||||
return function(t) {
|
||||
return ionic.Animation.Bezier.linear(t, duration);
|
||||
};
|
||||
},
|
||||
'ease': function(duration) {
|
||||
return function(t) {
|
||||
return ionic.Animation.Bezier.ease(t, duration);
|
||||
};
|
||||
},
|
||||
'ease-in': function(duration) {
|
||||
return function(t) {
|
||||
return ionic.Animation.Bezier.easeIn(t, duration);
|
||||
};
|
||||
},
|
||||
'ease-out': function(duration) {
|
||||
return function(t) {
|
||||
return ionic.Animation.Bezier.easeOut(t, duration);
|
||||
};
|
||||
},
|
||||
'ease-in-out': function(duration) {
|
||||
return function(t) {
|
||||
return ionic.Animation.Bezier.easeInOut(t, duration);
|
||||
};
|
||||
}
|
||||
};
|
||||
})(window);
|
||||
@@ -1,121 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="myApp">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title></title>
|
||||
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css" />
|
||||
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: black;
|
||||
}
|
||||
#opts {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div ng-controller="MyCtrl">
|
||||
<div class="box"></div>
|
||||
<div id="opts">
|
||||
<label>
|
||||
Duration:
|
||||
<input type="number" ng-model="anim.duration">
|
||||
</label>
|
||||
<label>
|
||||
Repeat
|
||||
<input type="number" ng-model="anim.repeat">
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
Delay
|
||||
<input type="number" ng-model="anim.delay">
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
Auto reverse
|
||||
<input type="checkbox" ng-model="anim.autoReverse">
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
Reverse
|
||||
<input type="checkbox" ng-model="anim.reverse">
|
||||
</label>
|
||||
<br>
|
||||
<button ng-click="do('{{v}}')" ng-repeat="v in fns">{{v}}</button>
|
||||
<p>
|
||||
<button ng-click="togglePause()">Toggle Pause/Play</button>
|
||||
<button ng-click="stop()">Stop</button>
|
||||
<button ng-click="restart()">Restart</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
angular.module('myApp', ['ionic'])
|
||||
.config(['$ionicAnimationProvider', function($ionicAnimationProvider) {
|
||||
//$ionicAnimationProvider.setSlowAnimations(true);
|
||||
}])
|
||||
.controller('MyCtrl', function($scope, $ionicAnimation) {
|
||||
var currentAnimation;
|
||||
$scope.fns = [
|
||||
'linear',
|
||||
'ease',
|
||||
'ease-in',
|
||||
'ease-out',
|
||||
'ease-in-out'
|
||||
];
|
||||
$scope.anim = {
|
||||
duration: 500,
|
||||
delay: 0,
|
||||
repeat: -1,
|
||||
reverse: false,
|
||||
autoReverse: false
|
||||
}
|
||||
var el = angular.element(document.querySelector('.box'));
|
||||
$scope.do = function(fn) {
|
||||
currentAnimation = $ionicAnimation(angular.extend({
|
||||
el: el,
|
||||
name: 'fadeIn',
|
||||
duration: 500,
|
||||
delay: 500,
|
||||
autoReverse: false,
|
||||
repeat: -1,
|
||||
curve: fn,
|
||||
step: function(v) {
|
||||
el[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + (v * 400) + 'px, 0,0)';
|
||||
},
|
||||
complete: function() {
|
||||
console.log('Animation complete!');
|
||||
}
|
||||
}, $scope.anim));
|
||||
|
||||
currentAnimation.start();
|
||||
}
|
||||
$scope.togglePause = function() {
|
||||
if(currentAnimation.isPaused) {
|
||||
currentAnimation.play();
|
||||
} else {
|
||||
currentAnimation.pause();
|
||||
}
|
||||
};
|
||||
$scope.stop = function() {
|
||||
currentAnimation.stop();
|
||||
};
|
||||
$scope.restart = function() {
|
||||
currentAnimation.restart();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user