c# - 如何制作转弯动画？

Question

我想制作一个转弯动画来展示车辆在交界处转弯。另外，我想用 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();
}

完整代码

您可以在 Github 中查看我的完整代码:TrafficManagementSystem

Answer 1

有一个有趣的post其中详细说明了如何创建一个布局路径，您的对象可以在其中移动。

但在像您这样的简单场景中，您基本上只需要像 this 中描述的曲线运动 Android 的 Material 设计指南。是的......Android 的，因为我们还没有原生的曲线运动 API 支持(Windows UI 团队确实提到他们希望在未来支持这一点)。

但是，创建您自己的曲线运动并不难。事实上，许多人已经在网络上使用过这个技巧 - 在每个轴上应用缓动的相反速度。同样在您的情况下，您将希望缓动曲线清晰，以产生漂亮的转向动画。

例如，对于从左到右然后左转的汽车，您可以在 x 轴上应用具有 EaseIn 模式的 QuinticEase 和一个在 y 轴 上带有 EaseOut。要转弯车辆，只需对其应用另一个旋转动画，但要有较短的延迟和较短的持续时间，以确保转弯仅发生在十字路口。

通过稍微修改我在 this question 中的回答，你可以用下面的代码实现我上面描述的内容

AnimateTransform 辅助方法

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

运动结果

或者，您可以用新的 Composition API 替换传统的 Storyboard 动画，它提供完全可定制的缓动功能(见下文)，但想法是一样的。

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

希望这对您有所帮助!