WPF —— 后台实现fromto动画实例

标签页

XML 复制代码
<Button Width="100"
        Height="40"
        Content="点击开始动画"
        Click="Button_Click"
        Name="b1"
        >
</Button>

<!--HorizontalAlignment="Left"-->
    <!--VerticalAlignment="Top
  添加这俩个属性的目的是为了按钮变换的时候沿着一个方向进行放大
-->
<Button Width="100" Height="40"
        Content="做动画的按钮"
        Name="b2" 
        HorizontalAlignment="Left"
        VerticalAlignment="Top">
    
</Button>

1 创建动画对象

cs 复制代码
 DoubleAnimation 动画1  = new DoubleAnimation();

2 创建标签的动画开始的状态

cs 复制代码
动画1.From = b2.Width;

3 设置动画结束状态

// 动画1.To = 250;

By 通过多少变成To值,To值-初始值=250-100=150

cs 复制代码
动画1.By = 150;

4 动画的时间 TimeSpan.FromSeconds(5) 5s

cs 复制代码
动画1.Duration = new Duration(TimeSpan.FromSeconds(5));

6设置一些常用的属性

// 动画结束的时候保持结束状态值/开始的状态值

cs 复制代码
动画1.FillBehavior = FillBehavior.Stop;//开始的状态值
动画1.FillBehavior = FillBehavior.HoldEnd;//结束状态

7 动画无限重复执行

cs 复制代码
动画1.RepeatBehavior = RepeatBehavior.Forever;

8 支持相反方向的动画

cs 复制代码
动画1.AutoReverse = true;

9 延迟执行动画

cs 复制代码
动画1.BeginTime =TimeSpan.FromSeconds(2);

10 AccelerationRatio 速度变快这个过程所占的时间的比例

//和 DecelerationRatio 速度变慢这个过程所占的时间的比例

// 加速 5 * 0.3 = 1.5s 减速 5*0.3=1.5,剩余2s匀速

动画1.AccelerationRatio = 0.3;

//动画1.DecelerationRatio = 0.3;

11 动画结束的事件,当一个动画结束之后可以在事件函数再开启另一个动画

//这俩个动画就是相互独立的

//必须写在动画开启之前 BeginAnimation

cs 复制代码
动画1.Completed += 动画1_Completed;
cs 复制代码
private void 动画1_Completed(object? sender, EventArgs e)
{
    DoubleAnimation 动画2 = new DoubleAnimation();
    动画2.From = b2.Height;
    动画2.To = 250;
    动画2.Duration = new Duration(TimeSpan.FromSeconds(5));
    
    b2.BeginAnimation(Button.HeightProperty, 动画2);
}

5 开启动画 参数1是做动画的属性 参数2是动画实例对象,参数2也可以写成null,写成null是

//停止动画 b1.BeginAnimation(Button.WidthProperty, null)

cs 复制代码
 b2.BeginAnimation(Button.WidthProperty, 动画1);
相关推荐
王解42 分钟前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
PcVue China2 小时前
PcVue + SQL Grid : 释放数据的无限潜力
大数据·服务器·数据库·sql·科技·安全·oracle
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
舞动CPU4 小时前
linux c/c++最高效的计时方法
linux·运维·服务器
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
钰@5 小时前
小程序开发者工具的network选项卡中有某域名的接口请求,但是在charles中抓不到该接口
运维·服务器·小程序
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html