WPF中轻量级处理动画资源？

Question

我创建了一个类似于 Chrome 浏览器选项卡上看到的循环处理动画...我想在整个应用程序中使用它，因此决定将其作为资源...但是...我想知道什么是在我的应用程序中轻松使用此动画资源的最佳方法/实践...下面是我处理动画的 xaml 代码。 它应该用作 DataTemplate 还是 ControlTemplate？

<Grid>
<Grid.Resources>
  <Storyboard x:Key="LoadingAnimation" RepeatBehavior="Forever">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(c:Arc.EndAngle)" Storyboard.TargetName="arc">
    <EasingDoubleKeyFrame KeyTime="0" Value="90"/>
    <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-90"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-270"/>
  </DoubleAnimationUsingKeyFrames>
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(c:Arc.StartAngle)" Storyboard.TargetName="arc">
    <EasingDoubleKeyFrame KeyTime="0" Value="-90"/>
    <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-270"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-450"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Triggers>
  <EventTrigger RoutedEvent="FrameworkElement.Loaded">
  <BeginStoryboard Storyboard="{StaticResource LoadingAnimation}"/>
</EventTrigger>
</Grid.Triggers>

<c:Arc x:Name="arcbackground" StartAngle="0" EndAngle="359.9"  Stroke="#FFE0E0E0"  StrokeThickness="8"/>
<c:Arc x:Name="arc" Stroke="{StaticResource BlueGradientBrush}"  StrokeThickness="8"/>

Answer 1

几天前我需要类似的东西。我将故事板和要动画的元素放在用户控件中。我添加了一个依赖属性，以便能够通过投标启动/停止动画。剩下的就是在应用程序中任何需要的地方使用用户控件。

我的 XAML 如下所示：

<UserControl x:Class="MyAssembly.SpinningWait"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:core="clr-namespace:MyAssembly">
    <UserControl.Resources>
        <Storyboard x:Key="canvasAnimation">
            <DoubleAnimationUsingKeyFrames
               RepeatBehavior="Forever"
               SpeedRatio="24"
               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
               Storyboard.TargetName="canvas">
                <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="45"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="90"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:6" Value="135"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="180"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:10" Value="225"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:12" Value="270"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:14" Value="315"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:16" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <core:RadialPanel x:Name="canvas" RenderTransformOrigin="0.5,0.5">
        <core:RadialPanel.Resources>
            <Style TargetType="Ellipse">
                <Setter Property="Height" Value="6" />
                <Setter Property="Width" Value="6" />
                <Setter Property="Fill" Value="White" />
            </Style>
        </core:RadialPanel.Resources>

        <core:RadialPanel.RenderTransform>
            <TransformGroup>
                <RotateTransform/>
            </TransformGroup>
        </core:RadialPanel.RenderTransform>

        <Ellipse />
        <Ellipse Opacity="0.1" />
        <Ellipse Opacity="0.2" />
        <Ellipse Opacity="0.3" />
        <Ellipse Opacity="0.4" />
        <Ellipse Opacity="0.5" />
        <Ellipse Opacity="0.6" />
        <Ellipse Opacity="0.7" />
    </core:RadialPanel>
</UserControl>

及其隐藏代码：

public partial class SpinningWait : UserControl
{
    private Storyboard _storyboard;

    public SpinningWait()
    {
        InitializeComponent();
    }

    public bool IsWaiting
    {
        get { return (bool)GetValue(IsWaitingProperty); }
        set { SetValue(IsWaitingProperty, value); }
    }

    public static readonly DependencyProperty IsWaitingProperty =
        DependencyProperty.Register("IsWaiting", typeof(bool), typeof(SpinningWait), new UIPropertyMetadata(false, new PropertyChangedCallback(OnIsWaitingChanged)));


    private static void OnIsWaitingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((SpinningWait)d).OnIsWaitingChanged((object)d, e);
    }

    private void OnIsWaitingChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        if (IsWaiting)
        {
            this.Visibility = Visibility.Visible;
            this.StartAnimation();
        }
        else
        {
            this.Visibility = Visibility.Collapsed;
            this.StopAnimation();
        }
    }

    private void StartAnimation()
    {
        this._storyboard = (Storyboard)FindResource("canvasAnimation");
        this._storyboard.Begin(canvas, true);
    }

    private void StopAnimation()
    {
        this._storyboard.Remove(canvas);
    }
}