WPF 旋转加载图像以获得 gif 效果答案

【问题标题】：WPF rotate an loading image for gif effectWPF 旋转加载图像以获得 gif 效果
【发布时间】：2017-10-22 03:02:06
【问题描述】：

我在 wpf 中有一个静态加载器图像，我可以通过使用 WPFAnimatedGIF nuget 包轻松地将其用作加载 gif，但这似乎有点矫枉过正。

在我的应用程序中只有一种情况我想显示忙碌指示符。

没有什么可以触发的，它是我窗口中的一个隐藏对象，在某些条件下它变得可见。因此它应该总是旋转并且看起来像一个正常的动画加载 gif。

到目前为止我已经尝试过什么

 <Image RenderTransformOrigin=".5,.5" Width="44" Height="44" Source="BusyIndicator.gif">
        <Image.RenderTransform>
            <RotateTransform Angle="45" />                
        </Image.RenderTransform>
    </Image>

我使用的图片是

【问题讨论】：

你可以使用永无止境的动画，但它是drawback。

标签： c# wpf

【解决方案1】：

当 Image 元素可见时，此样式会以 30 度的步长为 RotateTransform 的角度设置动画。

<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>

【讨论】：

【解决方案2】：

我知道这个问题已经有了答案，但有不同的方法。只需使用 ProgressBar 并将 IsIndeterminate 设置为 True：

<ProgressBar Visibility="{Binding IsBusy, Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource MaterialDesignCircularProgressBar}" IsIndeterminate="True" Width="36"/>

样式来自Material Design In XAML Toolkit。没有必要用 GIF 作为忙碌指标，我前段时间也犯过同样的错误

【讨论】：