Add AnimationFinished event to SKLottieView (#209)

mattleibow · web-flow · commit 8b5d7bd969f3 · 2023-09-01T20:36:43.000+02:00
diff --git a/docs/api/ui-forms/sklottieview.md b/docs/api/ui-forms/sklottieview.md
@@ -24,10 +24,11 @@ There are several properties that can be used to control th animation playback:
 
 There are a few events that can be used to be notified of animation loading events:
 
-| Event                | Type            | Description |
-| :------------------- | :-------------- | :---------- |
-| **AnimationLoaded**  | `EventHandler`  | Invoked when the animation has loaded successfully. |
-| **AnimationFailed**  | `EventHandler`  | Invoked when there was an error loading the animation. |
+| Event                   | Type            | Description |
+| :---------------------- | :-------------- | :---------- |
+| **AnimationLoaded**     | `EventHandler`  | Invoked when the animation has loaded successfully. |
+| **AnimationFailed**     | `EventHandler`  | Invoked when there was an error loading the animation. |
+| **AnimationCompleted**  | `EventHandler`  | Invoked when the animation is finished playing (after all the repeats). Infinite animations never complete so will not trigger the event. |
 
 ## Parts
 
diff --git a/docs/api/ui-maui/sklottieview.md b/docs/api/ui-maui/sklottieview.md
@@ -24,10 +24,11 @@ There are several properties that can be used to control th animation playback:
 
 There are a few events that can be used to be notified of animation loading events:
 
-| Event                | Type            | Description |
-| :------------------- | :-------------- | :---------- |
-| **AnimationLoaded**  | `EventHandler`  | Invoked when the animation has loaded successfully. |
-| **AnimationFailed**  | `EventHandler`  | Invoked when there was an error loading the animation. |
+| Event                   | Type            | Description |
+| :---------------------- | :-------------- | :---------- |
+| **AnimationLoaded**     | `EventHandler`  | Invoked when the animation has loaded successfully. |
+| **AnimationFailed**     | `EventHandler`  | Invoked when there was an error loading the animation. |
+| **AnimationCompleted**  | `EventHandler`  | Invoked when the animation is finished playing (after all the repeats). Infinite animations never complete so will not trigger the event. |
 
 ## Parts
 
diff --git a/samples/Maui/SkiaSharpDemo/Demos/Lottie/LottiePage.xaml b/samples/Maui/SkiaSharpDemo/Demos/Lottie/LottiePage.xaml
@@ -13,7 +13,8 @@
                                Progress="{Binding Progress}"
                                IsAnimationEnabled="{Binding IsBusy}"
                                AnimationFailed="OnAnimationFailed"
-                               AnimationLoaded="OnAnimationLoaded" />
+                               AnimationLoaded="OnAnimationLoaded"
+                               AnimationCompleted="OnAnimationCompleted" />
 
         <BoxView Color="Green" Opacity="0.5" CornerRadius="12"
                  WidthRequest="25" HeightRequest="24" Margin="24"
diff --git a/samples/Maui/SkiaSharpDemo/Demos/Lottie/LottiePage.xaml.cs b/samples/Maui/SkiaSharpDemo/Demos/Lottie/LottiePage.xaml.cs
@@ -71,4 +71,9 @@ private void OnAnimationLoaded(object sender, EventArgs e)
 	{
 		Debug.WriteLine("Lottie animation loaded.");
 	}
+
+	private void OnAnimationCompleted(object sender, EventArgs e)
+	{
+		Debug.WriteLine("Lottie animation finished playing.");
+	}
 }
diff --git a/source/SkiaSharp.Extended.UI/Controls/Lottie/SKLottieView.shared.cs b/source/SkiaSharp.Extended.UI/Controls/Lottie/SKLottieView.shared.cs
@@ -57,6 +57,12 @@ public SKLottieView()
 		ResourceLoader<Themes.SKLottieViewResources>.EnsureRegistered(this);
 
 		IsAnimationEnabled = true;
+
+#if DEBUG
+		AnimationCompleted += (s, e) => DebugUtils.LogEvent(nameof(AnimationCompleted));
+		AnimationFailed += (s, e) => DebugUtils.LogEvent(nameof(AnimationFailed));
+		AnimationLoaded += (s, e) => DebugUtils.LogEvent(nameof(AnimationLoaded));
+#endif
 	}
 
 	public SKLottieImageSource? Source
