diff --git a/js/angular/service/animation.js b/js/angular/service/animation.js index a5d59e43a8..569e6a96d4 100644 --- a/js/angular/service/animation.js +++ b/js/angular/service/animation.js @@ -15,22 +15,22 @@ * 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 * }, @@ -38,7 +38,7 @@ * // Callback on end * }, * step: function(amt) { - * + * * } * }) * }); @@ -60,6 +60,6 @@ IonicModule return function(opts) { opts.useSlowAnimations = useSlowAnimations; return ionic.Animation.create(opts); - } - }] + }; + }]; }); diff --git a/js/animation/animation.js b/js/animation/animation.js index 209e5310c0..25c49279e0 100644 --- a/js/animation/animation.js +++ b/js/animation/animation.js @@ -13,7 +13,7 @@ var tf; if(typeof opts.curve === 'string') { - tf = ionic.Animation.TimingFn[opts.curve] || ionic.Animation.TimingFn['linear']; + tf = ionic.Animation.TimingFn[opts.curve] || ionic.Animation.TimingFn.linear; if(opts.curve.indexOf('cubic-bezier(') >= 0) { var parts = opts.curve.replace('cubic-bezier(', '').replace(')', '').split(','); tf = ionic.Animation.TimingFn['cubic-bezier']; diff --git a/js/animation/bezier.js b/js/animation/bezier.js index 62d86d48fa..402f8b478b 100644 --- a/js/animation/bezier.js +++ b/js/animation/bezier.js @@ -20,7 +20,7 @@ * 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. + * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ (function(ionic) { @@ -35,23 +35,23 @@ function B3(t) { return 3*t*(1-t)*(1-t); } function B4(t) { return (1-t)*(1-t)*(1-t); } - ionic.Animation = ionic.Animation || {} + 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. @@ -60,7 +60,7 @@ 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). @@ -70,53 +70,53 @@ * @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} @@ -125,7 +125,7 @@ // `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} @@ -133,7 +133,7 @@ var sampleCurveY = function(t) { return ((ay * t + by) * t + cy) * t; }; - + /** * @param t {number} parametric timing value * @return {number} @@ -141,7 +141,7 @@ 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 @@ -155,7 +155,7 @@ 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; @@ -168,19 +168,19 @@ } 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) { @@ -193,11 +193,11 @@ } 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 @@ -206,9 +206,9 @@ 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 @@ -219,7 +219,7 @@ return solve(x, solveEpsilon(+duration || DEFAULT_DURATION)); }; }; - + // http://www.w3.org/TR/css3-transitions/#transition-timing-function return { /** @@ -228,35 +228,35 @@ * @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 @@ -278,14 +278,14 @@ */ 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 @@ -293,7 +293,7 @@ var Easing = (function(){ 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 @@ -302,7 +302,7 @@ var Easing = (function(){ // // 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 @@ -311,7 +311,7 @@ var Easing = (function(){ // 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 @@ -319,7 +319,7 @@ var Easing = (function(){ 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 @@ -327,7 +327,7 @@ var Easing = (function(){ 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 @@ -336,7 +336,7 @@ var Easing = (function(){ // 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 @@ -345,7 +345,7 @@ var Easing = (function(){ 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 @@ -354,7 +354,7 @@ var Easing = (function(){ 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 @@ -363,12 +363,12 @@ var Easing = (function(){ // 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 @@ -376,13 +376,13 @@ var Easing = (function(){ 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 @@ -390,13 +390,13 @@ var Easing = (function(){ 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 @@ -404,13 +404,13 @@ var Easing = (function(){ 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 @@ -418,7 +418,7 @@ var Easing = (function(){ 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); diff --git a/js/animation/dynamics.js b/js/animation/dynamics.js index 7681c3c196..9637dba056 100644 --- a/js/animation/dynamics.js +++ b/js/animation/dynamics.js @@ -35,7 +35,7 @@ anticipationStrength: 0, anticipationSize: 0 }; - + ionic.extend(this, opts); }; @@ -75,7 +75,7 @@ //return [t, v, At, frictionT, angle]; return v; } - } + }; ionic.Animation.Dynamics.Gravity = function(opts) { this.options = { @@ -143,8 +143,8 @@ } return _results; }, - curve: function(a, b, H, t){ - + curve: function(a, b, H, t){ + var L, c, t2; L = b - a; t2 = (2 / L) * t - 1 - (a * 2 / L); @@ -175,6 +175,6 @@ //return [t, v]; return v; } - - } + + }; })(window); diff --git a/js/animation/instance.js b/js/animation/instance.js index 0d1dd310d6..35adac23da 100644 --- a/js/animation/instance.js +++ b/js/animation/instance.js @@ -35,7 +35,7 @@ }); }, curve: 'linear', - curveFn: ionic.Animation.TimingFn['linear'], + curveFn: ionic.Animation.TimingFn.linear, duration: 500, delay: 0, repeat: -1, @@ -79,7 +79,7 @@ _saveState: function(now, closure) { this._pauseState = { pausedAt: now, - } + }; this._lastStepFn = closure; window.cancelAnimationFrame(closure); }, @@ -91,7 +91,7 @@ // TODO: Verify this isn't totally stupid ionic.requestAnimationFrame(function() { self.start(); - }) + }); }, start: function() { @@ -108,7 +108,7 @@ repeat: this.repeat, autoReverse: this.autoReverse, dynamic: this.dynamic - } + }; ionic.Animation.animationStarted(this); @@ -172,7 +172,7 @@ // Start fresh either way start = time(); ionic.requestAnimationFrame(step); - } + }; // This is the internal step method which is called every few milliseconds @@ -260,7 +260,11 @@ } else if(repeat === 0 && autoReverse) { perhapsAutoreverse(); } else { - completedCallback && completedCallback(desiredFrames - (dropCounter / ((now - start) / millisecondsPerSecond)), self._animationId, percent === endPercent || duration == null); + completedCallback && completedCallback( + desiredFrames - (dropCounter / ((now - start) / millisecondsPerSecond)), + self._animationId, + percent === endPercent || duration === null + ); } } else if (render) { lastFrame = now; diff --git a/js/animation/timing-functions.js b/js/animation/timing-functions.js index 3afabb4b83..8d363131cf 100644 --- a/js/animation/timing-functions.js +++ b/js/animation/timing-functions.js @@ -8,43 +8,43 @@ 'spring': function(duration) { return function(t) { return ionic.Animation.Dynamics.Spring(t, duration); - } + }; }, 'gravity': function(duration) { return function(t) { return ionic.Animation.Dynamics.Gravity(t, duration); - } + }; }, '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); - } + }; }, 'cubic-bezier': function(x1, y1, x2, y2, duration) { var bz = ionic.Animation.Bezier.cubicBezier(x1, y1, x2, y2);//, t, duration); return function(t) { return bz(t, duration); - } + }; } }; })(window);