Merge pull request #2921 from unoplatform/dev/djo/coloranimation

Implement ColorAnimation
unoplatform · Apr 14, 2020 · e4e715e · e4e715e
2 parents 6f6573f + f5fe27f
commit e4e715e
Show file tree

Hide file tree

Showing 42 changed files with 1,862 additions and 1,081 deletions.
diff --git a/build/ios-uitest-run.sh b/build/ios-uitest-run.sh
@@ -45,7 +45,7 @@ else
 		namespace = 'SamplesApp.UITests.Windows_UI_Xaml_Controls.PivotTests' or \
 		namespace = 'SamplesApp.UITests.Windows_UI_Xaml_Controls.CommandBarTests' or \
 		namespace = 'SamplesApp.UITests.Windows_UI_Xaml_Controls.ComboBoxTests' or \
-		namespace = 'SamplesApp.UITests.Windows_UI_Xaml_Media_Animation.DoubleAnimation_Tests' or \
+		namespace = 'SamplesApp.UITests.Windows_UI_Xaml_Media_Animation' or \
 		namespace = 'SamplesApp.UITests.Windows_UI_Xaml_Controls.BorderTests'
 	"
 fi

diff --git a/src/SamplesApp/SamplesApp.UITests/Windows_UI_Xaml_Media_Animation/ColorAnimation_Tests.cs b/src/SamplesApp/SamplesApp.UITests/Windows_UI_Xaml_Media_Animation/ColorAnimation_Tests.cs
@@ -0,0 +1,68 @@
+using System;
+using System.Collections.Generic;
+using System.Drawing;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using NUnit.Framework;
+using SamplesApp.UITests.TestFramework;
+using Uno.UITest.Helpers.Queries;
+
+namespace SamplesApp.UITests.Windows_UI_Xaml_Media_Animation
+{
+	[TestFixture]
+	public class ColorAnimation_Tests : SampleControlUITestBase
+	{
+		[Test]
+		[AutoRetry]
+		[ActivePlatforms(Platform.Android, Platform.Browser)] // Disabled for iOS because HasColor() behaves strangely: https://github.com/unoplatform/uno/issues/1955
+		public void When_Border_Background_Animated()
+		{
+			Run("UITests.Windows_UI_Xaml_Media_Animation.ColorAnimation_Background");
+
+			_app.WaitForElement("PlayColorAnimation");
+
+			_app.FastTap("BrushEqualityButton");
+
+			_app.WaitForText("BrushEqualityText", "true");
+
+			_app.FastTap("PlayColorAnimation");
+
+			_app.WaitForText("StatusText", "Completed");
+
+			_app.FastTap("BrushEqualityButton");
+
+			_app.WaitForText("BrushEqualityText", "false");
+
+			var targetRect = _app.GetRect("TargetBorder");
+
+			var indepRect = _app.GetRect("IndependentBorder");
+
+			var bmp = _app.Screenshot("Completed");
+
+			ImageAssert.HasColorAt(bmp, targetRect.CenterX, targetRect.CenterY, Color.Red);
+
+			ImageAssert.HasColorAt(bmp, indepRect.CenterX, indepRect.CenterY, Color.Blue); //Shared resource shouldn't be modified
+		}
+
+		[Test]
+		[AutoRetry]
+		[ActivePlatforms(Platform.Android, Platform.Browser)] // Disabled for iOS because HasColor() behaves strangely: https://github.com/unoplatform/uno/issues/1955
+		public void When_Rectangle_Fill_Animated()
+		{
+			Run("UITests.Windows_UI_Xaml_Media_Animation.ColorAnimation_Fill");
+
+			_app.WaitForElement("PlayColorAnimation");
+
+			_app.FastTap("PlayColorAnimation");
+
+			_app.WaitForText("StatusText", "Completed");
+
+			var targetRect = _app.GetRect("TargetRectangle");
+
+			var bmp = _app.Screenshot("Completed");
+
+			ImageAssert.HasColorAt(bmp, targetRect.CenterX, targetRect.CenterY, Color.Brown);
+		}
+	}
+}
diff --git a/...esApp.UITests/Windows_UI_Xaml_Media_Animation/DoubleAnimation_Tests.FinalState_Opacity.cs b/...esApp.UITests/Windows_UI_Xaml_Media_Animation/DoubleAnimation_Tests.FinalState_Opacity.cs
@@ -14,6 +14,7 @@
 namespace SamplesApp.UITests.Windows_UI_Xaml_Media_Animation
 {
 	[TestFixture]
+	[ActivePlatforms(Platform.Android, Platform.Browser)] // Disabled for iOS: https://github.com/unoplatform/uno/issues/1955
 	public partial class DoubleAnimation_Tests : SampleControlUITestBase
 	{
 		private const string _finalStateOpacityTestControl = "UITests.Windows_UI_Xaml_Media_Animation.DoubleAnimation_FinalState_Opacity";

diff --git a/src/SamplesApp/UITests.Shared/UITests.Shared.projitems b/src/SamplesApp/UITests.Shared/UITests.Shared.projitems
@@ -2573,6 +2573,14 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media_Animation\ColorAnimation_Background.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media_Animation\ColorAnimation_Fill.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media_Animation\DoubleAnimation_FinalState_Opacity.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -4436,6 +4444,12 @@
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Input\RoutedEvents\RoutedEvent_TappedControl.xaml.cs">
       <DependentUpon>RoutedEvent_TappedControl.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media_Animation\ColorAnimation_Background.xaml.cs">
+      <DependentUpon>ColorAnimation_Background.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media_Animation\ColorAnimation_Fill.xaml.cs">
+      <DependentUpon>ColorAnimation_Fill.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media_Animation\DoubleAnimation_FinalState_Opacity.xaml.cs">
       <DependentUpon>DoubleAnimation_FinalState_Opacity.xaml</DependentUpon>
     </Compile>

diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimation_Background.xaml b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimation_Background.xaml
@@ -0,0 +1,48 @@
+<UserControl x:Class="UITests.Windows_UI_Xaml_Media_Animation.ColorAnimation_Background"
+			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+			 xmlns:local="using:UITests.Windows_UI_Xaml_Media_Animation"
+			 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+			 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+			 mc:Ignorable="d"
+			 d:DesignHeight="300"
+			 d:DesignWidth="400">
+	<UserControl.Resources>
+		<SolidColorBrush x:Key="ColorAnimation_Background_Brush"
+						 Color="Blue" />
+		<Storyboard x:Name="colorStoryboard">
+			<ColorAnimation Duration="0:00:0.1"
+							Storyboard.TargetName="TargetBorder"
+							Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
+							To="Red" />
+		</Storyboard>
+	</UserControl.Resources>
+
+	<StackPanel>
+		<Button x:Name="PlayColorAnimation"
+				Content="Play ColorAnimation"
+				Click="PlayColorAnimation_Click" />
+		<Button x:Name="BrushEqualityButton"
+				Content="Are brushes ref-equal?"
+				Click="CheckBrushEquality_Click" />
+		<TextBlock x:Name="BrushEqualityText"
+				   Text="-" />
+		<TextBlock Text="Status" />
+		<TextBlock x:Name="StatusText" />
+		<Border Width="300"
+				Height="100"
+				Margin="5"
+				x:Name="TargetBorder"
+				Background="{StaticResource ColorAnimation_Background_Brush}">
+			<Border.RenderTransform>
+				<TranslateTransform />
+			</Border.RenderTransform>
+		</Border>
+		<Border Width="300"
+				Height="100"
+				Margin="5"
+				x:Name="IndependentBorder"
+				Background="{StaticResource ColorAnimation_Background_Brush}">
+		</Border>
+	</StackPanel>
+</UserControl>
diff --git a/...mplesApp/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimation_Background.xaml.cs b/...mplesApp/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimation_Background.xaml.cs
@@ -0,0 +1,45 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Uno.UI.Samples.Controls;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
+
+namespace UITests.Windows_UI_Xaml_Media_Animation
+{
+	[Sample("Animations")]
+	public sealed partial class ColorAnimation_Background : UserControl
+	{
+		public ColorAnimation_Background()
+		{
+			this.InitializeComponent();
+		}
+
+		private void PlayColorAnimation_Click(object sender, RoutedEventArgs args)
+		{
+			colorStoryboard.Completed += (o, e) =>
+			{
+				StatusText.Text = "Completed";
+			};
+			colorStoryboard.Begin();
+		}
+
+		private void CheckBrushEquality_Click(object sender, RoutedEventArgs args)
+		{
+			// Assert non-null
+			var areEqual = ReferenceEquals(TargetBorder.Background, IndependentBorder.Background);
+			BrushEqualityText.Text = areEqual.ToString().ToLowerInvariant();
+		}
+	}
+}
diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimation_Fill.xaml b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimation_Fill.xaml
@@ -0,0 +1,34 @@
+<UserControl x:Class="UITests.Windows_UI_Xaml_Media_Animation.ColorAnimation_Fill"
+			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+			 xmlns:local="using:UITests.Windows_UI_Xaml_Media_Animation"
+			 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+			 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+			 mc:Ignorable="d"
+			 d:DesignHeight="300"
+			 d:DesignWidth="400">
+	<UserControl.Resources>
+		<Storyboard x:Name="colorStoryboard">
+			<ColorAnimation Duration="0"
+							Storyboard.TargetName="TargetRectangle"
+							Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
+							From="Orange"
+							To="Brown" />
+		</Storyboard>
+	</UserControl.Resources>
+
+
+	<StackPanel>
+		<Button x:Name="PlayColorAnimation"
+				Content="Play ColorAnimation"
+				Click="PlayColorAnimation_Click" />
+		<TextBlock Text="Status" />
+		<TextBlock x:Name="StatusText" />
+		<Rectangle Width="300"
+				   Height="100"
+				   Margin="5"
+				   x:Name="TargetRectangle"
+				   Fill="Orange">
+		</Rectangle>
+	</StackPanel>
+</UserControl>
diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimation_Fill.xaml.cs b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimation_Fill.xaml.cs
@@ -0,0 +1,38 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Uno.UI.Samples.Controls;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
+
+namespace UITests.Windows_UI_Xaml_Media_Animation
+{
+	[Sample("Animations")]
+	public sealed partial class ColorAnimation_Fill : UserControl
+	{
+		public ColorAnimation_Fill()
+		{
+			this.InitializeComponent();
+		}
+
+		private void PlayColorAnimation_Click(object sender, RoutedEventArgs args)
+		{
+			colorStoryboard.Completed += (o, e) =>
+			{
+				StatusText.Text = "Completed";
+			};
+			colorStoryboard.Begin();
+		}
+	}
+}
diff --git a/src/Uno.UI/DataBinding/BindingPath.cs b/src/Uno.UI/DataBinding/BindingPath.cs
@@ -12,6 +12,7 @@
 using Uno.Logging;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Media;
 
 namespace Uno.UI.DataBinding
 {
@@ -100,6 +101,26 @@ public IEnumerable<IBindingItem> GetPathItems()
 			return _chain.Flatten(i => i.Next);
 		}
 
+		/// <summary>
+		/// Checks the property path for members which may be shared resources (<see cref="Brush"/>es and <see cref="Transform"/>s) and creates a
+		/// copy of them if need be (ie if not already copied). Intended to be used prior to animating the targeted property.
+		/// </summary>
+		internal void CloneShareableObjectsInPath()
+		{
+			foreach (BindingItem item in GetPathItems())
+			{
+				if (item.PropertyType == typeof(Brush) || item.PropertyType == typeof(GeneralTransform))
+				{
+					if (item.Value is IShareableDependencyObject shareable && !shareable.IsClone && item.DataContext is DependencyObject owner)
+					{
+						var clone = shareable.Clone();
+
+						item.Value = clone;
+						break;
+					}
+				}
+			}
+		}
 
 		/// <summary>
 		/// Registers a property changed registration handler.

diff --git a/src/Uno.UI/DataBinding/BindingPropertyHelper.FastConvert.cs b/src/Uno.UI/DataBinding/BindingPropertyHelper.FastConvert.cs
@@ -10,6 +10,7 @@
 using System.Collections.Generic;
 using Windows.Foundation;
 using Windows.UI.Xaml.Media.Animation;
+using Windows.UI;
 
 #if XAMARIN_ANDROID
 using View = Android.Views.View;
@@ -66,6 +67,13 @@ private static bool FastConvert(Type outputType, object input, ref object output
 						return true;
 					}
 					break;
+
+				case ColorOffset colorOffsetInput:
+					if (FastColorOffsetConvert(outputType, colorOffsetInput, ref output))
+					{
+						return true;
+					}
+					break;
 			}
 
 			return false;
@@ -93,6 +101,17 @@ private static bool FastEnumConvert(Type outputType, object input, ref object ou
 			return false;
 		}
 
+		private static bool FastColorOffsetConvert(Type outputType, ColorOffset input, ref object output)
+		{
+			if (outputType == typeof(Windows.UI.Color))
+			{
+				output = (Windows.UI.Color)input;
+				return true;
+			}
+
+			return false;
+		}
+
 		private static bool FastNumberConvert(Type outputType, object input, ref object output)
 		{
 			if (input is double doubleInput)