@@ -99,6 +105,8 @@ public SKLottieRepeatMode RepeatMode
 
 	public event EventHandler? AnimationLoaded;
 
+	public event EventHandler? AnimationCompleted;
+
 	protected override void Update(TimeSpan deltaTime)
 	{
 		if (animation is null)
@@ -191,6 +199,9 @@ private void UpdateProgress(TimeSpan progress)
 			IsComplete =
 				isFinishedRun &&
 				repeatsCompleted >= totalRepeatCount;
+
+			if (IsComplete)
+				AnimationCompleted?.Invoke(this, EventArgs.Empty);
 		}
 
 		if (!IsAnimationEnabled)
diff --git a/source/SkiaSharp.Extended.UI/Utils/DebugUtils.shared.cs b/source/SkiaSharp.Extended.UI/Utils/DebugUtils.shared.cs
@@ -1,5 +1,6 @@
 ﻿using System.ComponentModel;
 using System.Diagnostics;
+using System.Linq;
 
 namespace SkiaSharp.Extended.UI;
 
@@ -17,4 +18,16 @@ static void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
 			Debug.WriteLine($"PropertyChanged: {sender.GetType().Name}.{e.PropertyName} = {value}");
 		}
 	}
+
+	[Conditional("DEBUG")]
+	public static void LogMessage(string message, params object[] args)
+	{
+		Debug.WriteLine($"{message} [{string.Join(", ", args.Select(a => a?.ToString()))}]");
+	}
+
+	[Conditional("DEBUG")]
+	public static void LogEvent(string eventName, params object[] args)
+	{
+		Debug.WriteLine($"Event: {eventName}({string.Join(", ", args.Select(a => a?.ToString()))})");
+	}
 }
diff --git a/tests/SkiaSharp.Extended.UI.Tests/Controls/Lottie/SKLottieViewTest.cs b/tests/SkiaSharp.Extended.UI.Tests/Controls/Lottie/SKLottieViewTest.cs
@@ -46,6 +46,8 @@ public async Task UpdatesMoveProgress()
 		// create
 		var source = new SKFileLottieImageSource { File = TrophyJson };
 		var lottie = new WaitingLottieView { Source = source };
+		var animationCompleted = 0;
+		lottie.AnimationCompleted += (s, e) => animationCompleted++;
 		await lottie.LoadedTask;
 
 		// update
@@ -54,6 +56,7 @@ public async Task UpdatesMoveProgress()
 		// test
 		Assert.Equal(TimeSpan.FromSeconds(1), lottie.Progress);
 		Assert.False(lottie.IsComplete);
+		Assert.Equal(0, animationCompleted);
 	}
 
 	[Fact]
@@ -62,22 +65,27 @@ public async Task MultipleUpdatesMoveProgressUntilDurationMax()
 		// create
 		var source = new SKFileLottieImageSource { File = TrophyJson };
 		var lottie = new WaitingLottieView { Source = source };
+		var animationCompleted = 0;
+		lottie.AnimationCompleted += (s, e) => animationCompleted++;
 		await lottie.LoadedTask;
 
 		// update & test
 		lottie.CallUpdate(TimeSpan.FromSeconds(1));
 		Assert.Equal(TimeSpan.FromSeconds(1), lottie.Progress);
 		Assert.False(lottie.IsComplete);
+		Assert.Equal(0, animationCompleted);
 
 		// update & test
 		lottie.CallUpdate(TimeSpan.FromSeconds(1));
 		Assert.Equal(TimeSpan.FromSeconds(2), lottie.Progress);
 		Assert.False(lottie.IsComplete);
+		Assert.Equal(0, animationCompleted);
 
 		// update & test
 		lottie.CallUpdate(TimeSpan.FromSeconds(1));
 		Assert.Equal(TimeSpan.FromSeconds(2.3666665), lottie.Progress);
 		Assert.True(lottie.IsComplete);
+		Assert.Equal(1, animationCompleted);
 	}
 
 	[Fact]
@@ -86,6 +94,8 @@ public async Task UpdatesLargerThanDurationHasMax()
 		// create
 		var source = new SKFileLottieImageSource { File = TrophyJson };
 		var lottie = new WaitingLottieView { Source = source };
+		var animationCompleted = 0;
+		lottie.AnimationCompleted += (s, e) => animationCompleted++;
 		await lottie.LoadedTask;
 
 		// update
