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方向）除以车轮半径来计算旋转角度。

结合翻译和轮播的简单方法是使用TransformGroup RotateTransform和TranslateTransform作为路径RenderTransform（而不是设置中心EllipseGeometry）：

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

代码背后：

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

使用WPF在动画中按特定角度旋转圆圈

1 个答案: