fixed issue 1443

ui/animation/animation.ios.ts

@@ -16,30 +16,59 @@ class AnimationDelegateImpl extends NSObject {
         return <AnimationDelegateImpl>super.new();
     }
 
-    private _finishedCallback: Function;
+    public nextAnimation: Function;
 
-    public initWithFinishedCallback(finishedCallback: Function): AnimationDelegateImpl {
+    private _finishedCallback: Function;
+    private _propertyAnimation: common.PropertyAnimation;
+
+    public initWithFinishedCallback(finishedCallback: Function, propertyAnimation: common.PropertyAnimation): AnimationDelegateImpl {
         this._finishedCallback = finishedCallback;
+        this._propertyAnimation = propertyAnimation;
         return this;
     }
 
-    public animationWillStart(animationID: string, context: any): void {
+    animationDidStart(anim: CAAnimation): void {
-        trace.write("AnimationDelegateImpl.animationWillStart, animationID: " + animationID, trace.categories.Animation);
+       var nativeView = <UIView>this._propertyAnimation.target._nativeView;
+       var propertyNameToAnimate = this._propertyAnimation.property;
+       var value = this._propertyAnimation.value;
+       switch (this._propertyAnimation.property) {
+           case common.Properties.backgroundColor:
+               this._propertyAnimation.target.backgroundColor = value;
+               break;
+           case common.Properties.opacity:
+               this._propertyAnimation.target.opacity = value;
+               break;
+           case common.Properties.rotate:
+               this._propertyAnimation.target.rotate = value;
+               break;
+           case _transform:
+               if (value[common.Properties.translate] !== undefined) {
+                  this._propertyAnimation.target.translateX = value[common.Properties.translate].x;
+                  this._propertyAnimation.target.translateY = value[common.Properties.translate].y;
+               }
+               if (value[common.Properties.scale] !== undefined) {
+                  this._propertyAnimation.target.scaleX = value[common.Properties.scale].x;
+                  this._propertyAnimation.target.scaleY = value[common.Properties.scale].y;
+               }
+               break;
+        }
    }
 
-    public animationDidStop(animationID: string, finished: boolean, context: any): void {
+    public animationDidStopFinished(anim: CAAnimation, flag: boolean): void {
-        trace.write("AnimationDelegateImpl.animationDidStop, animationID: " + animationID + ", finished: " + finished, trace.categories.Animation);
         if (this._finishedCallback) {
-            var cancelled = !finished;
+            var cancelled = !flag;
             // This could either be the master finishedCallback or an nextAnimationCallback depending on the playSequentially argument values.
             this._finishedCallback(cancelled);
         }
+        if (!flag) {
+            if ((<any>this._propertyAnimation)._propertyResetCallback) {
+               (<any>this._propertyAnimation)._propertyResetCallback((<any>this._propertyAnimation)._originalValue);
+            }
+        }
+        if (flag && this.nextAnimation) {
+            this.nextAnimation();
+        }
     }
-
-    public static ObjCExposedMethods = {
-        "animationWillStart": { returns: interop.types.void, params: [NSString, NSObject] },
-        "animationDidStop": { returns: interop.types.void, params: [NSString, NSNumber, NSObject] }
-    };
 }
 
 export class Animation extends common.Animation implements definition.Animation {
@@ -65,9 +94,6 @@ export class Animation extends common.Animation implements definition.Animation
         var length = this._mergedPropertyAnimations.length;
         for (; i < length; i++) {
             (<UIView>this._mergedPropertyAnimations[i].target._nativeView).layer.removeAllAnimations();
-            if ((<any>this._mergedPropertyAnimations[i])._propertyResetCallback) {
-                (<any>this._mergedPropertyAnimations[i])._propertyResetCallback();
-            }
         }
     }
 
@@ -104,67 +130,30 @@ export class Animation extends common.Animation implements definition.Animation
                 }
                 else if (that._finishedAnimations === that._mergedPropertyAnimations.length) {
                     trace.write(that._finishedAnimations + " animations finished.", trace.categories.Animation);
-
-                    // Update our properties on the view.
-                    // This should not change the native transform which is already updated by the animation itself.
-                    var i;
-                    var len = that._propertyAnimations.length;
-                    var a: common.PropertyAnimation;
-                    for (i = 0; i < len; i++) {
-                        a = that._propertyAnimations[i];
-                        switch (a.property) {
-                            case common.Properties.translate:
-                                a.target.translateX = a.value.x;
-                                a.target.translateY = a.value.y;
-                                break;
-                            case common.Properties.rotate:
-                                a.target.rotate = a.value;
-                                break;
-                            case common.Properties.scale:
-                                a.target.scaleX = a.value.x;
-                                a.target.scaleY = a.value.y;
-                                break;
-                        }
-                    }
-
-                    // Validate that the properties of our view are aligned with the native transform matrix.
-                    for (i = 0; i < len; i++) {
-                        a = that._propertyAnimations[i];
-                        var errorMessage = _getTransformMismatchErrorMessage(a.target);
-                        if (errorMessage) {
-                            throw new Error(errorMessage);
-                        }
-                    }
-
                     that._resolveAnimationFinishedPromise();
                 }
             }
         };
 
