From 680ff1c60504f01b2b3612967f50a9cf3d2ba13a Mon Sep 17 00:00:00 2001 From: Jiyun Yang Date: Mon, 20 Feb 2023 14:47:18 +0900 Subject: [PATCH] [NUI] Fix Progress and improve Loading * Progress Previously, the Progress did not update the distance of the indeterminate animation on resize. * Loading Add a property that can help to set lottie animation image url. This is for using Theme. Signed-off-by: Jiyun Yang --- src/Tizen.NUI.Components/Controls/Loading.cs | 75 ++++++++++++++++++++------ src/Tizen.NUI.Components/Controls/Progress.cs | 40 ++++++++------ src/Tizen.NUI.Components/Style/LoadingStyle.cs | 21 ++++++++ 3 files changed, 104 insertions(+), 32 deletions(-) diff --git a/src/Tizen.NUI.Components/Controls/Loading.cs b/src/Tizen.NUI.Components/Controls/Loading.cs index 139cd22..8e3c94a 100755 --- a/src/Tizen.NUI.Components/Controls/Loading.cs +++ b/src/Tizen.NUI.Components/Controls/Loading.cs @@ -66,6 +66,19 @@ namespace Tizen.NUI.Components Debug.Assert(((Loading)bindable).imageVisual != null); return ((Loading)bindable).imageVisual.URLS; }); + /// The lottie resource url bindable property. + [EditorBrowsable(EditorBrowsableState.Never)] + public static readonly BindableProperty LottieResourceUrlProperty = BindableProperty.Create(nameof(LottieResourceUrl), typeof(string), typeof(Loading), null, propertyChanged: (bindable, oldValue, newValue) => + { + var instance = (Loading)bindable; + instance.RemoveImageVisual(); + instance.EnsureLottieView(newValue as string ?? string.Empty); + }, + defaultValueCreator: (bindable) => + { + var lottie = ((Loading)bindable).defaultLottieView; + return lottie == null ? string.Empty : lottie.URL; + }); /// The Size bindable property. [EditorBrowsable(EditorBrowsableState.Never)] public new static readonly BindableProperty SizeProperty = BindableProperty.Create(nameof(Size), typeof(Size), typeof(Loading), new Size(0, 0), propertyChanged: (bindable, oldValue, newValue) => @@ -98,6 +111,7 @@ namespace Tizen.NUI.Components return ((Loading)bindable).frameRate; }); + private const string ImageVisualName = "loadingImageVisual"; private AnimatedImageVisual imageVisual = null; private LottieAnimationView defaultLottieView = null; private int frameRate = (int)(1000 / 16.6f); @@ -162,6 +176,7 @@ namespace Tizen.NUI.Components /// /// Gets or sets loading image resource array. + /// The mutually exclusive with "LottieResourceUrl". /// /// 6 public string[] ImageArray @@ -172,11 +187,8 @@ namespace Tizen.NUI.Components } set { - defaultLottieView?.Stop(); - defaultLottieView?.Dispose(); - defaultLottieView = null; - - CreateImageVisual(); + RemoveLottieView(); + EnsureImageVisual(); SetValue(ImageArrayProperty, value); NotifyPropertyChanged(); @@ -201,6 +213,17 @@ namespace Tizen.NUI.Components } /// + /// Gets or sets an lottie resource url. + /// The mutually exclusive with "ImageArray". + /// + [EditorBrowsable(EditorBrowsableState.Never)] + public string LottieResourceUrl + { + get => GetValue(LottieResourceUrlProperty) as string; + set => SetValue(LottieResourceUrlProperty, value); + } + + /// /// Gets or sets loading size. /// /// 6 @@ -243,14 +266,7 @@ namespace Tizen.NUI.Components base.OnInitialize(); AccessibilityRole = Role.ProgressBar; - defaultLottieView = new LottieAnimationView() - { - URL = lottieResource, - LoopCount = -1, - }; - - Add(defaultLottieView); - defaultLottieView.Play(); + EnsureLottieView(lottieResource); AccessibilityManager.Instance.SetAccessibilityAttribute(this, AccessibilityManager.AccessibilityAttribute.Trait, "Loading"); } @@ -374,7 +390,28 @@ namespace Tizen.NUI.Components AccessibilityHighlightable = true; } - private void CreateImageVisual() + private void EnsureLottieView(string url) + { + if (defaultLottieView != null) + { + if (defaultLottieView.URL == url) return; + defaultLottieView.Stop(); + } + else Add(defaultLottieView = new LottieAnimationView() { LoopCount = -1 }); + + defaultLottieView.URL = url; + defaultLottieView.Play(); + } + + private void RemoveLottieView() + { + if (defaultLottieView == null) return; + defaultLottieView.Stop(); + defaultLottieView.Dispose(); + defaultLottieView = null; + } + + private void EnsureImageVisual() { if (imageVisual == null) { @@ -390,8 +427,16 @@ namespace Tizen.NUI.Components Size = new Size2D(1, 1) }; - AddVisual("loadingImageVisual", imageVisual); + AddVisual(ImageVisualName, imageVisual); } } + + private void RemoveImageVisual() + { + if (imageVisual == null) return; + RemoveVisual(ImageVisualName); + imageVisual.Dispose(); + imageVisual = null; + } } } diff --git a/src/Tizen.NUI.Components/Controls/Progress.cs b/src/Tizen.NUI.Components/Controls/Progress.cs index 9b0e332..07561fa 100755 --- a/src/Tizen.NUI.Components/Controls/Progress.cs +++ b/src/Tizen.NUI.Components/Controls/Progress.cs @@ -30,6 +30,8 @@ namespace Tizen.NUI.Components /// 6 public partial class Progress : Control, IAtspiValue { + private const int IndeterminateAnimationDuration = 2000; + /// /// MaxValueProperty /// @@ -621,6 +623,8 @@ namespace Tizen.NUI.Components this.size = new Vector2(size); UpdateValue(); + + if (state == ProgressStatusType.Indeterminate) UpdateIndeterminateAnimation(); } /// @@ -668,28 +672,30 @@ namespace Tizen.NUI.Components [EditorBrowsable(EditorBrowsableState.Never)] private void UpdateIndeterminateAnimation() { - indeterminateAnimation?.Stop(); + if (indeterminateImage == null) return; - if (null != indeterminateImage) + if (indeterminateAnimation == null) { - if (indeterminateAnimation == null) - { - indeterminateAnimation = new Animation(2000); - } + indeterminateAnimation = new Animation(IndeterminateAnimationDuration); + } + else + { + indeterminateAnimation.Stop(); + indeterminateAnimation.Clear(); + } - float destination = (this.SizeWidth - indeterminateImage.SizeWidth); + float destination = (this.SizeWidth - indeterminateImage.SizeWidth); - KeyFrames keyFrames = new KeyFrames(); - keyFrames.Add(0.0f /* 0%*/, new Position(0, 0)); - AlphaFunction ease = new AlphaFunction(AlphaFunction.BuiltinFunctions.EaseInOut); - keyFrames.Add(0.5f /* 50%*/, new Position(destination, 0), ease); - keyFrames.Add(1.0f /*100%*/, new Position(0, 0), ease); - ease.Dispose(); + KeyFrames keyFrames = new KeyFrames(); + keyFrames.Add(0.0f /* 0%*/, new Position(0, 0)); + AlphaFunction ease = new AlphaFunction(AlphaFunction.BuiltinFunctions.EaseInOut); + keyFrames.Add(0.5f /* 50%*/, new Position(destination, 0), ease); + keyFrames.Add(1.0f /*100%*/, new Position(0, 0), ease); + ease.Dispose(); - indeterminateAnimation.AnimateBetween(indeterminateImage, "Position", keyFrames); - indeterminateAnimation.Looping = true; - indeterminateAnimation.Play(); - } + indeterminateAnimation.AnimateBetween(indeterminateImage, "Position", keyFrames); + indeterminateAnimation.Looping = true; + indeterminateAnimation.Play(); } /// diff --git a/src/Tizen.NUI.Components/Style/LoadingStyle.cs b/src/Tizen.NUI.Components/Style/LoadingStyle.cs index 37ae5c7..7cbe9da 100755 --- a/src/Tizen.NUI.Components/Style/LoadingStyle.cs +++ b/src/Tizen.NUI.Components/Style/LoadingStyle.cs @@ -67,8 +67,18 @@ namespace Tizen.NUI.Components defaultValueCreator: (bindable) => ((LoadingStyle)bindable).images ); + /// The lottie resource url bindable property. + [EditorBrowsable(EditorBrowsableState.Never)] + public static readonly BindableProperty LottieResourceUrlProperty = BindableProperty.Create(nameof(LottieResourceUrl), typeof(string), typeof(LoadingStyle), null, propertyChanged: (bindable, oldValue, newValue) => + { + ((LoadingStyle)bindable).lottieResourceUrl = newValue as string; + }, + defaultValueCreator: (bindable) => ((LoadingStyle)bindable).lottieResourceUrl + ); + private Selector frameRate; private List images; + private string lottieResourceUrl; static LoadingStyle() { } @@ -111,6 +121,17 @@ namespace Tizen.NUI.Components } /// + /// Gets or sets an lottie resource url. + /// The mutually exclusive with "ImageArray". + /// + [EditorBrowsable(EditorBrowsableState.Never)] + public string LottieResourceUrl + { + get => GetValue(LottieResourceUrlProperty) as string; + set => SetValue(LottieResourceUrlProperty, value); + } + + /// /// Gets or sets loading image size. /// /// 8 -- 2.7.4