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