-        this._iOSAnimationFunction = Animation._createiOSAnimationFunction(this._mergedPropertyAnimations, 0, this._playSequentially, animationFinishedCallback);
+        this._iOSAnimationFunction = Animation._createiOSAnimationFunction(this._mergedPropertyAnimations, 0, this._playSequentially, animationFinishedCallback, this);
     }
 
     _resolveAnimationCurve(curve: any): any {
         switch (curve) {
             case enums.AnimationCurve.easeIn:
-                trace.write("Animation curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseIn.", trace.categories.Animation);
+                return CAMediaTimingFunction.functionWithName(kCAMediaTimingFunctionEaseIn);
-                return UIViewAnimationCurve.UIViewAnimationCurveEaseIn;
             case enums.AnimationCurve.easeOut:
-                trace.write("Animation curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseOut.", trace.categories.Animation);
+                return CAMediaTimingFunction.functionWithName(kCAMediaTimingFunctionEaseOut);
-                return UIViewAnimationCurve.UIViewAnimationCurveEaseOut;
             case enums.AnimationCurve.easeInOut:
-                trace.write("Animation curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseInOut.", trace.categories.Animation);
+                return CAMediaTimingFunction.functionWithName(kCAMediaTimingFunctionEaseInEaseOut);
-                return UIViewAnimationCurve.UIViewAnimationCurveEaseInOut;
             case enums.AnimationCurve.linear:
-                trace.write("Animation curve resolved to UIViewAnimationCurve.UIViewAnimationCurveLinear.", trace.categories.Animation);
+                return CAMediaTimingFunction.functionWithName(kCAMediaTimingFunctionLinear);
-                return UIViewAnimationCurve.UIViewAnimationCurveLinear;
             default:
-                trace.write("Animation curve resolved to original: " + curve, trace.categories.Animation);
+                return undefined;
-                return curve;
         }
     }
 
-    private static _createiOSAnimationFunction(propertyAnimations: Array<common.PropertyAnimation>, index: number, playSequentially: boolean, finishedCallback: (cancelled?: boolean) => void): Function {
+    private static _createiOSAnimationFunction(propertyAnimations: Array<common.PropertyAnimation>, index: number, playSequentially: boolean, finishedCallback: (cancelled?: boolean) => void, that:Animation): Function {
         return (cancelled?: boolean) => {
             if (cancelled && finishedCallback) {
                 trace.write("Animation " + (index - 1).toString() + " was cancelled. Will skip the rest of animations and call finishedCallback(true).", trace.categories.Animation);
@@ -173,121 +162,120 @@ export class Animation extends common.Animation implements definition.Animation
             }
 
            var animation = propertyAnimations[index];
-            var nativeView = (<UIView>animation.target._nativeView);
+           var nativeView = <UIView>animation.target._nativeView;
-
+           var propertyNameToAnimate = animation.property;
-            var nextAnimationCallback: Function;
+           var value = animation.value;
-            var animationDelegate: AnimationDelegateImpl;
-            if (index === propertyAnimations.length - 1) {
-                // This is the last animation, so tell it to call the master finishedCallback when done.
-                animationDelegate = AnimationDelegateImpl.new().initWithFinishedCallback(finishedCallback);
-            }
-            else {
-                nextAnimationCallback = Animation._createiOSAnimationFunction(propertyAnimations, index + 1, playSequentially, finishedCallback);
-                // If animations are to be played sequentially, tell it to start the next animation when done. 
-                // If played together, all individual animations will call the master finishedCallback, which increments a counter every time it is called.
-                animationDelegate = AnimationDelegateImpl.new().initWithFinishedCallback(playSequentially ? nextAnimationCallback : finishedCallback);
-            }
-
-            trace.write("UIView.beginAnimationsContext(" + index + "): " + common.Animation._getAnimationInfo(animation), trace.categories.Animation);
-
-            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);
-                        }
-
            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)._originalValue = animation.target.backgroundColor;
