This adds the ability to Cancel the Animation via the Promise returned via a play command.

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

@@ -83,21 +83,69 @@ export var test_CancellingAnimation = function (done) {
     // <snippet module="ui/animation" title="animation">
     // # Cancelling animation
     // ``` JavaScript
-    var animation1 = label.createAnimation({ translate: { x: 100, y: 100 } });
+    var animation1 = label.createAnimation({ translate: { x: 100, y: 100}, duration: 500 });
     animation1.play()
         .then(() => {
             ////console.log("Animation finished");
             // <hide>
-            assertIOSNativeTransformIsCorrect(label);
+            throw new Error("Cancelling Animation - Should not be in the Promise Then()");
-            helper.goBack();
-            done();
             // </hide>
         })
         .catch((e) => {
             ////console.log("Animation cancelled");
             // <hide>
             helper.goBack();
-            done();
+            if (!e) {
+                done(new Error("Cancel path did not have proper error"));
+            } else if (e.toString() === "Error: Animation cancelled.") {
+                done()
+            } else {
+                done(e);
+            }
+            // </hide>
+        });
+    animation1.cancel();
+    // ```
+    // </snippet>
+}
+
+export var test_CancellingAnimate = function (done) {
+    var mainPage: pageModule.Page;
+    var label: labelModule.Label;
+    var pageFactory = function (): pageModule.Page {
+        label = new labelModule.Label();
+        label.text = "label";
+        var stackLayout = new stackLayoutModule.StackLayout();
+        stackLayout.addChild(label);
+        mainPage = new pageModule.Page();
+        mainPage.content = stackLayout;
+        return mainPage;
+    };
+
+    helper.navigate(pageFactory);
+    TKUnit.waitUntilReady(() => { return label.isLoaded });
+
+    // <snippet module="ui/animation" title="animation">
+    // # Cancelling animation
+    // ``` JavaScript
+    var animation1 = label.animate({ translate: { x: 100, y: 100 }, duration: 500 })
+        .then(() => {
+            ////console.log("Animation finished");
+            // <hide>
+            throw new Error("Cancelling Animate - Should not be in Promise Then()");
+            // </hide>
+        })
+        .catch((e) => {
+            ////console.log("Animation cancelled");
+            // <hide>
+            helper.goBack();
+            if (!e) {
+                done(new Error("Cancel path did not have proper error"));
+            } else if (e.toString() === "Error: Animation cancelled.") {
+                done()
+            } else {
+                done(e);
+            }
             // </hide>
         });
     animation1.cancel();

ui/animation/animation-common.ts

@@ -42,6 +42,14 @@ export class CubicBezierAnimationCurve implements definition.CubicBezierAnimatio
     }
 }
 
+// This is a BOGUS Class to make TypeScript happy - This is not needed other than to make TS happy.
+// We didn't want to actually modify Promise; as the cancel() is ONLY valid for animations "Promise"
+export class AnimationPromise implements definition.AnimationPromise {
+    public cancel(): void { /* Do Nothing */ }
+    public then(onFulfilled?: (value?: any) => void, onRejected?: (error?: any) => void): AnimationPromise { return new AnimationPromise();}
+    public catch(onRejected?: (error?: any) => void): AnimationPromise { return new AnimationPromise();}
+}
+
 export class Animation implements definition.Animation {
     public _propertyAnimations: Array<PropertyAnimation>;
     public _playSequentially: boolean;
@@ -49,20 +57,44 @@ export class Animation implements definition.Animation {
     private _resolve;
     private _reject;
 
-    public play(): Promise<void> {
+    public play(): AnimationPromise {
         if (this.isPlaying) {
             throw new Error("Animation is already playing.");
         }
 
-        var animationFinishedPromise = new Promise<void>((resolve, reject) => {
+        // We have to actually create a "Promise" due to a bug in the v8 engine and decedent promises
+        // We just cast it to a animationPromise so that all the rest of the code works fine
+        var animationFinishedPromise = <AnimationPromise>new Promise<void>((resolve, reject) => {
             this._resolve = resolve;
             this._reject = reject;
         });
 
+        this.fixupAnimationPromise(animationFinishedPromise);
+
         this._isPlaying = true;
         return animationFinishedPromise;
     }
 
+    private fixupAnimationPromise(promise: AnimationPromise): void {
+        // Since we are using function() below because of arguments, TS won't automatically do a _this for those functions.
+        var _this = this;
+        promise.cancel = () => {
+            _this.cancel();
+        };
+        var _then = promise.then;
+        promise.then = function() {
+            var r = _then.apply(promise, arguments);
+            _this.fixupAnimationPromise(r);
+            return r;
+        };
+        var _catch = promise.catch;
+        promise.catch = function() {
+            var r = _catch.apply(promise, arguments);
+            _this.fixupAnimationPromise(r);
+            return r;
+        };
+    }
+
     public cancel(): void {
         if (!this.isPlaying) {
             throw new Error("Animation is not currently playing.");

ui/animation/animation.android.ts

@@ -31,7 +31,7 @@ export class Animation extends common.Animation implements definition.Animation
     private _propertyUpdateCallbacks: Array<Function>;
     private _propertyResetCallbacks: Array<Function>;
 
-    public play(): Promise<void> {
+    public play(): definition.AnimationPromise {
         var animationFinishedPromise = super.play();
 
         var i: number;

ui/animation/animation.d.ts

@@ -82,12 +82,23 @@
         y: number;
     }
 
+    /**
+     * Create Promise that can cancel the animation, we have to pretend our returns itself along with the cancel
+     */
+    export class AnimationPromise extends Promise<void> {
+        cancel(): void;
+        then(onFulfilled?: (value?: any) => Thenable<void>, onRejected?: (error?: any) => Thenable<void>): AnimationPromise;
+        then(onFulfilled?: (value?: any) => void, onRejected?: (error?: any) => void): AnimationPromise;
+        catch(onRejected?: (error?: any) => Thenable<void>): AnimationPromise;
+        catch(onRejected?: (error?: any) => void): AnimationPromise;
+    }
+
     /**
      * Defines a animation set.
      */
     export class Animation {
         constructor(animationDefinitions: Array<AnimationDefinition>, playSequentially?: boolean);
-        public play: () => Promise<void>;
+        public play: () => AnimationPromise;
         public cancel: () => void;
         public isPlaying: boolean;
     }

ui/animation/animation.ios.ts

@@ -88,7 +88,7 @@ export class Animation extends common.Animation implements definition.Animation
     private _cancelledAnimations: number;
     private _mergedPropertyAnimations: Array<common.PropertyAnimation>;
 
-    public play(): Promise<void> {
+    public play(): definition.AnimationPromise {
         var animationFinishedPromise = super.play();
         this._finishedAnimations = 0;
         this._cancelledAnimations = 0;

ui/core/view-common.ts

@@ -1164,7 +1164,7 @@ export class View extends ProxyObject implements definition.View {
         }
     }
 
-    public animate(animation: any): Promise<void> {
+    public animate(animation: any): animModule.AnimationPromise {
         return this.createAnimation(animation).play();
     }
 

ui/core/view.d.ts

@@ -518,7 +518,7 @@ declare module "ui/core/view" {
         /**
          * Animates one or more properties of the view based on the supplied options. 
          */
-        public animate(options: animation.AnimationDefinition): Promise<void>;
+        public animate(options: animation.AnimationDefinition): animation.AnimationPromise;
         
         /**
          * Creates an Animation object based on the supplied options.