From 9c43dda4e5707099a646de758f58a24ba1ffdb7c Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 1 May 2014 11:31:54 -0500 Subject: [PATCH] More timing functions --- js/animation/animation.js | 2 +- js/animation/timing-functions.js | 33 +++++++++++++++++------- test/html/animation.html | 44 ++++++++++++++++++++++---------- 3 files changed, 56 insertions(+), 23 deletions(-) diff --git a/js/animation/animation.js b/js/animation/animation.js index 972e25df2b..d3d8d13f56 100644 --- a/js/animation/animation.js +++ b/js/animation/animation.js @@ -101,7 +101,7 @@ tf = tf(this.duration); return this._run(function(percent, now, virtual) { - //console.log('Animation step', percent, now, virtual); + console.log(percent); self.el[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + (percent * 400) + 'px, 0,0)'; }, function() { return true; diff --git a/js/animation/timing-functions.js b/js/animation/timing-functions.js index e3acc89c9a..5b066d277e 100644 --- a/js/animation/timing-functions.js +++ b/js/animation/timing-functions.js @@ -5,20 +5,35 @@ ionic.Animation.TimingFn = { + 'linear': function(duration) { + return function(t) { + return t; + } + }, + 'ease': function(duration) { + var bz = ionic.Animation.Bezier.getCubicBezier(0.25, 0.1, 0.25, 1.0, duration); + return function(t) { + return bz(t); + } + }, + 'ease-in': function(duration) { + //0.42, 0.0, 1.0, 1.0 + var bz = ionic.Animation.Bezier.getCubicBezier(0.42, 0.0, 1.0, 1.0, duration); + return function(t) { + return bz(t); + } + }, + 'ease-out': function(duration) { + var bz = ionic.Animation.Bezier.getCubicBezier(0.0, 0.0, 0.58, 1.0, duration); + return function(t) { + return bz(t); + } + }, 'ease-in-out': function(duration) { var bz = ionic.Animation.Bezier.getCubicBezier(0.42, 0.0, 0.58, 1.0, duration); return function(t) { - //console.log(t); return bz(t); } - /* - 0.42, 0.0, 0.58, 1.0) - - t /= d/2; - if (t < 1) return c/2*t*t*t + b; - t -= 2; - return c/2*(t*t*t + 2) + b; - */ } }; })(window); diff --git a/test/html/animation.html b/test/html/animation.html index 9b1e66b7e3..e3e681672a 100644 --- a/test/html/animation.html +++ b/test/html/animation.html @@ -1,5 +1,5 @@ - + @@ -14,6 +14,11 @@ height: 100px; background-color: black; } + #opts { + position: absolute; + top: 200px; + left: 10px; + } @@ -22,23 +27,36 @@
+
+ +