question

PLAndrev-4800 avatar image
0 Votes"
PLAndrev-4800 asked DaisyTian-1203 commented

Rotate image before animation

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?

dotnet-csharpwindows-wpf
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@PLAndrev-4800
May I know if you have got any chance to check below answers? Do they solve your issue?

0 Votes 0 ·
DaisyTian-1203 avatar image
1 Vote"
DaisyTian-1203 answered

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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

PeterFleischer-3316 avatar image
0 Votes"
PeterFleischer-3316 answered PeterFleischer-3316 edited

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



x.gif (102.3 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.