-                                (<any>animation)._propertyResetCallback = () => { animation.target.backgroundColor = originalValue };
+                   (<any>animation)._propertyResetCallback = (value) => { animation.target.backgroundColor = value };
-                                animation.target.backgroundColor = animation.value;
+                   originalValue = nativeView.layer.backgroundColor.CGColor;
+                   value = value.CGColor;
+                   break;
+               case common.Properties.opacity:
+                   (<any>animation)._originalValue = animation.target.opacity;
+                   (<any>animation)._propertyResetCallback = (value) => { animation.target.opacity = value };
+                   originalValue = nativeView.layer.opacity;
+                   break;
+               case common.Properties.rotate:
+                   (<any>animation)._originalValue = animation.target.rotate;
+                   (<any>animation)._propertyResetCallback = (value) => { animation.target.rotate = value };
+                   propertyNameToAnimate = "transform.rotation";
+                   originalValue = animation.target.rotate * Math.PI / 180;
+                   value = value * Math.PI / 180;
+                   break;
+               case common.Properties.translate:
+                   (<any>animation)._originalValue = { x:animation.target.translateX, y:animation.target.translateY };
+                   (<any>animation)._propertyResetCallback = (value) => { animation.target.translateX = value.x; animation.target.translateY = value.y; };
+                   propertyNameToAnimate = "transform"
+                   originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
+                   value = NSValue.valueWithCATransform3D(CATransform3DTranslate(nativeView.layer.transform, value.x, value.y, 0));
+                   break;
+               case common.Properties.scale:
+                   (<any>animation)._originalValue = { x:animation.target.scaleX, y:animation.target.scaleY };
+                   (<any>animation)._propertyResetCallback = (value) => { animation.target.scaleX = value.x; animation.target.scaleY = value.y; };
+                   propertyNameToAnimate = "transform"
+                   originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
+                   value = NSValue.valueWithCATransform3D(CATransform3DScale(nativeView.layer.transform, value.x, value.y, 1));
                    break;
                case _transform:
-                                originalValue = nativeView.transform;
+                   originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
-                                (<any>animation)._propertyResetCallback = () => { nativeView.transform = originalValue };
+                   (<any>animation)._originalValue = { xs:animation.target.scaleX, ys:animation.target.scaleY,
-                                nativeView.transform = Animation._createNativeAffineTransform(animation);
+                                                       xt:animation.target.translateX, yt:animation.target.translateY };
+                   (<any>animation)._propertyResetCallback = (value) => {
+                        animation.target.translateX = value.xt;
+                        animation.target.translateY = value.yt;
+                        animation.target.scaleX = value.xs;
+                        animation.target.scaleY = value.ys;
+                   };
+                   propertyNameToAnimate = "transform"
+                   value = NSValue.valueWithCATransform3D(Animation._createNativeAffineTransform(animation));
                    break;
                default:
                    throw new Error("Cannot animate " + animation.property);
-                                break;
            }
-                    })
-                },
-                null
-            );
 
-            trace.write("UIView.commitAnimations " + index, trace.categories.Animation);
+           var nativeAnimation = CABasicAnimation.animationWithKeyPath(propertyNameToAnimate);
+           nativeAnimation.fromValue = originalValue;
+           nativeAnimation.toValue =  value;
+           if (animation.duration !== undefined) {
+               nativeAnimation.duration = animation.duration / 1000.0;
+           }
+           else {
+               nativeAnimation.duration = 0.3;
+           };
+           if (animation.delay !== undefined) {
+               nativeAnimation.beginTime = CACurrentMediaTime() + (animation.delay / 1000.0);
+           }
 
