Implement Composition Shapes/Paths, Easing Functions, Geometry Animations, and more

src/SamplesApp/SamplesApp.Skia/SamplesApp.Skia.csproj

@@ -33,7 +33,7 @@
 
 	<ItemGroup>
 		<ProjectReference Include="..\..\AddIns\Uno.WinUI.Graphics3DGL\Uno.WinUI.Graphics3DGL.csproj" />
-		<ProjectReference Include="..\AddIns\Uno.WinUI.Graphics2DSK\Uno.WinUI.Graphics2DSK.csproj" />
+		<ProjectReference Include="..\..\AddIns\Uno.WinUI.Graphics2DSK\Uno.WinUI.Graphics2DSK.csproj" />
 	</ItemGroup>
 
 	<ItemGroup>

src/SamplesApp/UITests.Shared/UITests.Shared.projitems

@@ -766,6 +766,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Composition\CompositionPathTests.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Core\CloseRequestedTests.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -6049,6 +6053,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Composition\RotatingCubeGlCanvasElement.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Composition\SimpleTriangleGlCanvasElement.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Composition\SKCanvasElementImpl.skia.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Composition\CompositionPathTests.xaml.cs">
+      <DependentUpon>CompositionPathTests.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Core\CloseRequestedTests.xaml.cs">
       <DependentUpon>CloseRequestedTests.xaml</DependentUpon>
     </Compile>

src/SamplesApp/UITests.Shared/Windows_UI_Composition/CompositionPathTests.xaml

@@ -0,0 +1,22 @@
+<UserControl x:Class="UITests.Shared.Windows_UI_Composition.CompositionPathTests"
+			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+			 xmlns:local="using:UITests.Shared.Windows_UI_Composition"
+			 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">
+
+	<GridView SelectionMode="None" VerticalAlignment="Top" HorizontalAlignment="Left">
+		<!-- We need to set a background in order for ToolTip to work -->
+		<ContentPresenter x:Name="compPresenter1" Width="200" Height="200" ToolTipService.ToolTip="Basic Shape Visual" Background="Transparent"/>
+		<ContentPresenter x:Name="compPresenter2" Width="200" Height="200" ToolTipService.ToolTip="Complex-Shape Shape Visual" Background="Transparent"/>
+		<ContentPresenter x:Name="compPresenter3" Width="200" Height="200" ToolTipService.ToolTip="Multi-Shape Shape Visual" Background="Transparent"/>
+		<ContentPresenter x:Name="compPresenter4" Width="200" Height="200" ToolTipService.ToolTip="Circle Path Geometry" Background="Transparent"/>
+		<ContentPresenter x:Name="compPresenter5" Width="200" Height="200" ToolTipService.ToolTip="Rounded Rectangle Path Geometry" Background="Transparent"/>
+		<ContentPresenter x:Name="compPresenter6" Width="200" Height="200" ToolTipService.ToolTip="Polygon Path Geometry" Background="Transparent"/>
+		<ContentPresenter x:Name="compPresenter7" Width="200" Height="200" ToolTipService.ToolTip="Path Geometry Clipping" Background="Transparent"/>
+		<ContentPresenter x:Name="compPresenter8" Width="200" Height="200" ToolTipService.ToolTip="Geometry Trimming Animation" Background="Transparent"/>
+	</GridView>
+</UserControl>

src/SamplesApp/UITests.Shared/Windows_UI_Composition/Vector3KeyFrameAnimationSample.xaml

@@ -13,6 +13,18 @@
 		<CheckBox x:Name="isForeverCheckBox" Content="Is forever?" />
 		<CheckBox x:Name="hasFrameAtZeroCheckBox" Content="Has a keyframe at 0.0f?" />
 		<muxc:NumberBox x:Name="iterationCountNumberBox"  Header="Iteration count" Value="1" />
