WPF Blend 一个动画结束后另一个动画开始执行(一个一个执行)

简介: 原文:WPF Blend 一个动画结束后另一个动画开始执行(一个一个执行)先说明思路:一个故事版Storyboard,两个双精度动画帧DoubleAnimation。 一个一个执行的原理:控制动画开始时间(例如第一个动画用时2秒,第二个动画就第2秒起开始执行。
原文: 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

 

目录
相关文章
|
1月前
|
C#
WPF中动画教程(DoubleAnimation的基本使用)
WPF中动画教程(DoubleAnimation的基本使用)
48 0
|
19天前
|
C# UED 开发者
WPF与性能优化:掌握这些核心技巧,让你的应用从卡顿到丝滑,彻底告别延迟,实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法,详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈,如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着,通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画,从而有效提升应用性能。通过这些优化措施,WPF应用将更加流畅,用户体验也将得到显著改善。
47 0
|
19天前
|
C# UED 开发者
WPF动画大揭秘:掌握动画技巧,让你的界面动起来,告别枯燥与乏味!
【8月更文挑战第31天】在WPF应用开发中,动画能显著提升用户体验,使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法,包括平移、缩放、旋转等常见类型,并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外,还将介绍动画触发器的使用,帮助开发者更好地控制动画效果,提升应用的吸引力。
41 0
|
1月前
|
存储 C# 数据格式
WPF动画教程(PointAnimationUsingPath的使用)
WPF动画教程(PointAnimationUsingPath的使用)
24 0
|
4月前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放,可沿X或Y轴调整。在故事板中,通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性,并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时,EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后,展示了如何将动画集成到自定义按钮样式中。
112 0
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
195 0
|
API C# 索引
WPF中的动画——(一)基本概念
原文:WPF中的动画——(一)基本概念 WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面。首先,我们来复习一下动画的基本概念。计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生动画效果。
1066 0
|
C# 测试技术
WPF中的动画——(二)From/To/By 动画
原文:WPF中的动画——(二)From/To/By 动画 我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画:     var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.
994 0
|
算法 C#
WPF中的动画——(五)关键帧动画
原文:WPF中的动画——(五)关键帧动画 与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值。 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个状态之间变化,例如,对于前面那个改变按钮宽度的例子,如果我们要实现如下效果: 在2秒时将宽度从 0变为350 在7秒时将宽度变为50 在9秒的时候将其宽度变为200 虽然我们可以用三个From/To/By 动画组合实现类似效果,但是这样一来麻烦,二来要感知动画完成事件,不方便在XAML中使用。
1364 0
|
C#
WPF中的动画——(四)缓动函数
原文:WPF中的动画——(四)缓动函数 缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样。它们一般应用在From/To/By动画上,可以使得其动画更加平滑。     var widthAnimation = new DoubleAnimation()    {    ...
957 0