Question

我正试图在UserControl上为Cubic Bezier Curve制作动画。这是我希望UserControl遵循的路径：

<Path Stroke="Green" StrokeThickness="1" Data="M100,500 C275,200 825,200 1100,500" />

这是我尝试使用的代码，但我只找到了一种沿直线制作动画的方法：

<Storyboard x:Name="MyAnimation">            
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ObjectTranslateTransform" Storyboard.TargetProperty="X" Duration="0:0:5">
        <LinearDoubleKeyFrame Value="1100" KeyTime="0:0:5"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ObjectTranslateTransform" Storyboard.TargetProperty="Y" Duration="0:0:5">
        <LinearDoubleKeyFrame Value="500" KeyTime="0:0:5"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

我发现的唯一一件事是关于贝塞尔曲线SplineDoubleKeyFrame。但是，即使接近我正在寻找的东西，我也无法让它工作。

我之前在WPF中使用MatrixAnimationUsingPath和DoubleAnimationUsingPath完成了此操作，但这些类在UWP中不可用。如何在UWP中沿路径设置UserObject动画？

修改这是我用于SplineDoubleKeyFrame的代码：

<Storyboard x:Name="MyAnimation">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ObjectTranslateTransform" Storyboard.TargetProperty="X" Duration="0:0:5">
        <SplineDoubleKeyFrame Value="1100" KeyTime="0:0:5" KeySpline="0.25,0.0 0.75,0.0"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ObjectTranslateTransform" Storyboard.TargetProperty="Y" Duration="0:0:5">
        <SplineDoubleKeyFrame Value="500" KeyTime="0:0:5" KeySpline="0.0,0.4 0.0,0.4"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

然而，这仅以降低的速度在水平线上移动。我不明白KeySpline应该是什么价值。

Answer 1

您在问题中已经提到过，但是自己创建贝塞尔减少功能的唯一方法是使用DoubleAnimationUsingKeyFrames通过SplineDoubleKeyFrame。

在MSDN文档中有一个很好的例子：IETF

你需要一个初始关键帧 - 所以一个基本的线性关键帧在time = 0和value = x来设置初始值。

然后SplineDoubleKeyFrame带有贝塞尔控制点，最终值和结束时间

你能发布你尝试过的代码以及结果出了什么问题吗？

如何在UWP中沿着Cubic Bezier曲线为UserControl设置动画

1 个答案: