WPF简单动画实例

WPF简单动画实例

WPF最吸引人的就是动画了，WPF动画是是在一定时间间隔内修改依赖属性值的一种方式，需要有支持相应数据类型的动画类；WPF动画主要分为三类：一是在开始值和结束值之间以逐步增加的方式或减少的方式改变属性的动画—线性插值动画（类型名+DoubleAnimation），第二种是从一个值突然变成另一个值得动画—关键帧动画（类型名+ AnimationUsingKeyFrames），还有一种是基于路径的动画，路径动画（类型名+ AnimationUsingPath）。

1、 在xaml中定义动画：

在xaml中定义动画，我们需要用到故事板（stotyboard）；故事板是BeginAnimation()方法的XAML等价物，通过故事板将动画指定到合适的元素和属性；故事板是增强时间线，而且具有控制动画播放、暂停、停止等权利；要使用动画就需要用到故事板的附加属性TargetProperty—要实现动画元素的属性，TargetName元素名称Name，From 表示改变的处始值，To表示改变的结束值，Duration表示动画执行总时间（格式 0:0:0），下面就是一个简单的故事板实现动画，代码如图：

<Window x:Class="Wpf久久.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="500">
    <!--资源-->
    <Window.Resources>
        <!--故事板-->
        <Storyboard x:Key="storyboard1" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="exampleAnimation" Storyboard.TargetProperty="Width" From="200" To="400" Duration="0:0:4">
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <!--触发器-->
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard Storyboard="{StaticResource storyboard1}"></BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
      <!--矩形-->
        <Rectangle x:Name="exampleAnimation" Width="200" Height="100" Fill="Red"></Rectangle>
    </Grid>
</Window>

如图我作了一个矩形，定义了它的样式属性；然后我又在资源内定义了故事版，在故事板元素上要定义x:Key，我在storyboard里面定义了一个RepeatBehavior=“Forever”的属性，让动画循环播放；接着还要定义事件触发器EventTrigger，触发故事板动画；RotedEvent属性是路由事件，我这里写的Window.Loaded是窗体加载完成时事件触发，也就是当我的项目启动完成时，我的动画就开始运动了而BeginStoryboard相当于就是故事板的开关了吧，在里面调用故事板就可以实现对应的动画了；

2、 在C#中实现动画

有时候我们不一定要在故事版中实现我们的动画，WPF在C#中同样为我们封装了系统动画类，我们实例化它们就可以对其进行使用了，下面我来展示一个简单的例子吧!
首先在xaml里定义好一个按钮，通过按钮单击事件来触发动画代码如下：

<Window x:Class="资源字典.使用代码创建动画"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="使用代码创建动画" Height="300" Width="500">
    <Grid>
        <TextBlock Text="C#代码实现动画" FontSize="30"></TextBlock>
        <Button Click="Button_Click" Name="btn1" Grid.Column="0" Grid.Row="1" Width="200" Height="30" Content="点击我看效果">
        </Button>
    </Grid>
</Window>

在按钮里定义一个点击事件用来触发C#定义的动画，下面是C#鼠标单击事件的代码：

  private void Button_Click(object sender, RoutedEventArgs e)
        {
            //实例化一个DoubleAnimation类
            DoubleAnimation doubleAnimation = new DoubleAnimation();
            //设置From 属性
            doubleAnimation.From = btn1.Width;
            //设置To属性
            doubleAnimation.To = 400;
            //反向运动
            doubleAnimation.AutoReverse = true;
            //前百分之五十时间加速
            doubleAnimation.AccelerationRatio = 0.5;
            //后百分之20时间减速
            doubleAnimation.DecelerationRatio = 0.2;
            //重复次数
            //doubleAnimation.RepeatBehavior = new RepeatBehavior(3);重复三次
            doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;//无限循环
            //设置Duration属性。
            doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            //为元素设置BeginAnimation方法。
            btn1.BeginAnimation(Button.WidthProperty, doubleAnimation);
        }

效果在此无法展示，有兴趣的话得意自己运行一下，效果大致是下图的一个按钮的宽向两边来回伸缩，而且运动方式缓和，没有么机械性，因为我这里设置了AccelerationRatio定量加速和DecelerationRatio定量减速，所以看起来会时而伸缩快，时而伸缩慢，这只是简单的两个例子，方便入门理解；