Merge pull request #18968 from ramezgerges/skia_coloranimations

fix(skia): support color animations
unoplatform · Dec 4, 2024 · e2b56e5 · e2b56e5
2 parents 7b28795 + b6f5318
commit e2b56e5
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 62 deletions.
diff --git a/...App/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimationUsingKeyFrames_Fill.xaml b/...App/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimationUsingKeyFrames_Fill.xaml
@@ -9,12 +9,18 @@
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
 	<Page.Resources>
-		<SolidColorBrush x:Key="Color1" Color="#FF0000" />
-		<SolidColorBrush x:Key="Color2" Color="#FF8000" />
-		<SolidColorBrush x:Key="Color3" Color="#FFFF00" />
-		<SolidColorBrush x:Key="Color4" Color="#008000" />
-		<SolidColorBrush x:Key="Color5" Color="#0000FF" />
-		<SolidColorBrush x:Key="Color6" Color="#A000C0" />
+		<Color x:Key="Color1">#FF0000</Color>
+		<Color x:Key="Color2">#FF8000</Color>
+		<Color x:Key="Color3">#FFFF00</Color>
+		<Color x:Key="Color4">#008000</Color>
+		<Color x:Key="Color5">#0000FF</Color>
+		<Color x:Key="Color6">#A000C0</Color>
+		<SolidColorBrush x:Key="Brush1" Color="{StaticResource Color1}" />
+		<SolidColorBrush x:Key="Brush2" Color="{StaticResource Color2}" />
+		<SolidColorBrush x:Key="Brush3" Color="{StaticResource Color3}" />
+		<SolidColorBrush x:Key="Brush4" Color="{StaticResource Color4}" />
+		<SolidColorBrush x:Key="Brush5" Color="{StaticResource Color5}" />
+		<SolidColorBrush x:Key="Brush6" Color="{StaticResource Color6}" />
 	</Page.Resources>
 
     <StackPanel Spacing="10">
@@ -162,18 +168,18 @@
 
 		<TextBlock>Original Colors: (should never change)</TextBlock>
 		<StackPanel Orientation="Horizontal" Height="40">
-			<Border Width="20" Background="{StaticResource Color1}" />
-			<Rectangle Width="20" Fill="{StaticResource Color1}" />
-			<Border Width="20" Background="{StaticResource Color2}" />
-			<Rectangle Width="20" Fill="{StaticResource Color2}" />
-			<Border Width="20" Background="{StaticResource Color3}" />
-			<Rectangle Width="20" Fill="{StaticResource Color3}" />
-			<Border Width="20" Background="{StaticResource Color4}" />
-			<Rectangle Width="20" Fill="{StaticResource Color4}" />
-			<Border Width="20" Background="{StaticResource Color5}" />
-			<Rectangle Width="20" Fill="{StaticResource Color5}" />
-			<Border Width="20" Background="{StaticResource Color6}" />
-			<Rectangle Width="20" Fill="{StaticResource Color6}" />
+			<Border Width="20" Background="{StaticResource Brush1}" />
+			<Rectangle Width="20" Fill="{StaticResource Brush1}" />
+			<Border Width="20" Background="{StaticResource Brush2}" />
+			<Rectangle Width="20" Fill="{StaticResource Brush2}" />
+			<Border Width="20" Background="{StaticResource Brush3}" />
+			<Rectangle Width="20" Fill="{StaticResource Brush3}" />
+			<Border Width="20" Background="{StaticResource Brush4}" />
+			<Rectangle Width="20" Fill="{StaticResource Brush4}" />
+			<Border Width="20" Background="{StaticResource Brush5}" />
+			<Rectangle Width="20" Fill="{StaticResource Brush5}" />
+			<Border Width="20" Background="{StaticResource Brush6}" />
+			<Rectangle Width="20" Fill="{StaticResource Brush6}" />
 		</StackPanel>
 
 		<StackPanel Orientation="Horizontal" Spacing="20">