@@ -94,6 +104,7 @@ public async Task UpdatesLargerThanDurationHasMax()
 		// test
 		Assert.Equal(TimeSpan.FromSeconds(2.3666665), lottie.Progress);
 		Assert.True(lottie.IsComplete);
+		Assert.Equal(1, animationCompleted);
 	}
 
 	[Fact]
@@ -102,6 +113,8 @@ public async Task NegativeUpdatesDoesNothing()
 		// create
 		var source = new SKFileLottieImageSource { File = TrophyJson };
 		var lottie = new WaitingLottieView { Source = source };
+		var animationCompleted = 0;
+		lottie.AnimationCompleted += (s, e) => animationCompleted++;
 		await lottie.LoadedTask;
 
 		// update
@@ -110,6 +123,7 @@ public async Task NegativeUpdatesDoesNothing()
 		// test
 		Assert.Equal(TimeSpan.Zero, lottie.Progress);
 		Assert.False(lottie.IsComplete);
+		Assert.Equal(0, animationCompleted);
 	}
 
 	[Fact]
@@ -118,6 +132,8 @@ public async Task NegativeUpdatesAfterPositiveGoesBack()
 		// create
 		var source = new SKFileLottieImageSource { File = TrophyJson };
 		var lottie = new WaitingLottieView { Source = source };
+		var animationCompleted = 0;
+		lottie.AnimationCompleted += (s, e) => animationCompleted++;
 		await lottie.LoadedTask;
 
 		// update
@@ -128,6 +144,7 @@ public async Task NegativeUpdatesAfterPositiveGoesBack()
 		// test
 		Assert.Equal(TimeSpan.FromSeconds(1), lottie.Progress);
 		Assert.False(lottie.IsComplete);
+		Assert.Equal(0, animationCompleted);
 	}
 
 	[Theory]
@@ -150,6 +167,8 @@ public async Task ReachingTheEndAndThenMoreWithRepeat(SKLottieRepeatMode repeatM
 		// create
 		var source = new SKFileLottieImageSource { File = TrophyJson };
 		var lottie = new WaitingLottieView { Source = source, RepeatMode = repeatMode, RepeatCount = -1 };
+		var animationCompleted = 0;
+		lottie.AnimationCompleted += (s, e) => animationCompleted++;
 		await lottie.LoadedTask;
 
 		// update
@@ -159,6 +178,7 @@ public async Task ReachingTheEndAndThenMoreWithRepeat(SKLottieRepeatMode repeatM
 		// test
 		Assert.Equal(TimeSpan.FromSeconds(progress), lottie.Progress);
 		Assert.False(lottie.IsComplete);
+		Assert.Equal(0, animationCompleted);
 	}
 
 	[Theory]
@@ -180,6 +200,8 @@ public async Task ReachingTheEndAndThenMoreWithRepeatModeButZeroCount(SKLottieRe
 		// create
 		var source = new SKFileLottieImageSource { File = TrophyJson };
 		var lottie = new WaitingLottieView { Source = source, RepeatMode = repeatMode, RepeatCount = 0 };
+		var animationCompleted = 0;
+		lottie.AnimationCompleted += (s, e) => animationCompleted++;
 		await lottie.LoadedTask;
 
 		// update
@@ -189,5 +211,9 @@ public async Task ReachingTheEndAndThenMoreWithRepeatModeButZeroCount(SKLottieRe
 		// test
 		Assert.Equal(TimeSpan.FromSeconds(progress), lottie.Progress);
 		Assert.Equal(isComplete, lottie.IsComplete);
+		if (isComplete)
+			Assert.Equal(1, animationCompleted);
+		else
+			Assert.Equal(0, animationCompleted);
 	}
 }

Original file line number	Diff line number	Diff line change
`@@ -71,4 +71,9 @@ private void OnAnimationLoaded(object sender, EventArgs e)`
`71`	`71`	`{`
`72`	`72`	`Debug.WriteLine("Lottie animation loaded.");`
`73`	`73`	`}`
	`74`	`+`
	`75`	`+ private void OnAnimationCompleted(object sender, EventArgs e)`
	`76`	`+ {`
	`77`	`+ Debug.WriteLine("Lottie animation finished playing.");`
	`78`	`+ }`
`74`	`79`	`}`