More timing functions

mlynch · ajoslin · commit 9c43dda4e570 · 2014-05-02T07:56:44.000-06:00
diff --git 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
@@ -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
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html ng-app="ionic">
+<html ng-app="myApp">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title></title>
@@ -14,6 +14,11 @@
         height: 100px;
         background-color: black;
       }
+      #opts {
+        position: absolute;
+        top: 200px;
+        left: 10px;
+      }
     </style>
 
   </head>
@@ -22,23 +27,36 @@
 
     <div ng-controller="MyCtrl">
       <div class="box"></div>
+      <div id="opts">
+        <button ng-click="do('{{v}}')" ng-repeat="v in fns">{{v}}</button>
+      </div>
     </div>
 
     <script>
-      function MyCtrl($scope, $ionicAnimation) {
+      angular.module('myApp', ['ionic'])
+      .controller('MyCtrl', function($scope, $ionicAnimation) {
+        $scope.fns = [
+          'linear',
+          'ease',
+          'ease-in',
+          'ease-out',
+          'ease-in-out'
+        ];
         var el = angular.element(document.querySelector('.box'));
-        var fadeIn = $ionicAnimation({
-          el: el,
-          name: 'fadeIn',
-          duration: 500,
-          delay: 0,
-          autoReverse: false,
-          repeat: -1,
-          curve: 'ease-in-out'
-        });
+        $scope.do = function(fn) {
+          var fadeIn = $ionicAnimation({
+            el: el,
+            name: 'fadeIn',
+            duration: 500,
+            delay: 0,
+            autoReverse: false,
+            repeat: -1,
+            curve: fn
+          });
 
-        fadeIn.start();
-      }
+          fadeIn.start();
+        }
+      });
     </script>
   </body>
 </html>
