WPF实现动画——伸缩

最新推荐文章于 2022-08-08 08:00:50 发布

原创最新推荐文章于 2022-08-08 08:00:50 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#c语言

python 专栏收录该内容

76 篇文章

订阅专栏

本文详细介绍了如何使用WPF实现按钮的伸缩动画效果，包括布局设计、事件添加、动画处理等关键步骤，特别讲解了DoubleAnimation类的使用，以及如何设置动画的重复、速度和方向。

WPF实现动画——伸缩

1、布局

布局要用到Canvas画布

2、对象

我们要让谁伸缩，就是要让谁有这个行为，那么它就是对象，这里要用到控件

注：这里以Button控件为例

3、添加事件

就是说在我点击Button按钮后，这个Button按钮就开始一系列的行为，所以要为Button按钮添加事件

重点：

4、如何使其进行伸缩？

（1）要实例化 DoubleAnimation类

 DoubleAnimation doubleAnimation = new DoubleAnimation();

DoubleAnimation 表示：进行动画处理

（2）设置伸缩长度的起点和终点

 doubleAnimation.From = btn1.Width;//指定长度变化的起点
 doubleAnimation.To = 400;//指定长度变化的终点
//from 表示：起点  ，to表示终点

（3）设置动画开始到结束的运行时间

doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.8));//持续时间
//Duration 设置动画开始到结束的运行时间,这里设置的是0.8秒

这三步可以简写为一步

//实例化一个DoubleAnimation类
            DoubleAnimation doubleAnimation = new DoubleAnimation(btn1.Width,400,new Duration(TimeSpan.FromSeconds(0.8)));//动画处理

注：

第一参数是起始值，第二是终止的值，第三个是开始到结束所需用的时间

之前所做的事情只完成了伸的过程，没有实现缩的过程

（4）宽度到达终点后往回缩，到达最初的宽度

			//反向运动
            doubleAnimation.AutoReverse = true;
//AutoReverse 表示按相反的顺序播放

注：AutoReverse值：

AutoReverse默认值为frse，为true时,动画完成播放时会自动反向播放,返回原始值(反向播放动画发生在动画完成之后,不受总时间限制/不会像使用AccelerationRatio或DecelerationRatio一样会压缩原动画的执行时间)

（5）设置速度

//前百分之五十时间加速
            doubleAnimation.AccelerationRatio = 0.5;//加速比（从0到最大速率）//动画时间中50%的时间进行加速
 //后百分之20时间减速
            doubleAnimation.DecelerationRatio = 0.2;//减速比（从最大速率减到0）动画时间中20%的时间来进行减速

（6）让它来回伸缩

就是说让他重复之前的所有行为

doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;//无限循环这个行为

注：RepeatBehavior 设置动画运行的次数当RepeatBehavior值为Forever时就会一直重复动画

当然，也可以让它循环有限的次数

doubleAnimation.RepeatBehavior = new RepeatBehavior(3);//重复三次

（7）最会一步要打开动画

  btn1.BeginAnimation(Button.WidthProperty, doubleAnimation);    
  //Button.WidthProperty 进行动画的是Button的宽

注：BeginAnimation 表示：在此元素上启动指定的动画属性的动画