C# 如何创建转弯动画？

我想制作一个转弯动画来显示车辆在交叉路口转弯。另外，我想用c#（代码隐藏）来实现这一点，因为我的车辆是动态添加的

已尝试解决方案：

我尝试使用TranslateTransform和RotateTransform，但我只能创建急转弯动画。我想创建一个平滑转弯动画

电流输出：

示例代码

//Code to add car
private void Click1_Click(object sender, RoutedEventArgs e)
{
    var myCar = new Image()
    {
        Source = new BitmapImage(new Uri("ms-appx:///Assets/RedCar.png")),
        Width = 140,
        Height = 65,
        HorizontalAlignment = HorizontalAlignment.Left,
        VerticalAlignment = VerticalAlignment.Top,
        RenderTransform = new TranslateTransform()
        {
            X = 0,
            Y = actualHeight / 2 - 145
        }
    };
    VehicleGrid.Children.Add(myCar);
}

//Code to create forward animation
private void MoreForward(UIElement element)
{
    Storyboard storyboard = new Storyboard();

    DoubleAnimation doubleAnimation = new DoubleAnimation()
    {
        Duration = new Duration(new TimeSpan(0, 0, 3)),
        To = LeftRoad.ActualWidth - 140
    };

    Storyboard.SetTarget(doubleAnimation, element.RenderTransform);
    Storyboard.SetTargetProperty(doubleAnimation, "X");
    storyboard.Children.Add(doubleAnimation);

    storyboard.Begin();
}

完整代码

//Code to add car
private void Click1_Click(object sender, RoutedEventArgs e)
{
    var myCar = new Image()
    {
        Source = new BitmapImage(new Uri("ms-appx:///Assets/RedCar.png")),
        Width = 140,
        Height = 65,
        HorizontalAlignment = HorizontalAlignment.Left,
        VerticalAlignment = VerticalAlignment.Top,
        RenderTransform = new TranslateTransform()
        {
            X = 0,
            Y = actualHeight / 2 - 145
        }
    };
    VehicleGrid.Children.Add(myCar);
}

//Code to create forward animation
private void MoreForward(UIElement element)
{
    Storyboard storyboard = new Storyboard();

    DoubleAnimation doubleAnimation = new DoubleAnimation()
    {
        Duration = new Duration(new TimeSpan(0, 0, 3)),
        To = LeftRoad.ActualWidth - 140
    };

    Storyboard.SetTarget(doubleAnimation, element.RenderTransform);
    Storyboard.SetTargetProperty(doubleAnimation, "X");
    storyboard.Children.Add(doubleAnimation);

    storyboard.Begin();
}

您可以在Github中看到我的完整代码：

有一个有趣的例子，详细介绍了如何创建一个布局路径，让您的对象可以在其中移动

但在像你这样的简单场景中，你基本上只需要一个弯曲的运动，就像Android的材质设计指南中描述的那样。是 啊Android的，因为我们还没有原生的弯曲运动API支持（Windows UI团队确实提到，他们希望在将来支持这一点）

但是，创建自己的曲线运动并不太困难。事实上，许多人已经在网络上使用了这个技巧——在每个轴上应用相反的放松速度。同样在您的情况下，您将希望缓和曲线是尖锐的，以便生成一个漂亮的转弯动画

例如，对于从左向右行驶然后左转的汽车，您可以在x轴上应用带

EaseIn

模式的

QuinticEase

，在y轴上应用带

EaseOut

模式。要转向车辆，只需对其应用另一个旋转动画，但延迟较短，持续时间较短，以确保转向仅发生在十字路口

通过在中稍微修改我的答案，您可以使用以下代码实现我上面描述的内容

AnimateTransform

helper方法

public static void AnimateTransform(this UIElement target, string propertyToAnimate, Orientation? orientation, double? from, double to, int duration = 3000, int startTime = 0, EasingFunctionBase easing = null)
{
    if (easing == null)
    {
        easing = new ExponentialEase();
    }

    var transform = target.RenderTransform as CompositeTransform;
    if (transform == null)
    {
        transform = new CompositeTransform();
        target.RenderTransform = transform;
    }
    target.RenderTransformOrigin = new Point(0.5, 0.5);

    var db = new DoubleAnimation
    {
        To = to,
        From = from,
        EasingFunction = easing,
        Duration = TimeSpan.FromMilliseconds(duration)
    };
    Storyboard.SetTarget(db, target);

    var axis = string.Empty;
    if (orientation.HasValue)
    {
        axis = orientation.Value == Orientation.Horizontal ? "X" : "Y";
    }
    Storyboard.SetTargetProperty(db, $"(UIElement.RenderTransform).(CompositeTransform.{propertyToAnimate}{axis})");

    var sb = new Storyboard
    {
        BeginTime = TimeSpan.FromMilliseconds(startTime)
    };

    sb.Children.Add(db);
    sb.Begin();
}

创建转弯动画

MyCar.AnimateTransform("Translate", Orientation.Horizontal, null, -600, duration: 3000, easing: new QuinticEase
{
    EasingMode = EasingMode.EaseIn
});
MyCar.AnimateTransform("Translate", Orientation.Vertical, null, -600, duration: 3000, easing: new QuinticEase
{
    EasingMode = EasingMode.EaseOut
});
MyCar.AnimateTransform("Rotation", null, null, -90, duration: 2000, startTime: 500);

导致运动


或者，您可以使用新的合成API替换传统的故事板动画，该API提供完全可定制的放松功能（见下文），但想法是相同的

public static CubicBezierEasingFunction EaseOutExpo(this Compositor compositor) =>
    compositor.CreateCubicBezierEasingFunction(new Vector2(0.14f, 1f), new Vector2(0.34f, 1f));

希望这有帮助
 您可以按照路径：@Aybe我认为路径动画在UWPI中不可用，一次将有20多辆汽车。每辆车都将按自己的路线行驶。在这种情况下，使用传统情节提要是否会降低性能？不，
情节提要
已经非常高效且性能良好。20辆车真的没什么。我正在测试你的代码。我会在测试后打分作为答案。另外，还有一个问题，我们能用它来实现吗？我认为EA不适合这种情况。干得好。：）是，helper方法依赖于一个
CompositeTransform
实例。