WPFを使用してアニメーションで特定の角度で円を回転

Question

翻訳中に特定の角度で円を回転させたいアニメーションを作成しようとしています（基本的に、サーフェス上でホイールが回転するように作成する）。私は車輪の回転角を制御したい。どのようにフレーム毎のアニメーションを使ってこれを達成するのですか？

<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> 

コードは

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

回転角度は、車輪半径によって（ここでx方向に）平行移動経路を分割することによって計算されます。

<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> 

コードの背後にある：

移動と回転を組み合わせるための簡単な方法は、RotateTransformとTransformGroupとパスのRenderTransform（代わりにEllipseGeometryの中心を設定する）ためのTranslateTransformを使用することです

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; 
    } 
}