Rotate image before animation

PL_Andrev 1 Reputation point
2021-04-12T05:55:34.96+00:00

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?

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,191 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
7,025 questions
{count} votes

2 answers

Sort by: Most helpful
  1. DaisyTian-1203 11,506 Reputation points
    2021-04-12T09:39:33.043+00:00

    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.

    No comments

  2. Peter Fleischer (former MVP) 17,576 Reputation points
    2021-04-12T10:33:40.31+00:00

    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:

    86936-x.gif

    No comments