Merge pull request #5929 from AvaloniaUI/new-transitions

Reuse animators in Transitions code + add missing BoxShadowsTransition + fix NRE in ISolidColorBrushAnimator

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">

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>

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));
         }
     }
 }

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));
         }
     }
 }

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));
         }
     }
 }

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));
         }
     }

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));
+        }
+    }
+}

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));
         }
     }
 }

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));
         }
     }
 }

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));
         }
     }
 }

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));
         }
     }
 }

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));
         }
     }
 }