UWP 循环淡入淡出动画

Question

我有一个 Pivot，它的标题模板是一个 用户控件，我想在特定触发器上在其上启动 连续闪烁（淡出淡入）动画然后还想在特定触发器上停止它，而这两个触发器/事件都将发生在页面的 ViewModel 中。我可以处理触发器，但我唯一的问题是我不确定如何实现无限闪烁行为。当我告诉它时，标题必须开始闪烁，并且必须一直闪烁，直到我告诉它停止。我想知道 xaml 中是否有某种 Repeat 动画属性，但在 Community Toolkit

的 xaml 动画中找不到

Queue 是定义 HeaderTemplate 上下文的模型类，所以我有自定义事件来启动和停止闪烁，因为我可以在我的页面的 ViewModel 中访问该 Queue 对象实例.

所有自定义逻辑都发生在用户控件后面的代码中。附件是我在下面尝试过的代码。我希望这一切都在 xaml 中完成，或者主要在 xaml 中完成，这样我就可以避免任何无限循环或内存泄漏风险。我目前的尝试只是冻结了 UI，而且我正在做一个无限循环，这让事情变得很奇怪。

代码

透视表头

<Pivot.HeaderTemplate>
            <DataTemplate x:DataType="cad:Queue">
                <dataTemplates:HomePivotHeaderTemplate />
            </DataTemplate>
</Pivot.HeaderTemplate>

队列类

public partial class Queue
{
    public event EventHandler<EventArgs> StartFlash;
    public event EventHandler<EventArgs> StopFlash;

    public void OnStartFlash() => StartFlash?.Invoke(this, EventArgs.Empty);
    public void OnStopFlash() => StopFlash?.Invoke(this, EventArgs.Empty);
}

ViewModel 中的触发器

    public void StartFlashingPendingQueues()
    {
         PivotQueues.First()?.OnStartFlash();            
    }

    private void StopFlashingPendingQueues()
    {
         PivotQueues.First()?.OnStopFlash();
    }

数据模板的用户控件

 public sealed partial class HomePivotHeaderTemplate : UserControl
{
    public Queue VM => DataContext as Queue;
    private bool _IsFlashing;
    private bool _unLoaded;
    public HomePivotHeaderTemplate()
    {
        InitializeComponent();
        Loaded += HomePivotHeaderTemplate_Loaded;
        Unloaded += HomePivotHeaderTemplate_Unloaded;
        DataContextChanged += (s, e) => Bindings.Update();
    }

    private void HomePivotHeaderTemplate_Unloaded(object sender, RoutedEventArgs e)
    {
        _unLoaded = true;
        Loaded -= HomePivotHeaderTemplate_Loaded;
        Unloaded -= HomePivotHeaderTemplate_Unloaded;
        VM.StartFlash -= VM_StartFlash;
        VM.StopFlash -= VM_StopFlash;
    }

    private void HomePivotHeaderTemplate_Loaded(object sender, RoutedEventArgs e)
    {
        VM.StartFlash += VM_StartFlash;
        VM.StopFlash += VM_StopFlash;
        VM_Flashed();
    }

    private void VM_StopFlash(object sender, System.EventArgs e) => _IsFlashing = false;

    private void VM_StartFlash(object sender, System.EventArgs e) => _IsFlashing = true;

    private async Task VM_Flashed()
    {
        while (true)
        {
            if (_unLoaded)
            {
                break;
            }
            else
            {
                if (_IsFlashing)
                {
                    await Block.Fade(value: 0f, duration: 500, delay: 0, easingType: EasingType.Linear, easingMode: EasingMode.EaseOut).Then().Fade(value: 1f, duration: 500, delay: 0, easingType: EasingType.Linear, easingMode: EasingMode.EaseIn).StartAsync();
                }
            }
        }
    }
}

编辑 1

如果我能以某种方式弄清楚如何为文本块提供无限闪烁的动画，我就可以处理剩下的事情了。基本上我可以有 2 个相同的文本块，其中一个会闪烁，其他不会，我可以根据视图模型中的触发器切换它们的可见性。

Answer 1

我想我只是想多了。这是StoryBoard

中的简单DoubleAnimation

UserControl 后面的代码

public sealed partial class HomePivotHeaderTemplate : UserControl
{
    public Queue VM => DataContext as Queue;
    public HomePivotHeaderTemplate()
    {
        InitializeComponent();
        Loaded += HomePivotHeaderTemplate_Loaded;
        Unloaded += HomePivotHeaderTemplate_Unloaded;
        DataContextChanged += (s, e) => Bindings.Update();
    }

    private void HomePivotHeaderTemplate_Unloaded(object sender, RoutedEventArgs e)
    {
        Loaded -= HomePivotHeaderTemplate_Loaded;
        Unloaded -= HomePivotHeaderTemplate_Unloaded;
        VM.StartFlash -= VM_StartFlash;
        VM.StopFlash -= VM_StopFlash;
    }

    private void HomePivotHeaderTemplate_Loaded(object sender, RoutedEventArgs e)
    {
        VM.StartFlash += VM_StartFlash;
        VM.StopFlash += VM_StopFlash;
    }

    private void VM_StopFlash(object sender, System.EventArgs e) => FlashStoryBoard.Stop();

    private void VM_StartFlash(object sender, System.EventArgs e) => FlashStoryBoard.Begin();
}

用户控件 Xaml

<UserControl.Resources>
    <Storyboard x:Name="FlashStoryBoard">
        <DoubleAnimation Storyboard.TargetName="Block" Storyboard.TargetProperty="Opacity"
            Duration="0:0:2"
            From="1"
            RepeatBehavior="Forever"
            To="0.2" />
    </Storyboard>
</UserControl.Resources>
<TextBlock x:Name="Block"
    Text="{x:Bind VM.Name}" />