WPF实现动画效果

WPF动画

今天我们尝试用WPF实现动画效果,我们都知道一般传统的动画形式主要是用计时器以及一些事件处理对象的属性来实现动画的.

而WPF则是使用计时器和自定义的绘图逻辑以及对象自带的属性来实现动画的.

实现WPF动画的基本过程

实现动画的过程就和拍电影一样,首先确定剧本,然后修改剧本,随后确定演员角色,最后开拍

1,在XAML中将grid改为canvas并取名name=“canvas”

在window设计界面里面,通过Loaded="Canvas_Loaded"向界面添加加载事件

(开拍前的准备工作)

<Window ……
    ……  Title="MainWindow" Height="450" Width="800" Loaded="Canvas_Loaded">
    <Canvas Name="canvas">

2,加载事件创建好以后,接下来我们来创建故事版和动画对象,一个故事版里面可以添加多种动画,也可以创建多个动画对象

(确定剧本)

//在设计界面通过Loaded="Window_Loaded"给当前窗体添加一个加载事件
        //实现动画首先要创建故事版(需要引入数据包)
        Storyboard gsb = new Storyboard();
        //创建一个border对象,让bd动起来
        Border bd = new Border();

注;引用的故事版的数据包

using System.Windows.Media.Animation;//故事版数据包

3,设置动画对象border(bd)的属性

private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            //设置border对象的宽和高
            bd.Width = 150;
            bd.Height = 150;
            bd.BorderThickness = new Thickness(3);//设置边框的宽度
            bd.BorderBrush = Brushes.Black;//设置边框的背景颜色
            bd.Background = Brushes.Pink;//设置bd的背景颜色
            //设置bd距离顶端还有左端的距离
            Canvas.SetLeft(bd, 0);
            Canvas.SetTop(bd, 0);
            dhxg.Children.Add(bd);//将bd对象放到canvas中

4,创建控制动画执行按钮以及触发事件

 Button ks = new Button();
            ks.Width = 150;
            ks.Height=25;
            ks.Content = "点击开始播放";
            //只有设置了bd距离顶端还有左端的距离才可以进行获取
            Canvas.SetLeft(ks, Canvas.GetLeft(bd));
            Canvas.SetTop(ks, Canvas.GetTop(bd)+bd.Height);
            ks.Click += Ks_Click;
            dhxg.Children.Add(ks);

一,平移动画

1,创建故事内容情节

//创建故事内容情节
            //浮点动画
            DoubleAnimation move = new DoubleAnimation();

2,故事内容情节完善

五个属性:

(1)From 起始值;

 move.From = 100;

(2)To 结束值;

 move.To = 1000;

(3)Duration 表示动画执行一次所需要的

move.Duration = new Duration(new TimeSpan(0, 0, 0, 3, 0));

注;以上三个属性,负责安排故事的情节

注;下面两个必要属性,设置这个故事情节的对象(演员)

(4)Storyboard.SetTarget: 设置动画执行的对象;

Storyboard.SetTarget(move, bd);//将动画添加给bd目标对象

(5)Storyboard.SetTargetProperty: 设置动画的执行属性.

Storyboard.SetTargetProperty(move, new PropertyPath("(Canvas.Left)"));//注意这里的路径大小写一定要区分清楚

3,三个基本属性

(1),表示动画是否可以向相反方向执行

move.AutoReverse = true;

(2),表示动画的执行次数.因为设置了往返,所以动画执行次数最少是两次

move.RepeatBehavior = new RepeatBehavior(2);//动画执行次数100到1000一次,回来一次,所以执行次数必须是两次

(3),表示永久执行

move.RepeatBehavior = RepeatBehavior.Forever;

4,将故事情节添加到故事版中

gsb.Children.Add(move);//将move(平移动画)动画添加到故事版中

5,选择合适的时候开始执行动画(按钮的触发事件)

        private void Ks_Click(object sender, RoutedEventArgs e)
        {
            gsb.Begin();//开始播放动画
        }

二,背景颜色动画

1,背景颜色动画和平移动画写法不同,是优化以后的写法

一行代码包括了

From 起始值,

To 结束值,

Duration 表示动画执行一次所需要的时间

三个属性来表示故事的情节

//背景颜色
//写法和上面不同    优化以后的写法如下
ColorAnimation ys = new ColorAnimation(Colors.Red,Colors.Blue,new Duration(TimeSpan.FromSeconds(3)));//背景颜色渐变和时间间隔

