延遲wpf動畫旋轉

Question

無論我改變什么，我都無法根據毫秒來延遲旋轉。 我想這樣做，所以每個橢圓都會稍微延遲。 您應該能夠在下面的圖像中看到3個橢圓對象，但它們彼此重疊。 有人可以幫助我實現這個功能，無論是使用Storyboard鍵，還是它可能是什么。 謝謝。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="100" Width="100">
    <Grid>     

        <!--Circles Animated-->
        <Canvas x:Name="LoadingObject" VerticalAlignment="Top" Height="20" Width="20" Background="LightGray">

            <Ellipse Height="4" Width="4" Fill="Red" RenderTransformOrigin=".5,2.5">
                <Ellipse.RenderTransform>
                    <RotateTransform/>
                </Ellipse.RenderTransform>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                    From="0" To="-360" Duration="0:0:1" RepeatBehavior="Forever">
                                    <DoubleAnimation.EasingFunction>
                                        <QuadraticEase EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>

            <Ellipse Height="4" Width="4" Fill="Blue" RenderTransformOrigin=".5,2.5">
                <Ellipse.RenderTransform>
                    <RotateTransform/>
                </Ellipse.RenderTransform>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                    From="0" To="-360" Duration="0:0:1" BeginTime="0:0:03" RepeatBehavior="Forever">
                                    <DoubleAnimation.EasingFunction>
                                        <QuadraticEase EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>

            <Ellipse Height="4" Width="4" Fill="Blue" RenderTransformOrigin=".5,2.5">
                <Ellipse.RenderTransform>
                    <RotateTransform/>
                </Ellipse.RenderTransform>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                    From="0" To="-360" Duration="0:0:1" BeginTime="0:0:06" RepeatBehavior="Forever">
                                    <DoubleAnimation.EasingFunction>
                                        <QuadraticEase EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>

        </Canvas>

    </Grid>
</Window>

Answer 1

這里的問題是你選擇了錯誤的BeginTime值。 所有的持續時間是1秒。 BeginTime不應包含1 。 否則，在一些循環之后，所有循環都將從圓圈中的同一點開始。

在你的情況下，3秒后，第二個橢圓將從與第一個橢圓相同的點開始（此時，第一個橢圓已經完成了它自己的3個循環）。 在接下來的3秒之后，第三個橢圓將與另外兩個橢圓在同一點開始（此時，第一個橢圓完成6個循環，第二個橢圓完成3個循環）。 最后所有都在同一點運行，永遠不會分開。

您可以嘗試一些較小的BeginTime ，例如00:00:01.2作為第二個橢圓， 00:00:01.4作為第三個橢圓。

Answer 2

使用單個故事板時，這通常要容易得多，因為您只需要處理一個時間軸，並且更容易看到動畫可能發生沖突的位置。 如果你想使用相同的動畫，你會做類似的事情（在Window / UserControl之類的觸發器中）：

<Storyboard>
   <DoubleAnimation Storyboard.TargetName="MyFirstObject" 
                    Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                    BeginTime="0:0:2"
                    ... />
   <DoubleAnimation Storyboard.TargetName="MySecondObject" 
                    Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                    BeginTime="0:0:3"
                    ... />
</Storyboard>

您仍然需要修復同步問題，如另一個答案中所述。

您還可以使用KeyFrames明確控制事情何時發生

<Storyboard>
   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyFirstObject" 
                    Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)">
           <EasingDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
           <EasingDoubleKeyFrame Value="360" KeyTime="0:0:2"/>
   </DoubleAnimationUsingKeyFrames>
   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MySecondObject" 
                    Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)">
           <EasingDoubleKeyFrame Value="0" KeyTime="0:0:1"/>
           <EasingDoubleKeyFrame Value="360" KeyTime="0:0:3"/>
   </DoubleAnimationUsingKeyFrames>
</Storyboard>

在這種情況下，如果你的對象將“同步”這是非常明顯的，這是非常明顯的。