mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
style(animations): fix jshint errors
This commit is contained in:
Andrew Joslin
18
js/angular/service/animation.js
vendored
18
js/angular/service/animation.js
vendored
@@ -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);
|
||||
}
|
||||
}]
|
||||
};
|
||||
}];
|
||||
});
|
||||
|
||||
@@ -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'];
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user