Rotate image before animation

Question

Hello,
I'm trying to learn magic of animation at WPF and found this problem:

Let's see we have image like this: "^"
To rotate it around point (x, y) I'm using this code:

RotateTransform rt = new RotateTransform();

DoubleAnimation da = new DoubleAnimation();

da.From = 0;
da.To = 360;
da.Duration = new Duration(TimeSpan.FromSeconds(10));
da.RepeatBehavior = RepeatBehavior.Forever;
image.RenderTransformOrigin = new Point(x, y);
image.RenderTransform = rt;
rt.BeginAnimation(RotateTransform.AngleProperty, da);

Now I would like to animate a rotation of this element, but first it should be rotated 90 clock to ">".
How to do that?

Answer 1

Hi,
you can use Storyboard with 2 Timelines like in following demo:

<Window x:Class="WpfApp042.Window042"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:WpfApp042"  
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"  
        mc:Ignorable="d"  
        Title="Rotate" Height="450" Width="800" Loaded="Window_Loaded">  
  <Grid>  
    <Canvas>  
      <Polygon x:Name="image" Points="20, 40 30, 10 40, 40" StrokeThickness="2" Stroke="Black"/>  
    </Canvas>  
  </Grid>  
</Window>  

CodeBehind:

using System;  
using System.Windows;  
using System.Windows.Media;  
using System.Windows.Media.Animation;  
  
namespace WpfApp042  
{  
  /// <summary>  
  /// Interaction logic for Window042.xaml  
  /// </summary>  
  public partial class Window042 : Window  
  {  
    public Window042()  
    {  
      InitializeComponent();  
    }  
  
    private void Window_Loaded(object sender, RoutedEventArgs e)  
    {  
      double x = .75;  
      double y = 1.0;  
  
      Storyboard sb = new Storyboard();  
      RotateTransform rt = new RotateTransform();  
      NameScope.SetNameScope(this, new NameScope());  
      this.RegisterName("rotateTransform", rt);  
      image.RenderTransformOrigin = new Point(x, y);  
      image.RenderTransform = rt;  
  
      DoubleAnimation da1 = new DoubleAnimation(0, 90, new Duration(TimeSpan.FromSeconds(1.0)));  
      sb.Children.Add(da1);  
      Storyboard.SetTargetName(da1, "rotateTransform");  
      Storyboard.SetTargetProperty(da1, new PropertyPath(RotateTransform.AngleProperty));  
  
      DoubleAnimation da2 = new DoubleAnimation(90, 360, new Duration(TimeSpan.FromSeconds(3.0)))  
      {  
        BeginTime = new TimeSpan(0, 0, 5)  
      };  
      sb.Children.Add(da2);  
      Storyboard.SetTargetName(da2, "rotateTransform");  
      Storyboard.SetTargetProperty(da2, new PropertyPath(RotateTransform.AngleProperty));  
  
      sb.Begin(this);  
    }  
  }  
}  

Result:

Answer 2

I rotate the image with animation with below code:

RotateTransform rtf = new RotateTransform();  
            image.RenderTransform = rtf;  
            image.RenderTransformOrigin = new Point(0.5, 0.5);  
            DoubleAnimation da = new DoubleAnimation();  
            da.From = 0;  
            da.To = 90;  
            da.Duration = TimeSpan.FromSeconds(1);  
            Storyboard storyboard = new Storyboard();  
            storyboard.Children.Add(da);  
            Storyboard.SetTarget(da, image);  
            Storyboard.SetTargetProperty(da, new PropertyPath("RenderTransform.Angle"));  
            storyboard.Begin();  

If you want rotate image without anmiation, you can use below code:

     image.RenderTransformOrigin = new Point(0.5, 0.5);  
     image.RenderTransform = new RotateTransform(90);  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.