WPF旋转加载图像以产生gif效果 [英] WPF rotate an loading image for gif effect

问题描述

我在wpf中有一个静态加载器图像，我可以通过使用WPFAnimatedGIF nuget包轻松地将其用作加载gif，但这似乎是一个过大的选择.

I have a static loader image in wpf, I can easily use it as a loading gif by using WPFAnimatedGIF nuget package, but it seems like an overkill.

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

There is only one scenario in my application where I want to display a busy indicator.

没有什么可触发的，它是我窗口中的一个隐藏对象，在某些情况下它变为可见.因此，它应该始终旋转并看起来像普通的动画加载gif.

There is nothing to trigger, it is a hidden object in my window and upon certain condition it becomes visible. Thus it should always rotate and appear like a normal animated loading gif.

到目前为止我尝试过的

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

我正在使用的图片是

推荐答案

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

This Style animates the Angle of a RotateTransform in 30 degree steps when the Image element is visible.

<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}" />

---

为了避免使用带有许多DiscreteDoubleKeyFrame的动画，可以从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>

这篇关于WPF旋转加载图像以产生gif效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！