原文: WPF Blend 一個動畫結束後另一個動畫開始執行(一個一個執行)
先說明思路:一個故事版Storyboard,兩個雙精度動畫幀DoubleAnimation。
一個一個執行的原理:控制動畫開始時間(例如第一個動畫用時2秒,第二個動畫就第2秒起開始執行。)
XAML:
<!--#region 動畫1-->
<!--#region Border-->
<Border x:Name="border" BorderBrush="Black" BorderThickness="0" Margin="9.333,8.852,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Height="84.814" VerticalAlignment="Top" Width="84.814">
<Image x:Name="image" Source="Images\u10433.png"/>
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<!--#endregion-->
<!--#region border-->
<Border BorderBrush="Black" BorderThickness="0" HorizontalAlignment="Left" Height="100" Margin="1.555,1.074,0,0" VerticalAlignment="Top" Width="100">
<Image x:Name="img_FanRotate" Source="Images\u10482.png" RenderTransformOrigin="0.5,0.5" d:IsHidden="True">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<!--#endregion-->
<!--#region border-->
<Border BorderBrush="Black" BorderThickness="0" HorizontalAlignment="Left" Height="100" Margin="1.555,1.074,0,0" VerticalAlignment="Top" Width="100">
<Image Source="Images\u10435.png" RenderTransformOrigin="0.5,0.5" Width="30" Height="30"/>
</Border>
<!--#endregion-->
<Button x:Name="button" Content="暫停" HorizontalAlignment="Right" Margin="0,102.926,178.407,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
<Button x:Name="button1" Content="開始/繼續" Margin="0,156.629,178.407,145.683" Click="button1_Click" HorizontalAlignment="Right" Width="75" d:LayoutOverrides="Height"/>
<Button x:Name="button2" Content="停止" HorizontalAlignment="Right" Margin="0,0,178.407,97.609" VerticalAlignment="Bottom" Width="75" Click="button2_Click"/>
<Button x:Name="button3" Content="開始" HorizontalAlignment="Right" Margin="0,54.778,178.407,0" VerticalAlignment="Top" Width="75" Click="button3_Click"/>
<!--#endregion-->
背景代碼:
#region 建立故事版
//建立一個故事版
Storyboard storyboard = new Storyboard();
private void CreateStoryboard()
{
//定義動畫1運作時間==動畫2等待時間
TimeSpan ts = new TimeSpan(0, 0, 1);
#region 建立第一個動畫
DoubleAnimation doubleAnimation = new DoubleAnimation();
//目标角度
doubleAnimation.To = 360;
//結束時間
doubleAnimation.Duration = new Duration(ts);
Storyboard.SetTarget(doubleAnimation, img_FanRotate);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"));
storyboard.Children.Add(doubleAnimation);
#endregion
#region 建立第二個動畫
DoubleAnimation doubleAnimation2 = new DoubleAnimation();
//目标角度
doubleAnimation2.To = 360;
//設定等待時間
doubleAnimation2.BeginTime = ts;
//結束時間
doubleAnimation2.Duration = new Duration(new TimeSpan(0, 0, 1));
//故事版中設定目标
Storyboard.SetTarget(doubleAnimation2, img_FanRotate2);
//故事版中設定屬性路徑
Storyboard.SetTargetProperty(doubleAnimation2, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"));
//将動畫添加至故事版末尾
storyboard.Children.Add(doubleAnimation2);
#endregion
//開始故事版
//storyboard.Begin();
}
#endregion
#region 按鈕
//開始
private void button3_Click(object sender, RoutedEventArgs e)
{
storyboard.Begin(img_FanRotate, true);
storyboard.Begin(img_FanRotate2, true);
}
//暫停
private void button_Click(object sender, RoutedEventArgs e)
{
storyboard.Pause(img_FanRotate);
storyboard.Pause(img_FanRotate2);
}
//繼續
private void button1_Click(object sender, RoutedEventArgs e)
{
storyboard.Resume(img_FanRotate);
storyboard.Resume(img_FanRotate2);
}
//停止
private void button2_Click(object sender, RoutedEventArgs e)
{
storyboard.Stop(img_FanRotate);
storyboard.Stop(img_FanRotate2);
}
#endregion