+		<ComboBox x:Name="easingFunctionBox" Header="Easing Function" SelectedIndex="0">
+			<ComboBoxItem Content="Default (Cubic Bezier)" />
+			<ComboBoxItem Content="Linear" />
+			<ComboBoxItem Content="Back" />
+			<ComboBoxItem Content="Bounce" />
+			<ComboBoxItem Content="Circle" />
+			<ComboBoxItem Content="Elastic" />
+			<ComboBoxItem Content="Exponential" />
+			<ComboBoxItem Content="Power" />
+			<ComboBoxItem Content="Sine"/>
+			<ComboBoxItem Content="Step"/>
+		</ComboBox>
 		<Button Content="Start" Click="OnStartAnimation" />
 		<Button Content="Stop" Click="OnStopAnimation" />
 		<Border x:Name="border" Width="100" Height="100" Background="Red" />

src/SamplesApp/UITests.Shared/Windows_UI_Composition/Vector3KeyFrameAnimationSample.xaml.cs

@@ -23,18 +23,37 @@ public Vector3KeyFrameAnimationSample()
 
 	private void OnStartAnimation(object sender, RoutedEventArgs args)
 	{
-		var animation = _borderVisual.Compositor.CreateVector3KeyFrameAnimation();
+		var compositor = _borderVisual.Compositor;
+
+		CompositionEasingFunction defaultEasingFunction = compositor.CreateCubicBezierEasingFunction(new(0.41f, 0.52f), new(0.0f, 0.94f));
+
+		var easingFunction = easingFunctionBox.SelectedIndex switch
+		{
+			0 => defaultEasingFunction,
+			1 => CompositionEasingFunction.CreateLinearEasingFunction(compositor),
+			2 => CompositionEasingFunction.CreateBackEasingFunction(compositor, CompositionEasingFunctionMode.InOut, 0.9f),
+			3 => CompositionEasingFunction.CreateBounceEasingFunction(compositor, CompositionEasingFunctionMode.Out, 3, 2),
+			4 => CompositionEasingFunction.CreateCircleEasingFunction(compositor, CompositionEasingFunctionMode.InOut),
+			5 => CompositionEasingFunction.CreateElasticEasingFunction(compositor, CompositionEasingFunctionMode.Out, 2, 1),
+			6 => CompositionEasingFunction.CreateExponentialEasingFunction(compositor, CompositionEasingFunctionMode.Out, 6),
+			7 => CompositionEasingFunction.CreatePowerEasingFunction(compositor, CompositionEasingFunctionMode.Out, 10),
+			8 => CompositionEasingFunction.CreateSineEasingFunction(compositor, CompositionEasingFunctionMode.InOut),
+			9 => CompositionEasingFunction.CreateStepEasingFunction(compositor, 3),
+			_ => defaultEasingFunction
+		};
+
+		var animation = compositor.CreateVector3KeyFrameAnimation();
 		var y = _borderVisual.Offset.Y;
 		var maxX = _pageVisual.Size.X - _borderVisual.Size.X;
 		if ((bool)hasFrameAtZeroCheckBox.IsChecked)
 		{
-			animation.InsertKeyFrame(0.0f, new Vector3(0.0f, y, 0.0f));
+			animation.InsertKeyFrame(0.0f, new Vector3(0.0f, y, 0.0f), easingFunction);
 		}
 
-		animation.InsertKeyFrame(0.5f, new Vector3(maxX / 4.0f, y, 0.0f));
-		animation.InsertKeyFrame(0.6f, new Vector3(maxX / 4.0f, y, 0.0f));
-		animation.InsertKeyFrame(1.0f, new Vector3(maxX, y, 0.0f));
-		animation.Duration = TimeSpan.FromSeconds(1);
+		animation.InsertKeyFrame(0.5f, new Vector3(maxX / 4.0f, y, 0.0f), easingFunction);
+		animation.InsertKeyFrame(0.6f, new Vector3(maxX / 4.0f, y, 0.0f), easingFunction);
+		animation.InsertKeyFrame(1.0f, new Vector3(maxX, y, 0.0f), easingFunction);
+		animation.Duration = TimeSpan.FromSeconds(2);
 		animation.IterationCount = (int)iterationCountNumberBox.Value;
 		animation.IterationBehavior = (bool)isForeverCheckBox.IsChecked ? AnimationIterationBehavior.Forever : AnimationIterationBehavior.Count;
 		_borderVisual.StartAnimation("Offset", animation);

src/Uno.UI.Composition/AssemblyInfo.cs

@@ -5,12 +5,14 @@
 [assembly: InternalsVisibleTo("Uno.UI")]
 [assembly: InternalsVisibleTo("Uno.UI.Wasm")]
 [assembly: InternalsVisibleTo("Uno.UI.RuntimeTests")]
+[assembly: InternalsVisibleTo("Uno.UI.RuntimeTests.Windows")]
 [assembly: InternalsVisibleTo("Uno.UI.Tests")]
 [assembly: InternalsVisibleTo("Uno.UI.Unit.Tests")]
 [assembly: InternalsVisibleTo("Uno.UI.Toolkit")]
 [assembly: InternalsVisibleTo("Uno.UI.Composition")]
 
 [assembly: InternalsVisibleTo("SamplesApp")]
+[assembly: InternalsVisibleTo("SamplesApp.Windows")]
 [assembly: InternalsVisibleTo("SamplesApp.Droid")]
 [assembly: InternalsVisibleTo("SamplesApp.macOS")]
 [assembly: InternalsVisibleTo("SamplesApp.Wasm")]

src/Uno.UI.Composition/Composition/AnimationController.cs

@@ -0,0 +1,116 @@
+#nullable enable
+
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Microsoft.UI.Composition;
+
+public partial class AnimationController
+{
+	private CompositionObject? _ownerObject;
+	private string? _propertyName;
+	private KeyFrameAnimation? _animation;
+
+	private float? _progress;
+
+	// TODO: Support multiple KeyFrameAnimation association like on Windows
+
+	internal AnimationController(CompositionObject ownerObject, string propertyName, KeyFrameAnimation animation) : base(ownerObject.Compositor)
+	{
+		_ownerObject = ownerObject;
+		_propertyName = propertyName;
+		_animation = animation;
+
+		_animation.Stopped += Animation_Stopped;
+	}
+
+	internal AnimationController(Compositor compositor) : base(compositor) { }
+
+	internal void Initialize(CompositionObject ownerObject, string propertyName, KeyFrameAnimation animation)
+	{
+		if (_animation is not null)
+		{
+			_animation.Stopped -= Animation_Stopped;
+		}
+
+		_ownerObject = ownerObject;
+		_propertyName = propertyName;
+		_animation = animation;
+		_progress = null;
+
+		_animation.Stopped += Animation_Stopped;
+	}
+
+	public void Resume()
+	{
+		_progress = null;
+		EnsureAnimation().Resume();
+	}
+
+	public void Pause() => EnsureAnimation().Pause();
+
+	public float Progress
+	{
+		get => _progress is not null ? _progress.Value : EnsureAnimation().Progress;
+		set
+		{
+			var animation = EnsureAnimation();
+			_progress = value;
+			OnPropertyChanged(nameof(Progress), false);
+			_ownerObject?.SeekAnimation(animation, value);
+		}
+	}
+
+	internal override object GetAnimatableProperty(string propertyName, string subPropertyName)
+	{
+		if (propertyName.Equals(nameof(Progress), StringComparison.OrdinalIgnoreCase))
+		{
+			return Progress;
+		}
+		else
+		{
+			return base.GetAnimatableProperty(propertyName, subPropertyName);
+		}
+	}
+
+	private protected override void SetAnimatableProperty(ReadOnlySpan<char> propertyName, ReadOnlySpan<char> subPropertyName, object? propertyValue)
+	{
+		if (propertyName.Equals(nameof(Progress), StringComparison.OrdinalIgnoreCase))
+		{
+			Progress = SubPropertyHelpers.ValidateValue<float>(propertyValue);
+		}
+		else
+		{
+			base.SetAnimatableProperty(propertyName, subPropertyName, propertyValue);
+		}
+	}
+
+	private void Animation_Stopped(object? sender, EventArgs e)
+	{
+		_animation = null;
+		_progress = null;
+	}
+
+	private KeyFrameAnimation EnsureAnimation()
+	{
+		if (_ownerObject is null || _propertyName is null)
+		{
+			throw new InvalidOperationException("The AnimationController has not been associated with a target object or animation");
+		}
+
+		if (_animation == null)
+		{
+			_animation = _ownerObject.GetKeyFrameAnimation(_propertyName);
+		}
+
+		if (_animation == null)
+		{
+			throw new InvalidOperationException($"No animation is running on the target object for property {_propertyName}");
+		}
+
+		return _animation;
+	}
+}

src/Uno.UI.Composition/Composition/CompositionEllipseGeometry.skia.cs

@@ -1,12 +1,34 @@
 #nullable enable
 
+using System.Windows.Input;
 using Windows.Graphics;
 
 namespace Microsoft.UI.Composition
 {
 	public partial class CompositionEllipseGeometry : CompositionGeometry
 	{
-		internal override IGeometrySource2D? BuildGeometry()
+		private SkiaGeometrySource2D? _geometrySource2D;
+
+		internal override IGeometrySource2D? BuildGeometry() => _geometrySource2D;
+
+		private SkiaGeometrySource2D? InternalBuildGeometry()
 			=> new SkiaGeometrySource2D(BuildEllipseGeometry(Center, Radius));
+
+		private protected override void OnPropertyChangedCore(string? propertyName, bool isSubPropertyChange)
+		{
+			if (propertyName is nameof(Center) or nameof(Radius))
+			{
+				_geometrySource2D?.Dispose();
+				_geometrySource2D = InternalBuildGeometry();
+			}
+
+			base.OnPropertyChangedCore(propertyName, isSubPropertyChange);
+		}
+
+		private protected override void DisposeInternal()
+		{
+			_geometrySource2D?.Dispose();
+			base.DisposeInternal();
+		}
 	}
 }

src/Uno.UI.Composition/Composition/CompositionGeometricClip.skia.cs

@@ -1,36 +1,42 @@
 #nullable enable
 
 using System;
+using System.IO;
 using SkiaSharp;
 using Windows.Foundation;
+using Windows.Graphics.Interop;
 
 namespace Microsoft.UI.Composition;
 
 partial class CompositionGeometricClip
 {
 	private protected override Rect? GetBoundsCore(Visual visual)
 	{
-		switch (Geometry)
+		if (Geometry is not null)
 		{
-			case CompositionPathGeometry { Path.GeometrySource: SkiaGeometrySource2D geometrySource }:
-				return geometrySource.Geometry.TightBounds.ToRect();
-
-			case CompositionPathGeometry cpg:
-				throw new InvalidOperationException($"Clipping with source {cpg.Path?.GeometrySource} is not supported");
-
-			case null:
-				return null;
+			var geometry = Geometry.BuildGeometry();
 
-			default:
-				throw new InvalidOperationException($"Clipping with {Geometry} is not supported");
+			if (geometry is SkiaGeometrySource2D geometrySource)
+			{
+				return geometrySource.Geometry.TightBounds.ToRect();
+			}
+			else
+			{
+				throw new InvalidOperationException($"Clipping with source {geometry} is not supported");
+			}
 		}
+
+		return null;
 	}
 
 	internal override void Apply(SKCanvas canvas, Visual visual)
 	{
-		switch (Geometry)
+		if (Geometry is not null)
 		{
-			case CompositionPathGeometry { Path.GeometrySource: SkiaGeometrySource2D geometrySource }:
+			var geometry = Geometry.BuildGeometry();
+
+			if (geometry is SkiaGeometrySource2D geometrySource)
+			{
 				var path = geometrySource.Geometry;
 				if (!TransformMatrix.IsIdentity)
 				{
@@ -40,17 +46,11 @@ internal override void Apply(SKCanvas canvas, Visual visual)
 				}
 
 				canvas.ClipPath(path, antialias: true);
-				break;
-
-			case CompositionPathGeometry cpg:
-				throw new InvalidOperationException($"Clipping with source {cpg.Path?.GeometrySource} is not supported");
-
-			case null:
-				// null is nop
-				break;
-
-			default:
-				throw new InvalidOperationException($"Clipping with {Geometry} is not supported");
+			}
+			else
+			{
+				throw new InvalidOperationException($"Clipping with source {geometry} is not supported");
+			}
 		}
 	}
 }