Kreis um einen bestimmten Winkel drehen in Animation mit WPF

Question

Ich versuche, eine Animation zu erstellen, wo ich einen Kreis um bestimmte Winkel beim Übersetzen drehen möchte. (Grundsätzlich ein Rad auf einer Oberfläche rollen). Ich möchte den Drehwinkel des Rades kontrollieren. Wie erreiche ich das mit einer pro-Frame-basierten Animation?

<Window x:Class="WheelOnPath.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="1000" Width="1000" WindowState="Maximized" WindowStartupLocation="CenterScreen"> 
<Border BorderBrush="Gray" BorderThickness="1" Margin="4"> 
    <Canvas> 
     <Path > 
      <Path.Fill> 
       <LinearGradientBrush> 
        <GradientStop Color="Purple" Offset="0.5"/> 
        <GradientStop Color="LightPink" Offset="0.5"/> 
       </LinearGradientBrush> 
      </Path.Fill> 
      <Path.Data> 
       <EllipseGeometry x:Name="rotateEllipse" 
           RadiusX="90" RadiusY="90" 
           Center="100,380"> 

       </EllipseGeometry> 
      </Path.Data> 
     </Path> 
    </Canvas> 
</Border> 
</Window> 

-Code

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Media.Animation; 
using System.Windows.Media; 
using System.Windows.Shapes; 
using System.Threading; 

namespace WheelOnPath 
{ 
    public partial class MainWindow : Window 
{ 
    double time = 0, dt = 0; 
    TimeSpan lastRender = new TimeSpan(); 

    public MainWindow() 
    { 
     InitializeComponent(); 
     lastRender = TimeSpan.FromTicks(DateTime.Now.Ticks); 
     CompositionTarget.Rendering += StartRolling; 

    } 
    private void StartRolling(object sender,EventArgs e) 
    { 
     RenderingEventArgs ra = (RenderingEventArgs)e; 
     dt = (ra.RenderingTime - lastRender).TotalSeconds; 
     lastRender = ra.RenderingTime; 
     double x = rotateEllipse.Center.X + 10; 
     rotateEllipse.Center = new Point(x, rotateEllipse.Center.Y); 
     *RotateTransform rt = new RotateTransform(45); 
     rt.CenterX = 90; 
     rt.CenterY = 90; 
     rotateEllipse.Transform = rt;* 
     time += dt;  
    } 
} 
} 

Answer 1

Der Drehwinkel wird durch Dividieren des übersetzten Weg (hier in x-Richtung) durch den Radradius berechnet.

Eine einfache Möglichkeit, Translation und Rotation zu kombinieren, ist RenderTransform eine TransformGroup mit einem RotateTransform und TranslateTransform für den der Weg zu gebrauchen (statt in der Mitte des EllipseGeometry Einstellung):

<Path> 
    <Path.Fill> 
     <LinearGradientBrush> 
      <GradientStop Color="Purple" Offset="0.5"/> 
      <GradientStop Color="LightPink" Offset="0.5"/> 
     </LinearGradientBrush> 
    </Path.Fill> 
    <Path.Data> 
     <EllipseGeometry x:Name="rotateEllipse" RadiusX="90" RadiusY="90"/> 
    </Path.Data> 
    <Path.RenderTransform> 
     <TransformGroup> 
      <RotateTransform x:Name="rotateTransform"/> 
      <TranslateTransform x:Name="translateTransform" X="100" Y="100"/> 
     </TransformGroup> 
    </Path.RenderTransform> 
</Path> 

-Code hinter:

public partial class MainWindow : Window 
{ 
    private double startX; 

    public MainWindow() 
    { 
     InitializeComponent(); 

     startX = translateTransform.X; 

     CompositionTarget.Rendering += RollWheel; 
    } 

    private void RollWheel(object sender, EventArgs e) 
    { 
     translateTransform.X += 1.0; // calculate appropriate time-dependent value here 

     rotateTransform.Angle = (translateTransform.X - startX)/rotateEllipse.RadiusX 
           * 360/Math.PI; 
    } 
}