延遲WPF動畫旋轉

Question

不管我怎麼改變我不能讓旋轉基於毫秒的延遲。我想讓它每個橢圓稍微延遲一點。您應該能夠在下面的圖像中看到3個橢圓對象，但它們都相互重疊。有人可以幫助我得到這個工作，無論它是否與故事板鍵，無論它可能。謝謝。

<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秒鐘後，第三個橢圓將與其他2個點在同一點開始（此時，第一個橢圓完成6個週期，第二個完成3個週期）。最後，所有人都在同一點運行，永遠不會分開。

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

Answer 2

這使用單個故事板的時候，你只需要對付一個時間表和更容易看到的動畫可能會發生衝突，通常是一個容易得多。如果你想用你的同一個動畫，你會做這樣的事情（在扳機上類似的窗口/用戶控件）：

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

你仍然需要修復的同步問題，如對方回答說。

您也可以使用關鍵幀明確地控制事情時有發生

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

在這種情況下，如果你的對象將「保持同步」，這是相當不錯的非常明顯。