"By" RenderTransform Angle 属性在图像上被忽略

Question

我参考了很多关于使用 WPF 的声明性 XAML 格式旋转图像的资源，即这个非常可靠的博客 post、Rotate an Image in WPF Using Just XAML, and an SO question: wpf rotate image around center。

因此，我的 XAML - 是旋转图像 - 看起来像这样：

<UserControl.Resources>
        <Style x:Key="Spinner" TargetType="Image">
            <Setter Property="Image.RenderTransform">
                <Setter.Value>
                    <RotateTransform CenterX="13" CenterY="13" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                        Storyboard.TargetProperty="RenderTransform.Angle"
                                        By="90"
                                        To="360"
                                        Duration="0:0:4"
                                        RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

我遇到的问题是旋转看起来流畅且连续，而不是 90 度。由 By 属性指定。我试图将图像的特定部分旋转到每个动画的特定象限。

答案接近我需要的；但是，图像旋转一次并且不会连续动画。

WPF 可以做到这一点吗？By 属性是正确的属性吗？

Answer 1

没有 To + By 组合（至少 DoubleAnimation）。

不太清楚您的期望。您有初始值（例如 0）并设置 Duration 和 To，这足以计算动画将如何改变角度值。 By 无意义无视你将设置的值。

如果您需要某种步，那么您必须使用一系列快速动画来完成：旋转 90°，等待（或使用缓动功能），再旋转 90° °等

<Storyboard RepeatBehavior="Forever" >
    <DoubleAnimation To="90" Duration="0:0:1" ... >
        <DoubleAnimation.EasingFunction>
            <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="1.8" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
    ... more animations to rotate for 360 degrees if steps need different animation
    ... otherwise use `By` (without `To`) and repeat above animation it indefinitely
</Storyboard>

有关 easing functions 的更多信息，请参阅。尝试一些直到您了解它们的工作原理并找到最适合您的动画。

Answer 2

我完全以 "wrong" 的方式处理这个问题。这是我的解决方案，它不是使用 DoubleAnimation XAML 属性，而是 DoubleAnimationUsingKeyFrames - 一种完全不同的方法.对于我正在尝试做的事情 - 旋转 90 度。 intervals - 这是一个简单的解决方案，不需要使用缓动并提供更多 "snapping" 效果。

<Style.Triggers>
    <Trigger Property="IsEnabled" Value="True">
        <Trigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames
                                    Storyboard.TargetProperty="RenderTransform.Angle"
                                    Duration="0:0:4"
                                    RepeatBehavior="Forever">
                        <DoubleKeyFrameCollection>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="180"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="270"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="360"/>
                        </DoubleKeyFrameCollection>
                   </DoubleAnimationUsingKeyFrames>
               </Storyboard>
          </BeginStoryboard>
      </Trigger.EnterActions>
  </Trigger>
</Style.Triggers>

"By" RenderTransform Angle 属性在图像上被忽略

"By" RenderTransform Angle Property Ignored on Image

c#

wpf

xaml

rotation

"By" RenderTransform Angle 属性 在图像上被忽略

"By" RenderTransform Angle Property Ignored on Image

c#

wpf

xaml

rotation

"By" RenderTransform Angle 属性在图像上被忽略