"；通过“；在图像上忽略RenderTransform Angle属性

本文关键字：RenderTransform Angle 属性 图像 quot 通过 | 更新日期: 2023-09-27 18:21:04

我查阅了许多关于使用WPF声明性XAML格式旋转图像的来源，即这篇相当扎实的博客文章《仅使用XAML在WPF中旋转图像》，以及一个SO问题：WPF绕中心旋转图像。

因此，我的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>

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

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

这在WPF中可能吗？By属性是要使用的正确属性吗？

"；通过“；在图像上忽略RenderTransform Angle属性

没有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的详细信息，请参阅。只需尝试一些，直到你了解它们是如何工作的，并找到最适合你的动画。

我用一种完全"错误"的方式处理这个问题。这是我的解决方案，它不使用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>
相关文章：