如何为WPF的DrawingImage添加无限循环旋转动画实现加载Spinner

有两种常用实现方式，可根据场景选择：

方法一：直接在Image控件上添加动画 #

无需修改资源字典，仅给绑定了DrawingImage的Image控件添加旋转逻辑即可：

<Image Source="{Binding Path=MySpinnerIcon}">
    <!-- 设置旋转中心为图形中心点（你的Drawing尺寸为12x12，因此中心坐标为6,6） -->
    <Image.RenderTransform>
        <RotateTransform CenterX="6" CenterY="6"/>
    </Image.RenderTransform>
    <Image.Triggers>
        <!-- 控件加载时自动启动动画 -->
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetProperty="RenderTransform.Angle"
                        From="0" To="360"
                        Duration="0:0:1" <!-- 控制旋转速度，1秒完成一圈 -->
                        RepeatBehavior="Forever"/> <!-- 无限循环 -->
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

方法二：在资源字典的DrawingImage中内置动画 #

如果希望所有引用该DrawingImage的控件都自动带有旋转效果，可直接修改资源字典中的定义，将动画内置到资源里：

<DrawingImage x:Key="ico_spinnerDrawingImage">
    <DrawingImage.Drawing>
        <DrawingGroup ClipGeometry="M0,0 V12 H12 V0 H0 Z">
            <DrawingGroup.Transform>
                <TransformGroup>
                    <!-- 保留原有的平移变换 -->
                    <TranslateTransform X="9.5367397534573684E-07" Y="1.1465158453161615E-14" />
                    <!-- 添加旋转变换，设置中心为图形中心点 -->
                    <RotateTransform x:Name="SpinnerRotateTransform" CenterX="6" CenterY="6"/>
                </TransformGroup>
            </DrawingGroup.Transform>
            <GeometryDrawing Brush="#FF00AA2B" Geometry="F1 M12,12z M0,0z M12,12C12,10.4241 11.6896,8.86371 11.0866,7.4078 10.4835,5.95189 9.59958,4.62902 8.48528,3.51472 7.37098,2.40042 6.04811,1.5165 4.5922,0.913445 3.13629,0.310389 1.57586,-6.88831E-08 -9.53674E-07,0L0,3C1.1819,3 2.35222,3.23279 3.44415,3.68508 4.53608,4.13738 5.52823,4.80031 6.36396,5.63604 7.19969,6.47177 7.86262,7.46392 8.31492,8.55585 8.76721,9.64778 9,10.8181 9,12L12,12z" />
        </DrawingGroup>
    </DrawingImage.Drawing>
    <DrawingImage.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="SpinnerRotateTransform"
                        Storyboard.TargetProperty="Angle"
                        From="0" To="360"
                        Duration="0:0:1"
                        RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </DrawingImage.Triggers>
</DrawingImage>

关键注意点 #

• 旋转中心：必须设置为图形的中心点（你的Drawing尺寸为12x12，因此CenterX和CenterY设为6），否则图形会偏离中心旋转，影响视觉效果。
• 动画速度：通过Duration属性调整旋转快慢，比如0:0:0.8表示0.8秒完成一圈，数值越小旋转越快。
• 循环设置：RepeatBehavior="Forever"确保动画无限循环，符合加载Spinner的需求。

内容的提问来源于stack exchange，提问作者Willy