From 46921d53f6e592379d755670e564de500e6d5528 Mon Sep 17 00:00:00 2001
From: Panayot Cankov <Panayot.Cankov@telerik.com>
Date: Wed, 14 Oct 2015 16:39:23 +0300
Subject: [PATCH 1/2] Move from begin/commit animation blocks to keyframe
 animations, they handle continuation from the current state. There is a new
 "Sequence" animation in the "animations" app that displays a sequence of
 animations that used to be buggy in iOS (the animated object was jumping
 around) but should now display a nice continuos animation. The problem that
 has been fixed appeared only when multiple properties that affect transform
 are animated: rotate + translate or scale + translate.

---
 apps/animations/main-page.ts  |  71 +++++++++++++++++++++++
 apps/animations/main-page.xml |  35 +++++++-----
 tsconfig.json                 |   3 +
 ui/animation/animation.ios.ts | 102 ++++++++++++++++++----------------
 4 files changed, 148 insertions(+), 63 deletions(-)

diff --git a/apps/animations/main-page.ts b/apps/animations/main-page.ts
index c1773befd..7fc833370 100644
--- a/apps/animations/main-page.ts
+++ b/apps/animations/main-page.ts
@@ -90,4 +90,75 @@ export function onSingle(args: observable.EventData) {
     })
         .then(() => console.log("Animation finished"))
         .catch((e) => console.log(e.message));
+}
+
+export function onSequence(args: observable.EventData) {
+    console.log("onSequence");
+    
+    button3.animate({
+        translate: { x: 80, y: 40 },
+        scale: { x: 0.9, y: 0.3 },
+        rotate: 25,
+        duration: 1000
+    })
+    .then(() => button3.animate({
+        translate: { x: 0, y: 80 },
+        scale: { x: 0.5, y: 0.5 },
+        rotate: -25,
+        duration: 1000
+    }))
+    .then(() => button3.animate({
+        translate: { x: -80, y: 40 },
+        scale: { x: 0.5, y: 0.9 },
+        rotate: 45,
+        duration: 1000
+    }))
+    .then(() => button3.animate({
+        translate: { x: 0, y: 0 },
+        scale: { x: 1, y: 1 },
+        rotate: 0,
+        duration: 1000
+    }))
+    .then(() => console.log("Animation finished"))
+    .catch((e) => console.log(e.message));
+}
+
+export function onInterrupted(args: observable.EventData) {
+    console.log("onInterrupt");
+    
+    setTimeout(() => {
+        button3.animate({
+            translate: { x: 80, y: 40 },
+            scale: { x: 0.9, y: 0.3 },
+            rotate: 25,
+            duration: 1000
+        });    
+    }, 700 * 0);
+    
+    setTimeout(function() {
+        button3.animate({
+            translate: { x: 0, y: 80 },
+            scale: { x: 0.5, y: 0.5 },
+            rotate: -25,
+            duration: 1000
+        })
+    }, 700 * 1);
+    
+    setTimeout(function() {
+        button3.animate({
+            translate: { x: -80, y: 40 },
+            scale: { x: 0.5, y: 0.9 },
+            rotate: 45,
+            duration: 1000
+        })
+    }, 700 * 2);
+    
+    setTimeout(function() {
+        button3.animate({
+            translate: { x: 0, y: 0 },
+            scale: { x: 1, y: 1 },
+            rotate: 0,
+            duration: 1000
+        })
+    }, 700 * 3);
 }
\ No newline at end of file
diff --git a/apps/animations/main-page.xml b/apps/animations/main-page.xml
index 8a132ce87..33e9da7e2 100644
--- a/apps/animations/main-page.xml
+++ b/apps/animations/main-page.xml
@@ -2,29 +2,34 @@
   <StackLayout orientation="vertical">
     <StackLayout orientation="vertical" backgroundColor="LightGray" paddingTop="5" paddingBottom="5">
       
-      <Label text="{{ duration, 'Duration: ' + duration + ' ms' }}" width="180" marginTop="5" marginBottom="5"/>
-      <Slider minValue="0" maxValue="10000" value="{{ duration }}" marginTop="5" marginBottom="5" marginLeft="10" marginRight="10"/>
+      <Label text="{{ duration, 'Duration: ' + duration + ' ms' }}" width="180" />
+      <Slider minValue="0" maxValue="10000" value="{{ duration }}" margin="0 15" />
 
-      <Label text="{{ iterations, 'Iterations: ' + iterations + ' times' }}" width="180" marginTop="5" marginBottom="5"/>
-      <Slider minValue="0" maxValue="10" value="{{ iterations }}" marginTop="5" marginBottom="5" marginLeft="10" marginRight="10"/>
+      <Label text="{{ iterations, 'Iterations: ' + iterations + ' times' }}" width="180" />
+      <Slider minValue="0" maxValue="10" value="{{ iterations }}" margin="0 15" />
 
-      <StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center">
+      <StackLayout orientation="horizontal" horizontalAlignment="center">
         <Label text="Play Sequentially?"/>
         <Switch marginLeft="10" checked="{{ playSequentially }}"/>
       </StackLayout>
