图像上忽略的“按”RenderTransform 角度属性答案

【问题标题】："By" RenderTransform Angle Property Ignored on Image图像上忽略的“按”RenderTransform 角度属性
【发布时间】：2015-11-07 01:56:42
【问题描述】：

我咨询了许多关于使用 WPF 的声明性 XAML 格式旋转图像的资源，即这篇非常可靠的博客文章 Rotate an Image in WPF Using Just XAML 和一个 SO 问题：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 属性指定。我正在尝试将图像的特定部分旋转到每个动画的特定象限。

答案，https://stackoverflow.com/a/23699219/3469725，接近我所需要的；但是，图像会旋转一次，并且不会连续动画。

这对于 WPF 是否可行？By 属性是否是要使用的正确属性？

【问题讨论】：

标签： c# wpf xaml rotation

【解决方案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的信息。尝试一些，直到您了解它们的工作原理并找到最适合您的动画。

【讨论】：

你能演示一下缓动功能吗？我正在寻找如何踩，是的。
这很简单，见编辑。我喜欢我自己ElasticEase（弹簧般的效果）。
不只是设置“By”将动画重置到动画后的原始位置吗？
不。当您不能/不想指定To 时使用By。您必须阅读有关动画的更多信息。完成的动画（除非被移除）可以保持最后一个值或不保持。阅读此here。但在这种情况下，动画是不确定的。顺便说一句，0° = 360° = 720° = ...直到int32.MaxValue。我不会担心溢出（如果你决定使用By）。
感谢您的帮助！谢谢你。我发现了一些更接近我正在寻找的东西（我已经发布了作为答案）。不过，我会 +1 你的答案。

【解决方案2】：

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

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

【讨论】：