c# - 如何创建基于 BindableProperty 变化的 FadeTo() 动画，MVVM 风格？

Question

假设我有一个 View ，带有 <Image>其中的元素，根据它在 View 模型中是否具有非 null 属性而可见。像这样:

<Image IsVisible="{Binding HasPhoto}" Source="{Binding Url}" />

有了这个 ViewModel(只复制了相关部分):

private string url {get;set;}
public string Url {
    get => url;
    set {
        url = value;
        OnPropertyChanged(nameof(HasPhoto));
        OnPropertyChanged();
    }
}

public bool HasPhoto { get => Url != null; }

在 ViewModel 的某处，我设置:Url = null .这将导致 HasPhoto 变为假，并立即渲染 <Image>元素不可见，没有空间使用 .FadeTo(0) 进行动画处理在行为中。这是我当前的行为实现:

public class FadingBehavior : Behavior<VisualElement>
{
    public uint FadeTime { get; set; } = 250;

    protected override void OnAttachedTo(VisualElement bindable)
    {
        base.OnAttachedTo(bindable);
        bindable.PropertyChanged += VisibilityMightHaveChanged;
    }

    protected override void OnDetachingFrom(VisualElement bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.PropertyChanged -= VisibilityMightHaveChanged;
    }

    private void VisibilityMightHaveChanged(object sender, PropertyChangedEventArgs args)
    {
        var element = sender as VisualElement;
        if (args.PropertyName == VisualElement.IsVisibleProperty.PropertyName)
        {
            var fadeToValue = element.IsVisible ? 1 : 0;

            element.Opacity = -fadeToValue + 1;
            element.FadeTo(fadeToValue, FadeTime);
        }
    }
}

这很好，当 <Image>变得可见，因为首先它变得可见，然后它从 0 不透明度淡出到 1。但是，对于淡出，这并不好，因为 Url 立即被删除，使图像变得空洞和不可见，所以淡出动画甚至不能开始。

基于可绑定(bind)属性值变化创建动画的好方法是什么？

Answer 1

我认为你离一个好的解决方案不远了。

我要做的是从 Image 继承并创建 FadableImage，它具有名为 VisibilityHelper 的可绑定(bind)属性。然后，当您为其分配值时，图像仍然可见，您可以按照您已经执行的方式启动动画。就在动画结束时，您应该检查 VisibilityHelper 的值，如果它仍然相同，还应将 IsVisible 设置为适当的值。