@@ -186,12 +192,12 @@
 
 		<TextBlock>Animated block:</TextBlock>
 		<StackPanel Orientation="Horizontal" Height="40">
-			<Border Width="40" x:Name="border1" Background="{StaticResource Color1}" />
-			<Border Width="40" x:Name="border2" Background="{StaticResource Color2}" />
-			<Border Width="40" x:Name="border3" Background="{StaticResource Color3}" />
-			<Border Width="40" x:Name="border4" Background="{StaticResource Color4}" />
-			<Border Width="40" x:Name="border5" Background="{StaticResource Color5}" />
-			<Border Width="40" x:Name="border6" Background="{StaticResource Color6}" />
+			<Border Width="40" x:Name="border1" Background="{StaticResource Brush1}" />
+			<Border Width="40" x:Name="border2" Background="{StaticResource Brush2}" />
+			<Border Width="40" x:Name="border3" Background="{StaticResource Brush3}" />
+			<Border Width="40" x:Name="border4" Background="{StaticResource Brush4}" />
+			<Border Width="40" x:Name="border5" Background="{StaticResource Brush5}" />
+			<Border Width="40" x:Name="border6" Background="{StaticResource Brush6}" />
 		</StackPanel>
     </StackPanel>
 </Page>
diff --git a/.../UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimationUsingKeyFrames_Fill.xaml.cs b/.../UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimationUsingKeyFrames_Fill.xaml.cs
@@ -5,7 +5,7 @@
 
 namespace UITests.Windows_UI_Xaml_Media_Animation
 {
-	[Sample("Animations")]
+	[Sample("Animations", IsManualTest = true)]
 	public sealed partial class ColorAnimationUsingKeyFrames_Fill : Page
 	{
 		public ColorAnimationUsingKeyFrames_Fill()

diff --git a/src/Uno.UI/UI/Xaml/Media/Animation/Animators/AnimatorFactory.skia.cs b/src/Uno.UI/UI/Xaml/Media/Animation/Animators/AnimatorFactory.skia.cs
@@ -1,9 +1,4 @@
 using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using Uno.Extensions;
-using Uno.Foundation.Logging;
 using Windows.UI;
 
 namespace Microsoft.UI.Xaml.Media.Animation
@@ -14,6 +9,6 @@ private static IValueAnimator CreateDouble(Timeline timeline, double startingVal
 			=> new DispatcherDoubleAnimator(startingValue, targetValue);
 
 		private static IValueAnimator CreateColor(Timeline timeline, ColorOffset startingValue, ColorOffset targetValue)
-			=> new ImmediateAnimator<ColorOffset>(targetValue);
+			=> new DispatcherColorAnimator(startingValue, targetValue);
 	}
 }
diff --git a/...tion/Animators/DispatcherFloatAnimator.cs → ...Animation/Animators/DispatcherAnimator.cs b/...tion/Animators/DispatcherFloatAnimator.cs → ...Animation/Animators/DispatcherAnimator.cs
@@ -3,14 +3,14 @@
 
 namespace Microsoft.UI.Xaml.Media.Animation
 {
-	internal sealed class DispatcherFloatAnimator : CPUBoundAnimator<float>
+	internal abstract class DispatcherAnimator<T> : CPUBoundAnimator<T> where T : struct
 	{
 		public const int DefaultFrameRate = 30;
 
 		private readonly int _frameRate;
 		private readonly DispatcherTimer _timer;
 
-		public DispatcherFloatAnimator(float from, float to, int frameRate = DefaultFrameRate)
+		public DispatcherAnimator(T from, T to, int frameRate = DefaultFrameRate)
 			: base(from, to)
 		{
 			_frameRate = frameRate;
@@ -24,6 +24,6 @@ public DispatcherFloatAnimator(float from, float to, int frameRate = DefaultFram
 		protected override void SetStartFrameDelay(long delayMs) => _timer.Interval = TimeSpan.FromMilliseconds(delayMs);
 		protected override void SetAnimationFramesInterval() => _timer.Interval = TimeSpan.FromSeconds(1d / _frameRate);
 
-		protected override float GetUpdatedValue(long frame, float from, float to) => (float)_easing.Ease(frame, from, to, Duration);
+		protected abstract override T GetUpdatedValue(long frame, T from, T to);
 	}
 }
diff --git a/src/Uno.UI/UI/Xaml/Media/Animation/Animators/DispatcherColorAnimator.cs b/src/Uno.UI/UI/Xaml/Media/Animation/Animators/DispatcherColorAnimator.cs
@@ -0,0 +1,16 @@
+using System;
+using Windows.UI;
+
+namespace Microsoft.UI.Xaml.Media.Animation
+{
+	internal sealed class DispatcherColorAnimator(ColorOffset from, ColorOffset to, int frameRate = DispatcherAnimator<ConsoleColor>.DefaultFrameRate)
+		: DispatcherAnimator<ColorOffset>(from, to, frameRate)
+	{
+		protected override ColorOffset GetUpdatedValue(long frame, ColorOffset from, ColorOffset to) =>
+			ColorOffset.FromArgb(
+				(int)Math.Round(_easing.Ease(frame, from.A, to.A, Duration)),
+				(int)Math.Round(_easing.Ease(frame, from.R, to.R, Duration)),
+				(int)Math.Round(_easing.Ease(frame, from.G, to.G, Duration)),
+				(int)Math.Round(_easing.Ease(frame, from.B, to.B, Duration)));
+	}
+}
diff --git a/src/Uno.UI/UI/Xaml/Media/Animation/Animators/DispatcherDoubleAnimator.cs b/src/Uno.UI/UI/Xaml/Media/Animation/Animators/DispatcherDoubleAnimator.cs
@@ -1,29 +1,8 @@
-using System;
-using System.Linq;
-
-namespace Microsoft.UI.Xaml.Media.Animation
+namespace Microsoft.UI.Xaml.Media.Animation
 {
-	internal sealed class DispatcherDoubleAnimator : CPUBoundAnimator<double>
+	internal sealed class DispatcherDoubleAnimator(double from, double to, int frameRate = DispatcherAnimator<double>.DefaultFrameRate)
+		: DispatcherAnimator<double>(from, to, frameRate)
 	{
-		public const int DefaultFrameRate = 30;
-
-		private readonly int _frameRate;
-		private readonly DispatcherTimer _timer;
-
-		public DispatcherDoubleAnimator(double from, double to, int frameRate = DefaultFrameRate)
-			: base(from, to)
-		{
-			_frameRate = frameRate;
-			_timer = new DispatcherTimer();
-			_timer.Tick += OnFrame;
-		}
-
-		protected override void EnableFrameReporting() => _timer.Start();
-		protected override void DisableFrameReporting() => _timer.Stop();
-
-		protected override void SetStartFrameDelay(long delayMs) => _timer.Interval = TimeSpan.FromMilliseconds(delayMs);
-		protected override void SetAnimationFramesInterval() => _timer.Interval = TimeSpan.FromSeconds(1d / _frameRate);
-
 		protected override double GetUpdatedValue(long frame, double from, double to) => (float)_easing.Ease(frame, from, to, Duration);
 	}
 }
diff --git a/src/Uno.UI/UI/Xaml/Media/Animation/ColorAnimation.cs b/src/Uno.UI/UI/Xaml/Media/Animation/ColorAnimation.cs
@@ -1,8 +1,4 @@
 using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
 using Uno;
 using Windows.UI;
 
@@ -138,6 +134,10 @@ ColorOffset IAnimation<ColorOffset>.Convert(object value)
 			{
 				return (ColorOffset)Colors.Parse(s);
 			}
+			else if (value is Color c)
+			{
+				return (ColorOffset)c;
+			}
 
 			// TODO: handle int?
 			return default(ColorOffset);