Implemented #1102: Ability to specify an animation easing, i.e. curve in a platform-independent manner.

apps/animations/main-page.ts

@@ -5,6 +5,7 @@ import abs = require("ui/layouts/absolute-layout");
 import animationModule = require("ui/animation");
 import colorModule = require("color");
 import model = require("./model");
+import enums = require("ui/enums");
 
 var vm = new model.ViewModel();
 
@@ -27,7 +28,7 @@ export function pageLoaded(args: observable.EventData) {
 
 export function onSlideOut(args: observable.EventData) {
     console.log("onSlideOut");
-    var curve = page.android ? new android.view.animation.AccelerateInterpolator(1) : UIViewAnimationCurve.UIViewAnimationCurveEaseIn;
+    var curve = enums.AnimationCurve.easeOut;
 
     var buttonAnimations = [
         { target: button1, translate: { x: -240, y: 0 }, scale: { x: 0.5, y: 0.5 }, opacity: 0, duration: vm.duration, delay: 0, iterations: vm.iterations, curve: curve },
@@ -36,7 +37,7 @@ export function onSlideOut(args: observable.EventData) {
     ]
     buttonAnimation = new animationModule.Animation(buttonAnimations, vm.playSequentially);
 
-    panelAnimation = panel.createAnimation({ opacity: 0, scale: { x: 0.5, y: 0.5 }, rotate: -360, backgroundColor: new colorModule.Color("red"), duration: vm.duration, iterations: vm.iterations });
+    panelAnimation = panel.createAnimation({ opacity: 0, scale: { x: 0.5, y: 0.5 }, rotate: -360, backgroundColor: new colorModule.Color("red"), duration: vm.duration, iterations: vm.iterations, curve: enums.AnimationCurve.easeInOut });
 
     buttonAnimation.play()
         .then(() => panelAnimation.play())
@@ -45,9 +46,9 @@ export function onSlideOut(args: observable.EventData) {
 
 export function onSlideIn(args: observable.EventData) {
     console.log("onSlideIn");
-    var curve = page.android ? new android.view.animation.DecelerateInterpolator(1) : UIViewAnimationCurve.UIViewAnimationCurveEaseOut;
+    var curve = enums.AnimationCurve.easeIn;
 
-    panelAnimation = panel.createAnimation({ opacity: 1, scale: { x: 1, y: 1 }, rotate: 0, backgroundColor: new colorModule.Color("yellow"), duration: vm.duration, iterations: vm.iterations });
+    panelAnimation = panel.createAnimation({ opacity: 1, scale: { x: 1, y: 1 }, rotate: 0, backgroundColor: new colorModule.Color("yellow"), duration: vm.duration, iterations: vm.iterations, curve: enums.AnimationCurve.easeInOut });
 
     var buttonAnimations = [
         { target: button3, translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, duration: vm.duration, delay: 0, iterations: vm.iterations, curve: curve },
@@ -86,7 +87,7 @@ export function onSingle(args: observable.EventData) {
         duration: vm.duration,
         delay: 0,
         iterations: vm.iterations,
-        curve: button1.ios ? UIViewAnimationCurve.UIViewAnimationCurveEaseIn : new android.view.animation.AccelerateInterpolator(1),
+        curve: enums.AnimationCurve.linear,
     })
         .then(() => console.log("Animation finished"))
         .catch((e) => console.log(e.message));

apps/tests/ui/animation/animation-tests.ts

@@ -5,6 +5,7 @@ import viewModule = require("ui/core/view");
 import labelModule = require("ui/label");
 import stackLayoutModule = require("ui/layouts/stack-layout");
 import colorModule = require("color");
+import enums = require("ui/enums");
 
 // <snippet module="ui/animation" title="animation">
 // # Animation
@@ -42,7 +43,7 @@ export var test_AnimatingProperties = function (done) {
         duration: 1000,
         delay: 100,
         iterations: 3,
-        curve: label.ios ? UIViewAnimationCurve.UIViewAnimationCurveEaseIn : new android.view.animation.AccelerateInterpolator(1),
+        curve: enums.AnimationCurve.easeIn
     })
         .then(() => {
             ////console.log("Animation finished.");

ui/animation/animation-common.ts

@@ -61,6 +61,7 @@ export class Animation implements definition.Animation {
         var i = 0;
         var length = animationDefinitions.length;
         for (; i < length; i++) {
+            animationDefinitions[i].curve = this._resolveAnimationCurve(animationDefinitions[i].curve);
             this._propertyAnimations = this._propertyAnimations.concat(Animation._createPropertyAnimations(animationDefinitions[i]));
         }
 
@@ -82,6 +83,10 @@ export class Animation implements definition.Animation {
         this._reject(new Error("Animation cancelled."));
     }
 
+    _resolveAnimationCurve(curve: any): any {
+        //
+    }
+
     private static _createPropertyAnimations(animationDefinition: definition.AnimationDefinition): Array<PropertyAnimation>  {
         if (!animationDefinition.target) {
             throw new Error("No animation target specified.");

ui/animation/animation.android.ts

@@ -4,6 +4,7 @@ import utils = require("utils/utils");
 import color = require("color");
 import trace = require("trace");
 import types = require("utils/types");
+import enums = require("ui/enums");
 
 global.moduleMerge(common, exports);
 
@@ -277,6 +278,26 @@ export class Animation extends common.Animation implements definition.Animation
         this._propertyResetCallbacks = this._propertyResetCallbacks.concat(propertyResetCallbacks);
     }
 
+    _resolveAnimationCurve(curve: any): any {
+        switch (curve) {
+            case enums.AnimationCurve.easeIn:
+                trace.write("Animation curve resolved to android.view.animation.AccelerateInterpolator(1).", trace.categories.Animation);
+                return new android.view.animation.AccelerateInterpolator(1);
+            case enums.AnimationCurve.easeOut:
+                trace.write("Animation curve resolved to android.view.animation.DecelerateInterpolator(1).", trace.categories.Animation);
+                return new android.view.animation.DecelerateInterpolator(1);
+            case enums.AnimationCurve.easeInOut:
+                trace.write("Animation curve resolved to android.view.animation.AccelerateDecelerateInterpolator().", trace.categories.Animation);
+                return new android.view.animation.AccelerateDecelerateInterpolator();
+            case enums.AnimationCurve.linear:
+                trace.write("Animation curve resolved to android.view.animation.LinearInterpolator().", trace.categories.Animation);
+                return new android.view.animation.LinearInterpolator();
+            default:
+                trace.write("Animation curve resolved to original: " + curve, trace.categories.Animation);
+                return curve;
+        }
+    }
+
     private static _getAndroidRepeatCount(iterations: number): number {
         return (iterations === Number.POSITIVE_INFINITY) ? android.view.animation.Animation.INFINITE : iterations - 1;
     }

ui/animation/animation.d.ts

@@ -54,7 +54,8 @@
         iterations?: number;
         
         /**
-         * An optional animation curve of type UIViewAnimationCurve for iOS or android.animation.TimeInterpolator for Android.
+         * An optional animation curve. Possible values are contained in the [AnimationCurve enumeration](../enums/AnimationCurve/README.md).
+         * Alternatively, you can pass an instance of type UIViewAnimationCurve for iOS or android.animation.TimeInterpolator for Android.
          */
         curve?: any;
     }
@@ -75,5 +76,8 @@
         public play: () => Promise<void>;
         public cancel: () => void;
         public isPlaying: boolean;
+        //@private
+        _resolveAnimationCurve(curve: any): any
+        //@endprivate
     }
 }

ui/animation/animation.ios.ts

@@ -2,6 +2,7 @@
 import common = require("./animation-common");
 import viewModule = require("ui/core/view");
 import trace = require("trace");
+import enums = require("ui/enums");
 
 global.moduleMerge(common, exports);
 
@@ -143,6 +144,26 @@ export class Animation extends common.Animation implements definition.Animation
         this._iOSAnimationFunction = Animation._createiOSAnimationFunction(this._mergedPropertyAnimations, 0, this._playSequentially, animationFinishedCallback);
     }
 
+    _resolveAnimationCurve(curve: any): any {
+        switch (curve) {
+            case enums.AnimationCurve.easeIn:
+                trace.write("Animation curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseIn.", trace.categories.Animation);
+                return UIViewAnimationCurve.UIViewAnimationCurveEaseIn;
+            case enums.AnimationCurve.easeOut:
+                trace.write("Animation curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseOut.", trace.categories.Animation);
+                return UIViewAnimationCurve.UIViewAnimationCurveEaseOut;
+            case enums.AnimationCurve.easeInOut:
+                trace.write("Animation curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseInOut.", trace.categories.Animation);
+                return UIViewAnimationCurve.UIViewAnimationCurveEaseInOut;
+            case enums.AnimationCurve.linear:
+                trace.write("Animation curve resolved to UIViewAnimationCurve.UIViewAnimationCurveLinear.", trace.categories.Animation);
+                return UIViewAnimationCurve.UIViewAnimationCurveLinear;
+            default:
+                trace.write("Animation curve resolved to original: " + curve, trace.categories.Animation);
+                return curve;
+        }
+    }
+
     private static _createiOSAnimationFunction(propertyAnimations: Array<common.PropertyAnimation>, index: number, playSequentially: boolean, finishedCallback: (cancelled?: boolean) => void): Function {
         return (cancelled?: boolean) => {
             if (cancelled && finishedCallback) {

ui/enums/enums.d.ts

@@ -492,4 +492,29 @@
          */
         export var right: string;
     }
+
+    /**
+     * Represents an animation curve type.
+     */
+    module AnimationCurve {
+        /**
+         * An ease-in curve causes the animation to begin slowly, and then speed up as it progresses.
+         */
+        export var easeIn: string;
+
+        /**
+         * An ease-out curve causes the animation to begin quickly, and then slow down as it completes.
+         */
+        export var easeOut: string;
+
+        /**
+         * An ease-in ease-out curve causes the animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing.
+         */
+        export var easeInOut: string;
+        
+        /**
+         * A linear animation curve causes an animation to occur evenly over its duration.
+         */
+        export var linear: string;
+    }
 }

ui/enums/enums.ts

@@ -149,3 +149,10 @@ export module BackgroundRepeat {
     export var repeatY: string = "repeat-y";
     export var noRepeat: string = "no-repeat";
 }
+
+export module AnimationCurve {
+    export var easeIn = "easeIn";
+    export var easeOut = "easeOut";
+    export var easeInOut = "easeInOut";
+    export var linear = "linear";
+}