如何修复图像旋转的 DoubleAnimation？

Question

我正在尝试为我创建的事件在 EventHandler 上旋转图像。事件处理程序工作得很好。然而图像不旋转，我不知道我错过了什么。

这个UserControl不是这样显示的，而是在另一个UserControl的一个Grid中。

    <UserControl x:Class="Mabri.Module.P83.View.SchematicSystemView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:Mabri.Module.P83.View"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
        <Image x:Name="drehteller" HorizontalAlignment="Center" VerticalAlignment="Center"/>


    </UserControl>

这是 XAML 背后的代码，起初我尝试将其分开 class，如果可能的话会更好，但目前我只是在尝试得到这个运行.

  {

    private System.Windows.Controls.Image drehteller_image;
    private int currentAngle = 0;
    public SchematicSystemView()
    {
      EventAggregator.SubscribeEvent(this);
      InitializeComponent();
      drehteller_image = new System.Windows.Controls.Image()
      {
        Stretch = Stretch.Uniform,
        Source = new BitmapImage(new Uri("pack://application:,,,/Mabri.Module.P83;Component/Images/drehteller_unbestueckt.png")),
        RenderTransform = new RotateTransform()
      };
      drehteller.Source = drehteller_image.Source;

    }

    public void OnEventHandler(DrehtellerMoved e)
    {
      EventAggregator.PublishEvent(new LogInfo
      {
        Title = "Should rotate",
        Summary = "The drehteller should rotate now",
        Detail = "The drehteller should rotate " + currentAngle + " is the current angle",
        LogLevel = LogLevel.Information
      });

      int steps = e.steps;
      double timeforonestep = e.speed / e.steps;
      int angle = steps * 72;
      int angle_to_reach = currentAngle + angle;
      Storyboard storyboard = new Storyboard();
      storyboard.Duration = new Duration(TimeSpan.FromSeconds(timeforonestep * steps));
      DoubleAnimation rotateAnimation = new DoubleAnimation()
      {
        From = currentAngle,
        To = currentAngle + angle,
        Duration = storyboard.Duration
      };
      Storyboard.SetTarget(rotateAnimation, drehteller);
      Storyboard.SetTargetProperty(rotateAnimation, new PropertyPath("(UIElement.RenderTransform).(RotateTransform.Angle)"));
      storyboard.Children.Add(rotateAnimation);
      storyboard.Begin();
      currentAngle = angle_to_reach;
    }
  }

在测试用例中 e.steps 等于 1，e.speed 等于 10.0。

我预计图像会旋转 72 度，但由于某些原因，除了处理程序开头的 LogMessage 外，什么也没有发生。

Answer 1

首先，将 RotateTransform 分配给 Image 的 RenderTransform 属性。否则无法动画。

<Image x:Name="drehteller" HorizontalAlignment="Center" VerticalAlignment="Center"
       RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <RotateTransform/>
    </Image.RenderTransform>
</Image>

然后设置 From 和 To 而不是设置 By。并且直接在控件的RenderTransform

上放下Storyboard开始动画

var animation = new DoubleAnimation
{
    By = angle,
    Duration = TimeSpan.FromSeconds(...)
};

drehteller.RenderTransform.BeginAnimation(RotateTransform.AngleProperty, animation);

最后，不要创建中间图像元素。那是多余的。

drehteller.Source = new BitmapImage(new Uri("..."));

如何修复图像旋转的 DoubleAnimation？

How to fix DoubleAnimation for rotation of an image?

c#

wpf

animation

xaml

storyboard