From 08382e5bf554381a327e215b191d901ab4b16663 Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Sat, 15 May 2021 20:52:59 -0400
Subject: [PATCH 1/4] Fix SolidColorBrushAnimator NRE

---
 .../Animation/Animators/SolidColorBrushAnimator.cs     | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/Avalonia.Visuals/Animation/Animators/SolidColorBrushAnimator.cs b/src/Avalonia.Visuals/Animation/Animators/SolidColorBrushAnimator.cs
index cec96fecf8..a56cc1de8c 100644
--- a/src/Avalonia.Visuals/Animation/Animators/SolidColorBrushAnimator.cs
+++ b/src/Avalonia.Visuals/Animation/Animators/SolidColorBrushAnimator.cs
@@ -12,6 +12,11 @@ namespace Avalonia.Animation.Animators
     {
         public override ISolidColorBrush Interpolate(double progress, ISolidColorBrush oldValue, ISolidColorBrush newValue)
         {
+            if (oldValue is null || newValue is null)
+            {
+                return oldValue;
+            }
+
             return new ImmutableSolidColorBrush(ColorAnimator.InterpolateCore(progress, oldValue.Color, newValue.Color));
         }
 
@@ -26,6 +31,11 @@ namespace Avalonia.Animation.Animators
     {    
         public override SolidColorBrush Interpolate(double progress, SolidColorBrush oldValue, SolidColorBrush newValue)
         {
+            if (oldValue is null || newValue is null)
+            {
+                return oldValue;
+            }
+
             return new SolidColorBrush(ColorAnimator.InterpolateCore(progress, oldValue.Color, newValue.Color));
         }
     }

From 34505c4c8b41c9f98553e4b2f500a8462be5811f Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Sat, 15 May 2021 20:53:28 -0400
Subject: [PATCH 2/4] Reuse Animator.Interpolate in transitions code

---
 .../Transitions/DoubleTransition.cs           | 10 ++++-----
 .../Transitions/FloatTransition.cs            |  7 +++++--
 .../Transitions/IntegerTransition.cs          |  7 +++++--
 .../Transitions/CornerRadiusTransition.cs     | 21 +++++--------------
 .../Animation/Transitions/PointTransition.cs  | 10 ++++-----
 .../Animation/Transitions/SizeTransition.cs   | 10 ++++-----
 .../Transitions/ThicknessTransition.cs        | 10 ++++-----
 .../Animation/Transitions/VectorTransition.cs | 10 ++++-----
 8 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/src/Avalonia.Animation/Transitions/DoubleTransition.cs b/src/Avalonia.Animation/Transitions/DoubleTransition.cs
index 8cae1e1f81..d5bb1aac20 100644
--- a/src/Avalonia.Animation/Transitions/DoubleTransition.cs
+++ b/src/Avalonia.Animation/Transitions/DoubleTransition.cs
@@ -1,6 +1,8 @@
 using System;
 using System.Reactive.Linq;
 
+using Avalonia.Animation.Animators;
+
 namespace Avalonia.Animation
 {
     /// <summary>
@@ -8,15 +10,13 @@ namespace Avalonia.Animation
     /// </summary>  
     public class DoubleTransition : Transition<double>
     {
+        private static readonly DoubleAnimator s_animator = new DoubleAnimator();
+
         /// <inheritdocs/>
         public override IObservable<double> DoTransition(IObservable<double> progress, double oldValue, double newValue)
         {
             return progress
-                .Select(p =>
-                {
-                    var f = Easing.Ease(p);
-                    return ((newValue - oldValue) * f) + oldValue;
-                });
+                .Select(progress => s_animator.Interpolate(Easing.Ease(progress), oldValue, newValue));
         }
     }
 }
diff --git a/src/Avalonia.Animation/Transitions/FloatTransition.cs b/src/Avalonia.Animation/Transitions/FloatTransition.cs
index 427563e559..37b644fa96 100644
--- a/src/Avalonia.Animation/Transitions/FloatTransition.cs
+++ b/src/Avalonia.Animation/Transitions/FloatTransition.cs
@@ -1,6 +1,8 @@
 using System;
 using System.Reactive.Linq;
 
+using Avalonia.Animation.Animators;
+
 namespace Avalonia.Animation
 {
     /// <summary>
@@ -8,12 +10,13 @@ namespace Avalonia.Animation
     /// </summary>  
     public class FloatTransition : Transition<float>
     {
+        private static readonly FloatAnimator s_animator = new FloatAnimator();
+
         /// <inheritdocs/>
         public override IObservable<float> DoTransition(IObservable<double> progress, float oldValue, float newValue)
         {
-            var delta = newValue - oldValue;
             return progress
-                .Select(p => (float)Easing.Ease(p) * delta + oldValue);
+                .Select(progress => s_animator.Interpolate(Easing.Ease(progress), oldValue, newValue));
         }
     }
 }
diff --git a/src/Avalonia.Animation/Transitions/IntegerTransition.cs b/src/Avalonia.Animation/Transitions/IntegerTransition.cs
index 7a85bd75dc..223b2ba531 100644
--- a/src/Avalonia.Animation/Transitions/IntegerTransition.cs
+++ b/src/Avalonia.Animation/Transitions/IntegerTransition.cs
@@ -1,6 +1,8 @@
 using System;
 using System.Reactive.Linq;
 
+using Avalonia.Animation.Animators;
+
 namespace Avalonia.Animation
 {
     /// <summary>
@@ -8,12 +10,13 @@ namespace Avalonia.Animation
     /// </summary>  
     public class IntegerTransition : Transition<int>
     {
+        private static readonly Int32Animator s_animator = new Int32Animator();
+
         /// <inheritdocs/>
         public override IObservable<int> DoTransition(IObservable<double> progress, int oldValue, int newValue)
         {
-            var delta = newValue - oldValue;
             return progress
-                .Select(p => (int)(Easing.Ease(p) * delta + oldValue));
+                .Select(progress => s_animator.Interpolate(Easing.Ease(progress), oldValue, newValue));
         }
     }
 }
diff --git a/src/Avalonia.Visuals/Animation/Transitions/CornerRadiusTransition.cs b/src/Avalonia.Visuals/Animation/Transitions/CornerRadiusTransition.cs
index 0b0f04ca94..9ffdf53694 100644
--- a/src/Avalonia.Visuals/Animation/Transitions/CornerRadiusTransition.cs
+++ b/src/Avalonia.Visuals/Animation/Transitions/CornerRadiusTransition.cs
@@ -1,6 +1,8 @@
 using System;
 using System.Reactive.Linq;
 
+using Avalonia.Animation.Animators;
+
 namespace Avalonia.Animation
 {
     /// <summary>
@@ -8,26 +10,13 @@ namespace Avalonia.Animation
     /// </summary>  
     public class CornerRadiusTransition : Transition<CornerRadius>
     {
+        private static readonly CornerRadiusAnimator s_animator = new CornerRadiusAnimator();
+
         /// <inheritdocs/>
         public override IObservable<CornerRadius> DoTransition(IObservable<double> progress, CornerRadius oldValue, CornerRadius newValue)
         {
             return progress
-                .Select(p =>
-                {
-                    var f = Easing.Ease(p);
-
-                    var deltaTL = newValue.TopLeft - oldValue.TopLeft;
-                    var deltaTR = newValue.TopRight - oldValue.TopRight;
-                    var deltaBR = newValue.BottomRight - oldValue.BottomRight;
-                    var deltaBL = newValue.BottomLeft - oldValue.BottomLeft;
-
-                    var nTL = f * deltaTL + oldValue.TopLeft;
-                    var nTR = f * deltaTR + oldValue.TopRight;
-                    var nBR = f * deltaBR + oldValue.BottomRight;
-                    var nBL = f * deltaBL + oldValue.BottomLeft;
-
-                    return new CornerRadius(nTL, nTR, nBR, nBL);
-                });
+                .Select(progress => s_animator.Interpolate(Easing.Ease(progress), oldValue, newValue));
         }
     }
 }
diff --git a/src/Avalonia.Visuals/Animation/Transitions/PointTransition.cs b/src/Avalonia.Visuals/Animation/Transitions/PointTransition.cs
index 29db5fc868..fbe24c6d55 100644
--- a/src/Avalonia.Visuals/Animation/Transitions/PointTransition.cs
+++ b/src/Avalonia.Visuals/Animation/Transitions/PointTransition.cs
@@ -1,6 +1,8 @@
 using System;
 using System.Reactive.Linq;
 
+using Avalonia.Animation.Animators;
+
 namespace Avalonia.Animation
 {
     /// <summary>
@@ -8,15 +10,13 @@ namespace Avalonia.Animation
     /// </summary>  
     public class PointTransition : Transition<Point>
     {
+        private static readonly PointAnimator s_animator = new PointAnimator();
+
         /// <inheritdocs/>
         public override IObservable<Point> DoTransition(IObservable<double> progress, Point oldValue, Point newValue)
         {
             return progress
-                .Select(p =>
-                {
-                    var f = Easing.Ease(p);
-                    return ((newValue - oldValue) * f) + oldValue;
-                });
+                .Select(progress => s_animator.Interpolate(Easing.Ease(progress), oldValue, newValue));
         }
     }
 }
diff --git a/src/Avalonia.Visuals/Animation/Transitions/SizeTransition.cs b/src/Avalonia.Visuals/Animation/Transitions/SizeTransition.cs
index b40e789915..464f83bec7 100644
--- a/src/Avalonia.Visuals/Animation/Transitions/SizeTransition.cs
+++ b/src/Avalonia.Visuals/Animation/Transitions/SizeTransition.cs
@@ -1,6 +1,8 @@
 using System;
 using System.Reactive.Linq;
 
+using Avalonia.Animation.Animators;
+
 namespace Avalonia.Animation
 {
     /// <summary>
@@ -8,15 +10,13 @@ namespace Avalonia.Animation
     /// </summary>  
     public class SizeTransition : Transition<Size>
     {
+        private static readonly SizeAnimator s_animator = new SizeAnimator();
+
         /// <inheritdocs/>
         public override IObservable<Size> DoTransition(IObservable<double> progress, Size oldValue, Size newValue)
         {
             return progress
-                .Select(p =>
-                {
-                    var f = Easing.Ease(p);
-                    return ((newValue - oldValue) * f) + oldValue;
-                });
+                .Select(progress => s_animator.Interpolate(Easing.Ease(progress), oldValue, newValue));
         }
     }
 }
diff --git a/src/Avalonia.Visuals/Animation/Transitions/ThicknessTransition.cs b/src/Avalonia.Visuals/Animation/Transitions/ThicknessTransition.cs
index 28d4ea067f..9fb3380780 100644
--- a/src/Avalonia.Visuals/Animation/Transitions/ThicknessTransition.cs
+++ b/src/Avalonia.Visuals/Animation/Transitions/ThicknessTransition.cs
@@ -1,6 +1,8 @@
 using System;
 using System.Reactive.Linq;
 
+using Avalonia.Animation.Animators;
+
 namespace Avalonia.Animation
 {
     /// <summary>
@@ -8,15 +10,13 @@ namespace Avalonia.Animation
     /// </summary>  
     public class ThicknessTransition : Transition<Thickness>
     {
+        private static readonly ThicknessAnimator s_animator = new ThicknessAnimator();
+
         /// <inheritdocs/>
         public override IObservable<Thickness> DoTransition(IObservable<double> progress, Thickness oldValue, Thickness newValue)
         {
             return progress
-                .Select(p =>
-                {
-                    var f = Easing.Ease(p);
-                    return ((newValue - oldValue) * f) + oldValue;
-                });
+                .Select(progress => s_animator.Interpolate(Easing.Ease(progress), oldValue, newValue));
         }
     }
 }
diff --git a/src/Avalonia.Visuals/Animation/Transitions/VectorTransition.cs b/src/Avalonia.Visuals/Animation/Transitions/VectorTransition.cs
index c073e8e192..5038117faa 100644
--- a/src/Avalonia.Visuals/Animation/Transitions/VectorTransition.cs
+++ b/src/Avalonia.Visuals/Animation/Transitions/VectorTransition.cs
@@ -1,6 +1,8 @@
 using System;
 using System.Reactive.Linq;
 
+using Avalonia.Animation.Animators;
+
 namespace Avalonia.Animation
 {
     /// <summary>
@@ -8,15 +10,13 @@ namespace Avalonia.Animation
     /// </summary>  
     public class VectorTransition : Transition<Vector>
     {
+        private static readonly VectorAnimator s_animator = new VectorAnimator();
+
         /// <inheritdocs/>
         public override IObservable<Vector> DoTransition(IObservable<double> progress, Vector oldValue, Vector newValue)
         {
             return progress
-                .Select(p =>
-                {
-                    var f = Easing.Ease(p);
-                    return ((newValue - oldValue) * f) + oldValue;
-                });
+                .Select(progress => s_animator.Interpolate(Easing.Ease(progress), oldValue, newValue));
         }
     }
 }

From f29d050e73c0144909757c085bf6bcd5a156f7ae Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Sat, 15 May 2021 20:53:45 -0400
Subject: [PATCH 3/4] Add BoxShadows transition

---
 .../Transitions/BoxShadowsTransition.cs       | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/Avalonia.Visuals/Animation/Transitions/BoxShadowsTransition.cs

diff --git a/src/Avalonia.Visuals/Animation/Transitions/BoxShadowsTransition.cs b/src/Avalonia.Visuals/Animation/Transitions/BoxShadowsTransition.cs
new file mode 100644
index 0000000000..008613fb40
--- /dev/null
+++ b/src/Avalonia.Visuals/Animation/Transitions/BoxShadowsTransition.cs
@@ -0,0 +1,23 @@
+using System;
+using System.Reactive.Linq;
+
+using Avalonia.Animation.Animators;
+using Avalonia.Media;
+
+namespace Avalonia.Animation
+{
+    /// <summary>
+    /// Transition class that handles <see cref="AvaloniaProperty"/> with <see cref="BoxShadows"/> type.
+    /// </summary>  
+    public class BoxShadowsTransition : Transition<BoxShadows>
+    {
+        private static readonly BoxShadowsAnimator s_animator = new BoxShadowsAnimator();
+
+        /// <inheritdocs/>
+        public override IObservable<BoxShadows> DoTransition(IObservable<double> progress, BoxShadows oldValue, BoxShadows newValue)
+        {
+            return progress
+                .Select(progress => s_animator.Interpolate(Easing.Ease(progress), oldValue, newValue));
+        }
+    }
+}

From f5a01afc6de7ac794d9dfb1a16792cf7f6296ee0 Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Sat, 15 May 2021 22:05:01 -0400
Subject: [PATCH 4/4] Update RenderDemo pages

---
 samples/RenderDemo/Pages/AnimationsPage.xaml  |  7 +-
 samples/RenderDemo/Pages/TransitionsPage.xaml | 65 +++++++++++++++++--
 2 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/samples/RenderDemo/Pages/AnimationsPage.xaml b/samples/RenderDemo/Pages/AnimationsPage.xaml
index 12fb31ea59..21c7d68b5d 100644
--- a/samples/RenderDemo/Pages/AnimationsPage.xaml
+++ b/samples/RenderDemo/Pages/AnimationsPage.xaml
@@ -1,7 +1,8 @@
 <UserControl 
   xmlns="https://github.com/avaloniaui" 
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
-  x:Class="RenderDemo.Pages.AnimationsPage">
+  x:Class="RenderDemo.Pages.AnimationsPage"
+  MaxWidth="600">
   <UserControl.Styles>
     <Styles>
       <Styles.Resources>
@@ -167,8 +168,8 @@
       <StackPanel.Clock>
         <Clock />
       </StackPanel.Clock>
-      <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
-        <TextBlock VerticalAlignment="Center">Hover to activate Transform Keyframe Animations.</TextBlock>
+      <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Spacing="20">
+        <TextBlock VerticalAlignment="Center">Hover to activate Keyframe Animations.</TextBlock>
         <Button Content="{Binding PlayStateText}" Command="{Binding TogglePlayState}" Click="ToggleClock" />
       </StackPanel>
       <WrapPanel ClipToBounds="False">
diff --git a/samples/RenderDemo/Pages/TransitionsPage.xaml b/samples/RenderDemo/Pages/TransitionsPage.xaml
index d6da293ff3..f9f69fb341 100644
--- a/samples/RenderDemo/Pages/TransitionsPage.xaml
+++ b/samples/RenderDemo/Pages/TransitionsPage.xaml
@@ -1,7 +1,8 @@
 <UserControl 
   xmlns="https://github.com/avaloniaui" 
-  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
-  x:Class="RenderDemo.Pages.TransitionsPage">
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  x:Class="RenderDemo.Pages.TransitionsPage"
+  MaxWidth="600">
   <UserControl.Styles>
     <Styles>
       <Styles.Resources>
@@ -90,6 +91,56 @@
         <Setter Property="RenderTransform" Value="none" />
       </Style>
 
+      <Style Selector="Border.Rect7">
+        <Setter Property="Transitions">
+          <Transitions>
+            <DoubleTransition Property="Height" Duration="0:0:0.5" />
+          </Transitions>
+        </Setter>
+      </Style>
+
+      <Style Selector="Border.Rect7:pointerover">
+        <Setter Property="Height" Value="50" />
+      </Style>
+
+      <Style Selector="Border.Rect8">
+        <Setter Property="Transitions">
+          <Transitions>
+            <CornerRadiusTransition Property="CornerRadius" Duration="0:0:0.5" />
+          </Transitions>
+        </Setter>
+      </Style>
+
+      <Style Selector="Border.Rect8:pointerover">
+        <Setter Property="CornerRadius" Value="50" />
+      </Style>
+
+      <Style Selector="Border.Rect9">
+        <Setter Property="Transitions">
+          <Transitions>
+            <ThicknessTransition Property="Padding" Duration="0:0:0.5" />
+          </Transitions>
+        </Setter>
+      </Style>
+
+      <Style Selector="Border.Rect9:pointerover">
+        <Setter Property="Padding" Value="10" />
+      </Style>
+
+      <Style Selector="Border.Shadow">
+        <Setter Property="Background" Value="Transparent"/>        
+        <Setter Property="BorderBrush" Value="Black"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="BoxShadow" Value="inset 0 0 0 2 Red, -15 -15 Green"/>
+        <Setter Property="Transitions">
+          <Transitions>
+            <BoxShadowsTransition Property="BoxShadow" Duration="0:0:0.5" />
+          </Transitions>
+        </Setter>
+      </Style>
+      <Style Selector="Border.Shadow:pointerover">
+        <Setter Property="BoxShadow" Value="inset 30 30 20 30 Green, 20 40 20 10 Red"/>
+      </Style>
     </Styles>
   </UserControl.Styles>
 
@@ -98,8 +149,8 @@
       <StackPanel.Clock>
         <Clock />
       </StackPanel.Clock>
-      <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
-        <TextBlock VerticalAlignment="Center">Hover to activate Transform Keyframe Animations.</TextBlock>
+      <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Spacing="20">
+        <TextBlock VerticalAlignment="Center">Hover to activate Transitions.</TextBlock>
         <Button Content="{Binding PlayStateText}" Command="{Binding TogglePlayState}" Click="ToggleClock" />
       </StackPanel>
       <WrapPanel ClipToBounds="False">
@@ -109,6 +160,12 @@
         <Border Classes="Test Rect4" Background="Navy"/>
         <Border Classes="Test Rect5" Background="SeaGreen"/>
         <Border Classes="Test Rect6" Background="Orange"/>
+        <Border Classes="Test Rect7" Background="Gold"/>
+        <Border Classes="Test Rect8" Background="Gray" />
+        <Border Classes="Test Rect9" Background="Red" />
+
+        <Border Classes="Test Shadow" CornerRadius="10" Child="{x:Null}" />
+        <Border Classes="Test Shadow" CornerRadius="0 30 60 0" Child="{x:Null}" />
       </WrapPanel>
     </StackPanel>
   </Grid>