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

在这种情况下，如果你的对象将“保持同步”，这是相当不错的非常明显。