如何根据 BindableProperty 更改、MVVM 样式创建 FadeTo() 动画？答案

【问题标题】：How to create a FadeTo() animation based on BindableProperty change, MVVM style?如何根据 BindableProperty 更改、MVVM 样式创建 FadeTo() 动画？
【发布时间】：2019-09-26 16:29:02
【问题描述】：

假设我有一个视图，其中包含一个<Image> 元素，根据它在视图模型中是否具有非空属性而可见。像这样：

<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 变为 false，并立即使 <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 被立即删除，渲染图像为空且不可见，因此淡出动画甚至无法启动。

基于可绑定属性值更改创建动画的好方法是什么？

【问题讨论】：

标签： c# xamarin mvvm xamarin.forms

【解决方案1】：

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

我要做的是从Image 继承并创建FadableImage，并使用类似于VisibilityHelper 的可绑定属性。然后，当您为其分配值时，图像仍然可见，您可以以您已经执行的方式启动动画。最后，当动画完成时，您应该检查VisibilityHelper 的值，如果仍然相同，请将IsVisible 设置为适当的值。

【讨论】：

我希望有一种更简单的方法来做到这一点，只是我不知道。但是，是的，这就是我最终不得不走的路。谢谢你:)