-
+      
       <StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">
-        <Button text="Out" tap="onSlideOut" width="75" marginLeft="5" marginRight="5" />
-        <Button text="In" tap="onSlideIn" width="75" marginLeft="5" marginRight="5" />
-        <Button text="Single" tap="onSingle" width="75" marginLeft="5" marginRight="5" />
-        <Button text="Cancel" tap="onCancel" width="75" marginLeft="5" marginRight="5" />
+        <Button text="Out" tap="onSlideOut" width="40" marginLeft="5" marginRight="5" />
+        <Button text="In" tap="onSlideIn" width="40" marginLeft="5" marginRight="5" />
+        <Button text="Single" tap="onSingle" width="70" marginLeft="5" marginRight="5" />
+        <Button text="Cancel" tap="onCancel" width="70" marginLeft="5" marginRight="5" />
       </StackLayout>
-
+      
+      <StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">>
+        <Button text="Sequence" width="80" marginLeft="5" marginRight="5" tap="onSequence" />
+        <Button text="Interrupted" width="80" marginLeft="5" marginRight="5" tap="onInterrupted" />
+      </StackLayout>
+      
     </StackLayout>
     <AbsoluteLayout id="panel1" backgroundColor="Yellow" width="300" height="190" clipToBounds="true" marginTop="10">
-      <Button id="button1" text="Button 1" backgroundColor="White" width="180" height="50" left="60" top="10" tap="onTap"/>
-      <Button id="button2" text="Button 2" backgroundColor="White" width="180" height="50" left="60" top="70" tap="onTap"/>
-      <Button id="button3" text="Button 3" backgroundColor="White" width="180" height="50" left="60" top="130" tap="onTap"/>
+      <Button id="button1" text="Button 1" backgroundColor="White" width="180" height="50" left="60" top="10" tap="onTap" borderWidth="1" borderColor="red" />
+      <Button id="button2" text="Button 2" backgroundColor="White" width="180" height="50" left="60" top="70" tap="onTap" borderWidth="1" borderColor="red" />
+      <Button id="button3" text="Button 3" backgroundColor="White" width="180" height="50" left="60" top="130" tap="onTap" borderWidth="1" borderColor="red" />
     </AbsoluteLayout>
   </StackLayout>
-</Page>
\ No newline at end of file
+</Page> 
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 27cdead8f..de73a200c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -336,6 +336,9 @@
         "./timer/timer.ios.ts",
         "./trace/trace.d.ts",
         "./trace/trace.ts",
+        "./ui/animation/animation-common.ts",
+        "./ui/animation/animation.android.ts",
+        "./ui/animation/animation.ios.ts",
         "./ui/activity-indicator/activity-indicator-common.ts",
         "./ui/activity-indicator/activity-indicator.android.ts",
         "./ui/activity-indicator/activity-indicator.d.ts",
diff --git a/ui/animation/animation.ios.ts b/ui/animation/animation.ios.ts
index 4d79f8d5c..9ffb1cca9 100644
--- a/ui/animation/animation.ios.ts
+++ b/ui/animation/animation.ios.ts
@@ -168,59 +168,65 @@ export class Animation extends common.Animation implements definition.Animation
             }
 
             trace.write("UIView.beginAnimationsContext(" + index + "): " + common.Animation._getAnimationInfo(animation), trace.categories.Animation);
-            UIView.beginAnimationsContext(index.toString(), null);
 