2,Storyboard.SetTarget: 设置动画执行的对象;

Storyboard.SetTarget(ys, bd);//将动画添加给bd目标对象

3,Storyboard.SetTargetProperty: 设置动画的执行属性.

(1),在设置属性时,必须要在对象中进行初始化该属性的值才可以进行设置

(2),两个Storyboard.SetTargetProperty不能在一个动画里面同时运行,否则下一个会把上一个替换掉

(3),注意这里的路径大小写一定要区分清楚

Storyboard.SetTargetProperty(ys, new PropertyPath("(Border.Background).(SolidColorBrush.Color)"));

4,三个基本属性

(1),表示动画是否可以向相反方向执行

ys.AutoReverse = true;

(2),表示动画的执行次数.因为设置了往返,所以动画执行次数最少是两次

ys.RepeatBehavior = new RepeatBehavior(2);

(3),表示永久执行

ys.RepeatBehavior = RepeatBehavior.Forever;

5,将故事情节添加到故事版中

gsb.Children.Add(ys);//将ys(背景颜色动画)动画添加到故事版中

边框动画和缩放动画书写格式和上面基本一致

三,边框颜色动画

//边框颜色
            //优化写法
            ColorAnimation ys1 = new ColorAnimation(Colors.Green, Colors.Yellow, new Duration(TimeSpan.FromSeconds(2)));//边框颜色渐变和时间间隔
            //Storyboard.SetTarget: 设置动画执行的对象;
            Storyboard.SetTarget(ys1, bd);
            //Storyboard.SetTargetProperty: 设置动画的执行属性
            Storyboard.SetTargetProperty(ys1, new PropertyPath("(Border.BorderBrush).(SolidColorBrush.Color)"));
            //三个基本属性
            //表示边框颜色动画是否可以反过来继续执行
            ys1.AutoReverse = true;
            //表示动画的执行次数.因为设置了往返,所以动画执行次数最少是两次
            ys1.RepeatBehavior = new RepeatBehavior(2);//动画执行次数100到1000一次,回来一次,所以执行次数必须是两次
            //表示可以永久执行
            ys1.RepeatBehavior = RepeatBehavior.Forever;
            gsb.Children.Add(ys1);//将ys1(边框颜色动画)动画添加到故事版中

四,边框缩放动画

//边框缩放
            //优化写法
            ThicknessAnimation tick = new ThicknessAnimation(new Thickness(10),new Duration(TimeSpan.FromSeconds(3)));//边框缩放和时间间隔
            //Storyboard.SetTarget: 设置动画执行的对象;
            Storyboard.SetTarget(tick, bd);
            //Storyboard.SetTargetProperty: 设置动画的执行属性
            Storyboard.SetTargetProperty(tick, new PropertyPath("(BorderThickness)"));//路径是bd的边框
            //三个基本属性
            //表示边框缩放动画是否可以反过来继续执行
            tick.AutoReverse = true;
            //表示动画的执行次数.因为设置了往返,所以动画执行次数最少是两次
            tick.RepeatBehavior = new RepeatBehavior(2);//动画执行次数100到1000一次,回来一次,所以执行次数必须是两次
            //表示可以永久执行
            tick.RepeatBehavior = RepeatBehavior.Forever;
            gsb.Children.Add(tick);//将tick(边框缩放动画)添加到故事版中

五,旋转动画

//旋转
            //定义故事版情节
            //优化写法
            DoubleAnimation xz = new DoubleAnimation(0,360,new Duration(TimeSpan.FromSeconds(3)));//0°到360°旋转,时间间隔为3秒
            //Storyboard.SetTarget: 设置动画执行的对象;
            Storyboard.SetTarget(xz, bd);
            //Storyboard.SetTargetProperty: 设置动画的执行属性
            //Storyboard.SetTargetProperty的路径为旋转的名词
            Storyboard.SetTargetProperty(xz, new PropertyPath("RenderTransform.Angle"));
            gsb.Children.Add(xz);//将xz(旋转动画)添加到故事版中
            //旋转对象
            //表示边框缩放动画是否可以反过来继续执行
            xz.AutoReverse = true;
            //表示可以永久执行
            xz.RepeatBehavior = RepeatBehavior.Forever;
            //设置RenderTransform属性
            RotateTransform rotatel = new RotateTransform();
            bd.RenderTransform = rotatel;//位置改变是以旋转对象为主
            bd.RenderTransformOrigin = new Point(0.5, 0.5);//以中心位置进行旋转
        }