如何在UWP中沿着Cubic Bezier曲線製作UserControl動畫

我正在嘗試沿Cubic Bezier Curve動畫UserControl。這是路徑我想要的UserControl是以下幾點：如何在UWP中沿着Cubic Bezier曲線製作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應該是什麼值。

來源

2017-09-18 FewWords

@JustinXL可能會幫助你在這 –

'KeySpline'的值是你的Bezier控制點。即KeySpline =「c1.x，c1.y，c2.x，c2.y」。在上面創建的曲線如下：http://cubic-bezier.com/#0,4,0,.4（初始速度非常快，然後減速到恆定速度）。我不知道爲什麼你的y方向不工作，除非值500是初始值，因此試圖從500到500動畫。 – user3047190

你已經在問題中提到過它，但沒有自己創建貝塞爾減函數的唯一方法是通過DoubleAnimationUsingKeyFrames使用SplineDoubleKeyFrame。

在MSDN文檔有一個很好的例子：https://docs.microsoft.com/en-us/windows/uwp/graphics/key-frame-and-easing-function-animations

你會希望有一個初始關鍵幀 - 在時間，所以一個基本的線性關鍵幀= 0和值= X設置初始值。

然後用貝塞爾控制點，價值SplineDoubleKeyFrame在你的結束時間的終值和時間

你可以發佈你已經嘗試了代碼，什麼是錯的，結果呢？

來源

2017-09-18 17:29:38 user3047190

我現在已經添加了SplineDoubleKeyFrame的代碼。所以，你說我應該結合LinearDoubleKeyFrame和SplineDoubleKeyFrame來獲得我想要的結果？我會嘗試這個，看看我是否有一些工作 – FewWords

如何在UWP中沿着Cubic Bezier曲線製作UserControl動畫

回答

相關問題