這種風格的動畫一個RotateTransform在30個步驟的角度時,圖像元素可見。
<Style TargetType="Image" x:Key="BusyIndicatorStyle">
<Setter Property="Width" Value="44"/>
<Setter Property="Height" Value="44"/>
<Setter Property="Source" Value="BusyIndicator.png"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsVisible" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="RenderTransform.Angle">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="30"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="60"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.3" Value="90"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.4" Value="120"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.6" Value="180"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.7" Value="210"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.8" Value="240"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.9" Value="270"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:1.0" Value="300"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:1.1" Value="330"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:1.2" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
...
<Image Style="{StaticResource BusyIndicatorStyle}" />
爲了避免使用動畫與許多DiscreteDoubleKeyFrames,可以從DoubleAnimation是派生並添加Step
屬性:
public class DoubleAnimationWithSteps : DoubleAnimation
{
public static readonly DependencyProperty StepProperty = DependencyProperty.Register(
nameof(Step), typeof(double), typeof(DoubleAnimationWithSteps));
public double Step
{
get { return (double)GetValue(StepProperty); }
set { SetValue(StepProperty, value); }
}
protected override double GetCurrentValueCore(
double from, double to, AnimationClock animationClock)
{
var value = base.GetCurrentValueCore(from, to, animationClock);
if (Step > 0d)
{
value = Step * Math.Floor(value/Step);
}
return value;
}
protected override Freezable CreateInstanceCore()
{
return new DoubleAnimationWithSteps();
}
}
你會使用這樣的:
<Storyboard RepeatBehavior="Forever">
<local:DoubleAnimationWithSteps
Storyboard.TargetProperty="RenderTransform.Angle"
Duration="0:0:1.2" To="360" Step="30"/>
</Storyboard>
您可以使用永不結束的動畫,但它有[缺點](https://www.codeproject.com/Articles/ 49853 /更好-WPF的圓形進度條)。 – Funk