Question

我使用WPF的声明性XAML格式咨询了许多关于旋转图像的来源，即这篇非常扎实的博客文章Rotate an Image in WPF Using Just XAML和一个SO问题：{{3 }}。

结果，我的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 rotate image around center接近我的需要;但是，图像旋转一次并且不会连续动画。

这是否可以使用WPF并且By属性是正确的属性？

Answer 1

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

你的期望并不是很清楚。您有初始值（例如0）并设置了Duration和To，这足以计算动画将如何更改角度值。 By无意义地忽略了你将设定的价值。

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

<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

我正在接近这个完全错误的＃34;办法。这是我的不使用DoubleAnimation XAML属性的解决方案，而是DoubleAnimationUsingKeyFrames - 一种完全不同的方法。我试图做的 - 旋转90度。间隔 - 这是一个简单的解决方案，不需要使用缓和，并提供更多的＆＃34; snapping＆＃34;影响。

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

＆＃34;通过＆＃34;在图像上忽略RenderTransform角度属性

2 个答案: