[WPF]动画

最新推荐文章于 2022-02-11 19:59:19 发布

原创最新推荐文章于 2022-02-11 19:59:19 发布 · 830 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #xaml #c# #动画

wpf 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了WPF中动画的核心作用，以及如何使用C#代码和XAML声明方式创建动画。详细讲解了DoubleAnimation类型的使用，包括From、To、Duration属性，并提到了By属性的应用。同时，文章指出WPF动画的临时性质及其对属性值的影响，建议在动画完成后通过Completed事件进行处理，以保持属性值的持久变化。最后，提到了WPF动画的缓动效果实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WPF——动画

动画是wpf的核心部分，在一个应用中，添加合适的动画可以起到画龙点睛的作用。在wpf中不仅可以使用C#代码实现动画，也可以在不使用一句C#代码的前提下使用声明的方式完成一整个动画。

首先先建立一个新的项目，对窗体做如下布局

 <Button x:Name="button1" Content="Click Me " FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center" Click="button1_Click" Width="150"/>
        <Button x:Name="button2" Content="Click Me" Grid.Row="1"  HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Width="150"/>
               <Button x:Name="button3" Grid.Row="2" Content="Click Me"  FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource AnimationStyle}" Width="150"/>
        <Button x:Name="button4" Grid.Row="3" Content="Click Me To Pause" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>

1.接下来使用C#代码对button1设置一个宽度变化的动画效果

 private void button1_Click(object sender, RoutedEventArgs e)
        {
            DoubleAnimation width = new DoubleAnimation();
           
           width.From = 150;
            width.To = 500;
            width.Duration = TimeSpan.FromSeconds(5);
            button1.BeginAnimation(Button.WidthProperty, width);
            
        }

这样就完成了对动画的基本设置。

其中DoubleAnimation是一种动画类型，来自Systerm.Windows.Media.Animation命名空间，包括DoubleAnimation该命名空间含有17个“类型名+Animation”类，22个”类型名+AnimationUsingKeyFrames“类，3个”类型名+AnimationUsingPath“类，相应的个“类型名+Animation”类所实现的是线性插值动画过程，”类型名+AnimationUsingKeyFrames“类实现的是关键帧动画过程，”类型名+AnimationUsingPath“类实现的是基于路径的动画过程。

From属性表示动画开始width的初始值，To属性表示动画结束后Width的值 Duration属性是动画开始到动画结束所经过的时间。

除此之外还有一个by 属性 ,设置width.By=10相当于width.to=button1Incrementally.Width+10.

值得注意的是，wpf动画是暂时的，这就意味着他不能真正改变基本属性的值，只是简单的覆盖，所以当动画结束时，我们将不能更改基本属性的值，当然这不是我们所希望的。为了在动画完成之后，我们继续实现对基本属性的更改（在需要的时候），我们应该在动画结束后通过动画的Completed事件删除动画，手动的为基本属性赋值。

首先，在启动动画前，为Completed事件关联相应的处理事件

width.Completed += new EventHandler(Animationcompleted);

然后书写相应的处理事件就可以了

<pre class="csharp" name="code">  public void Animationcom(object sender,EventArgs e)
        {
            double currentwidth = button1.ActualWidth;
            button1.BeginAnimation(Button.WidthProperty, null);
            button1.Width = currentwidth;
        }

当引发Completed事件时，手动设置相应的属性，为动画传递一个Null的引用。

2. 使用声明的方式的主要的两个元素的故事板和事件触发器

故事板相当于BeginAnimation（）方法的等价物，事件触发器响应属性变化或事件，控制故事板。

下面使用声明的方式完成与Button1相同的动画

  <Button x:Name="button2" Content="Click Me" Grid.Row="1"  HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Width="150">
    <Button Triggers>
    <EventTrigger RouteEvent="Button.Click">
     <BeginStoryBoard>
       <DoubleAnimation  Storyboard.TargetName="button2" Storyboard.TargetProperty="Width" From="150" To="500" Duration="0:0:5"/>
      </BeginStoryBoard>
     </EventTrigger>
    </Button Triggers>
        </Button>

我们可以看出上面的代码比较繁琐，如果多个动画需要相同的效果，我们就可以使用样式来简化我们的工作量

首先，我们在Resourc中添加动画样式

 <Style x:Key="AnimationStyle">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Width" From="150" To="500" Duration="0:0:5">
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>

然后再定义button3时使用样式就可以实现与Button，Button2相同的动画效果

  <Button x:Name="button3" Grid.Row="2" Content="Click Me"  FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource AnimationStyle}" Width="150"/>

3、对动画的播放控制

wpf对故事板的控制有很多动作，目前我们只是用了BeginStoryBoard,其他的例如PauseStoryBoard可以实现动画的暂停，StopStoryBoard可以实现动画的停止等，

在声明动画时只需添加相应声明就可以完成对动画的控制

<pre class="html" name="code"> <EventTrigger RoutedEvent="Button.Click" SourceName="button4">
                <PauseStoryboard BeginStoryboardName="button2_Animation">
                </PauseStoryboard>
            </EventTrigger>

4.wpf对动画的控制还可以实现缓动的效果

在动画声明时只需添加相应的声明既可以实现

  <DoubleAnimation.EasingFunction>
                                        <ElasticEase EasingMode="EaseOut" Oscillations="10"/> 
                                    </DoubleAnimation.EasingFunction>

上面代码Oscillations表示动画跳动的次数，ElasticEase类是一个缓动效果的类，除此之外wpf还提供了其他10个的缓动效果类来丰富动画效果。