-            if (animationDelegate) {
-                UIView.setAnimationDelegate(animationDelegate);
-                UIView.setAnimationWillStartSelector("animationWillStart");
-                UIView.setAnimationDidStopSelector("animationDidStop");
-            }
+            UIView.animateKeyframesWithDurationDelayOptionsAnimationsCompletion(1, 0,
+                UIViewKeyframeAnimationOptions.UIViewKeyframeAnimationOptionBeginFromCurrentState,
+                () => {
+                    UIView.addKeyframeWithRelativeStartTimeRelativeDurationAnimations(0, 1, () => {
+                        if (animationDelegate) {
+                            UIView.setAnimationDelegate(animationDelegate);
+                            UIView.setAnimationWillStartSelector("animationWillStart");
+                            UIView.setAnimationDidStopSelector("animationDidStop");
+                        }
 
-            if (animation.duration !== undefined) {
-                UIView.setAnimationDuration(animation.duration / 1000.0);
-            }
-            else {
-                UIView.setAnimationDuration(0.3); //Default duration.
-            }
-            if (animation.delay !== undefined) {
-                UIView.setAnimationDelay(animation.delay / 1000.0);
-            }
-            if (animation.iterations !== undefined) {
-                if (animation.iterations === Number.POSITIVE_INFINITY) {
-                    UIView.setAnimationRepeatCount(FLT_MAX);
-                }
-                else {
-                    UIView.setAnimationRepeatCount(animation.iterations - 1);
-                }
-            }
-            if (animation.curve !== undefined) {
-                UIView.setAnimationCurve(animation.curve);
-            }
+                        if (animation.duration !== undefined) {
+                            UIView.setAnimationDuration(animation.duration / 1000.0);
+                        }
+                        else {
+                            UIView.setAnimationDuration(0.3); //Default duration.
+                        }
+                        if (animation.delay !== undefined) {
+                            UIView.setAnimationDelay(animation.delay / 1000.0);
+                        }
+                        if (animation.iterations !== undefined) {
+                            if (animation.iterations === Number.POSITIVE_INFINITY) {
+                                UIView.setAnimationRepeatCount(FLT_MAX);
+                            }
+                            else {
+                                UIView.setAnimationRepeatCount(animation.iterations - 1);
+                            }
+                        }
+                        if (animation.curve !== undefined) {
+                            UIView.setAnimationCurve(animation.curve);
+                        }
 
-            var originalValue;
-            switch (animation.property) {
-                case common.Properties.opacity:
-                    originalValue = animation.target.opacity;
-                    (<any>animation)._propertyResetCallback = () => { animation.target.opacity = originalValue };
-                    animation.target.opacity = animation.value;
-                    break;
-                case common.Properties.backgroundColor:
-                    originalValue = animation.target.backgroundColor;
-                    (<any>animation)._propertyResetCallback = () => { animation.target.backgroundColor = originalValue };
-                    animation.target.backgroundColor = animation.value;
-                    break;
-                case _transform:
-                    originalValue = nativeView.transform;
-                    (<any>animation)._propertyResetCallback = () => { nativeView.transform = originalValue };
-                    nativeView.transform = Animation._createNativeAffineTransform(animation);
-                    break;
-                default:
-                    throw new Error("Cannot animate " + animation.property);
-                    break;
-            }
+                        var originalValue;
+                        switch (animation.property) {
+                            case common.Properties.opacity:
+                                originalValue = animation.target.opacity;
+                                (<any>animation)._propertyResetCallback = () => { animation.target.opacity = originalValue };
+                                animation.target.opacity = animation.value;
+                                break;
+                            case common.Properties.backgroundColor:
+                                originalValue = animation.target.backgroundColor;
+                                (<any>animation)._propertyResetCallback = () => { animation.target.backgroundColor = originalValue };
+                                animation.target.backgroundColor = animation.value;
+                                break;
+                            case _transform:
+                                originalValue = nativeView.transform;
+                                (<any>animation)._propertyResetCallback = () => { nativeView.transform = originalValue };
+                                nativeView.transform = Animation._createNativeAffineTransform(animation);
+                                break;
+                            default:
+                                throw new Error("Cannot animate " + animation.property);
+                                break;
+                        }
+                    })
+                },
+                null
+            );
 
             trace.write("UIView.commitAnimations " + index, trace.categories.Animation);
-            UIView.commitAnimations();
 
             if (!playSequentially && nextAnimationCallback) {
                 nextAnimationCallback();

From 9757bc5ccb3abd11e75863393a45dcb98664685b Mon Sep 17 00:00:00 2001
From: Panayot Cankov <Panayot.Cankov@telerik.com>
Date: Fri, 16 Oct 2015 11:48:11 +0300
Subject: [PATCH 2/2] Animations example was clipped in android

---
 apps/animations/main-page.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/animations/main-page.ts b/apps/animations/main-page.ts
index 7fc833370..7cbe555b8 100644
--- a/apps/animations/main-page.ts
+++ b/apps/animations/main-page.ts
@@ -96,19 +96,19 @@ export function onSequence(args: observable.EventData) {
     console.log("onSequence");
     
     button3.animate({
-        translate: { x: 80, y: 40 },
+        translate: { x: 80, y: -40 },
         scale: { x: 0.9, y: 0.3 },
         rotate: 25,
         duration: 1000
     })
     .then(() => button3.animate({
-        translate: { x: 0, y: 80 },
+        translate: { x: 0, y: -80 },
         scale: { x: 0.5, y: 0.5 },
         rotate: -25,
         duration: 1000
     }))
     .then(() => button3.animate({
-        translate: { x: -80, y: 40 },
+        translate: { x: -80, y: -40 },
         scale: { x: 0.5, y: 0.9 },
         rotate: 45,
         duration: 1000
@@ -128,7 +128,7 @@ export function onInterrupted(args: observable.EventData) {
     
     setTimeout(() => {
         button3.animate({
-            translate: { x: 80, y: 40 },
+            translate: { x: 80, y: -40 },
             scale: { x: 0.9, y: 0.3 },
             rotate: 25,
             duration: 1000
@@ -137,7 +137,7 @@ export function onInterrupted(args: observable.EventData) {
     
     setTimeout(function() {
         button3.animate({
-            translate: { x: 0, y: 80 },
+            translate: { x: 0, y: -80 },
             scale: { x: 0.5, y: 0.5 },
             rotate: -25,
             duration: 1000
@@ -146,7 +146,7 @@ export function onInterrupted(args: observable.EventData) {
     
     setTimeout(function() {
         button3.animate({
-            translate: { x: -80, y: 40 },
+            translate: { x: -80, y: -40 },
             scale: { x: 0.5, y: 0.9 },
             rotate: 45,
             duration: 1000