-            if (!playSequentially && nextAnimationCallback) {
+           if (animation.iterations !== undefined) {
-                nextAnimationCallback();
+               if (animation.iterations === Number.POSITIVE_INFINITY) {
+                   nativeAnimation.repeatCount = FLT_MAX;
+               }
+               else {
+                   nativeAnimation.repeatCount = animation.iterations - 1;
+               }
+           }
+           if (animation.curve !== undefined) {
+               trace.write("The animation curve is " + animation.curve, trace.categories.Animation);
+               nativeAnimation.timingFunction = animation.curve;
+           }
+
+           var animationDelegate: AnimationDelegateImpl = AnimationDelegateImpl.new().initWithFinishedCallback(finishedCallback, animation);
+           nativeAnimation.setValueForKey(animationDelegate, "delegate");
+
+           nativeView.layer.addAnimationForKey(nativeAnimation, null);
+
+           var callback = undefined;
+           if (index+1 < propertyAnimations.length) {
+              callback = Animation._createiOSAnimationFunction(propertyAnimations, index+1, playSequentially, finishedCallback, that);
+              if (!playSequentially) {
+                   callback();
+              }
+              else {
+                  animationDelegate.nextAnimation = callback;
+              }
             }
         }
     }
 
-    private static _createNativeAffineTransform(animation: common.PropertyAnimation): CGAffineTransform {
+    private static _createNativeAffineTransform(animation: common.PropertyAnimation): CATransform3D {
-        var view = animation.target;
         var value = animation.value;
-
+        var nativeView = <UIView>animation.target._nativeView;
-        trace.write("Creating native affine transform. Curent transform is: " + NSStringFromCGAffineTransform(view._nativeView.transform), trace.categories.Animation);
+        var result:CATransform3D = CATransform3DIdentity;
-        
-        // Order is important: translate, rotate, scale
-        var result: CGAffineTransform = CGAffineTransformIdentity;
-        trace.write("Identity: " + NSStringFromCGAffineTransform(result), trace.categories.Animation);
 
         if (value[common.Properties.translate] !== undefined) {
-            result = CGAffineTransformTranslate(result, value[common.Properties.translate].x, value[common.Properties.translate].y);
+            var x = value[common.Properties.translate].x;
+            var y = value[common.Properties.translate].y;
+            result = CATransform3DTranslate(result, x, y, 0);
         }
-        else {
-            result = CGAffineTransformTranslate(result, view.translateX, view.translateY);
-        }
-        trace.write("After translate: " + NSStringFromCGAffineTransform(result), trace.categories.Animation);
-
-        if (value[common.Properties.rotate] !== undefined) {
-            result = CGAffineTransformRotate(result, value[common.Properties.rotate] * Math.PI / 180);
-        }
-        else {
-            result = CGAffineTransformRotate(result, view.rotate * Math.PI / 180);
-        }
-        trace.write("After rotate: " + NSStringFromCGAffineTransform(result), trace.categories.Animation);
 
         if (value[common.Properties.scale] !== undefined) {
-            result = CGAffineTransformScale(result, value[common.Properties.scale].x, value[common.Properties.scale].y);
+            var x = value[common.Properties.scale].x;
+            var y = value[common.Properties.scale].y;
+            result = CATransform3DScale(result, x, y, 1);
         }
-        else {
-            result = CGAffineTransformScale(result, view.scaleX, view.scaleY);
-        }
-        trace.write("After scale: " + NSStringFromCGAffineTransform(result), trace.categories.Animation);
 
         return result;
     }
@@ -295,7 +283,6 @@ export class Animation extends common.Animation implements definition.Animation
     private static _isAffineTransform(property: string): boolean {
         return property === _transform
             || property === common.Properties.translate
-            || property === common.Properties.rotate
             || property === common.Properties.scale;
     }
 
@@ -361,24 +348,6 @@ export class Animation extends common.Animation implements definition.Animation
                 result.push(newTransformAnimation);
             }
         }
-
         return result;
     }
-
-}
-
-export function _getTransformMismatchErrorMessage(view: viewModule.View): string {
-    // Order is important: translate, rotate, scale
-    var result: CGAffineTransform = CGAffineTransformIdentity;
-    result = CGAffineTransformTranslate(result, view.translateX, view.translateY);
-    result = CGAffineTransformRotate(result, view.rotate * Math.PI / 180);
-    result = CGAffineTransformScale(result, view.scaleX, view.scaleY);
-    var viewTransform = NSStringFromCGAffineTransform(result);
-    var nativeTransform = NSStringFromCGAffineTransform(view._nativeView.transform);
-
-    if (viewTransform !== nativeTransform) {
-        return "View and Native transforms do not match. View: " + viewTransform + "; Native: " + nativeTransform;
-    }
-
-    return undefined;
 }