feat(LayoutAnimation): Adds scaleXY support for LayoutAnimation

Previously, only update and opacity animations were supported in LayoutAnimation. This change uses ScaleTransform to support scaleXY LayoutAnimation.

Fixes #217

ReactWindows/ReactNative.Shared/UIManager/LayoutAnimation/BaseLayoutAnimation.cs

@@ -2,6 +2,7 @@
 using System.Reactive;
 #if WINDOWS_UWP
 using Windows.UI.Xaml;
+using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Media.Animation;
 #else
 using System.Windows;
@@ -40,9 +41,6 @@ protected override bool IsValid
         /// <param name="dimensions">The view dimensions.</param>
         protected override IObservable<Unit> CreateAnimationCore(FrameworkElement view, Dimensions dimensions)
         {
-            var fromValue = IsReverse ? 1.0 : 0.0;
-            var toValue = IsReverse ? 0.0 : 1.0;
-
             var animatedProperty = AnimatedProperty;
             if (animatedProperty.HasValue)
             {
@@ -51,13 +49,33 @@ protected override IObservable<Unit> CreateAnimationCore(FrameworkElement view,
                 switch (animatedProperty.Value)
                 {
                     case AnimatedPropertyType.Opacity:
-                        view.Opacity = fromValue;
-                        storyboard.Children.Add(CreateOpacityAnimation(view, fromValue, toValue));
-                        @finally = () => view.Opacity = toValue;
+                        var opacity = view.Opacity;
+                        var fromOpacity = IsReverse ? opacity : 0.0;
+                        var toOpacity = IsReverse ? 0.0 : opacity;
+                        view.Opacity = fromOpacity;
+                        storyboard.Children.Add(CreateOpacityAnimation(view, fromOpacity, toOpacity));
+                        @finally = () => view.Opacity = toOpacity;
                         break;
                     case AnimatedPropertyType.ScaleXY:
-                        // TODO: implement this layout animation option
-                        throw new NotImplementedException();
+                        var fromScale = IsReverse ? 1.0 : 0.0;
+                        var toScale = IsReverse ? 0.0 : 1.0;
+                        var scaleTransform = new ScaleTransform
+                        {
+                            CenterX = dimensions.X + dimensions.Width / 2,
+                            CenterY = dimensions.Y + dimensions.Height / 2,
+                            ScaleX = fromScale,
+                            ScaleY = fromScale,
+                        };
+
+                        var originalTransform = view.RenderTransform;
+                        var transformGroup = new TransformGroup();
+                        transformGroup.Children.Add(originalTransform);
+                        transformGroup.Children.Add(scaleTransform);
+                        view.RenderTransform = transformGroup;
+                        storyboard.Children.Add(CreateScaleXAnimation(scaleTransform, fromScale, toScale));
+                        storyboard.Children.Add(CreateScaleYAnimation(scaleTransform, fromScale, toScale));
+                        @finally = () => view.RenderTransform = originalTransform;
+                        break;
                     default:
                         throw new InvalidOperationException(
                             "Missing animation for property: " + animatedProperty.Value);
@@ -90,5 +108,47 @@ private Timeline CreateOpacityAnimation(FrameworkElement view, double from, doub
 
             return timeline;
         }
+
+        private Timeline CreateScaleXAnimation(ScaleTransform transform, double from, double to)
+        {
+            var timeline = new DoubleAnimation
+            {
+                From = from,
+                To = to,
+                EasingFunction = Interpolator,
+                Duration = Duration,
+                BeginTime = Delay,
+            };
+
+            Storyboard.SetTarget(timeline, transform);
+#if WINDOWS_UWP
+            Storyboard.SetTargetProperty(timeline, "ScaleX");
+#else
+            Storyboard.SetTargetProperty(timeline, new PropertyPath("Opacity"));
+#endif
+
+            return timeline;
+        }
+
+        private Timeline CreateScaleYAnimation(ScaleTransform transform, double from, double to)
+        {
+            var timeline = new DoubleAnimation
+            {
+                From = from,
+                To = to,
+                EasingFunction = Interpolator,
+                Duration = Duration,
+                BeginTime = Delay,
+            };
+
+            Storyboard.SetTarget(timeline, transform);
+#if WINDOWS_UWP
+            Storyboard.SetTargetProperty(timeline, "ScaleY");
+#else
+            Storyboard.SetTargetProperty(timeline, new PropertyPath("Opacity"));
+#endif
+
+            return timeline;
+        }
     }
 }