前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >wpf滑动动画_旋转平移矩阵

wpf滑动动画_旋转平移矩阵

作者头像
全栈程序员站长
发布2022-11-01 11:28:54
1.6K0
发布2022-11-01 11:28:54
举报
文章被收录于专栏:全栈程序员必看
在WPF动画中常见的动画就平移、缩放以及旋转,一般会用到故事板(Storyboard)和浮点动画( DoubleAnimation),下面我们先对这两个进行具体的介绍,因为本次我们主要利用故事板来添加动画:
一.Storyboard:俗称故事板,在VS中意思是,一个容器的时间线,该时间线为子动画提供对象和属性确定信息:

其重要的两个方法`Storyboard.SetTarget();`绑定动画和`Storyboard.SetTargetProperty();`依赖的属性 一般用法有:

代码语言:javascript
复制
Storyboard sb = new Storyboard();//首先实例化一个故事板
Storyboard.SetTarget();//绑定动画为这个按钮执行的浮点动画
Storyboard.SetTargetProperty();//依赖的属性
sb.Begin();//开始动画
sb.Children.Add(***);//向故事板中添加动画
sb.Children.Remove(***);//移除指定的动画

Jetbrains全家桶1年46,售后保障稳定

当然在下面的逐步介绍中,我们还会用到故事板绑定动画,和依赖的属性

二.DoubleAnimation:浮点动画,在VS中的意思是,对插入的两个目标值之间的double属性值进行动画处理:

一般常用的属性运用: 1.先进行实例化; 2.设置动画的起始值和结束值; 3.设置动画是否进行循环播放; 4.设置播放时间; 5.设置是否可以进行反转; 下面是举例代码逐步实现:

代码语言:javascript
复制
DoubleAnimation doubleanimation = new DoubleAnimation();//先进行实例化
doubleanimation.Form=100;//设置起始值
doubleanimation.To=200;//设置结束值
doubleanimation.RepeatBehavior = RepeatBehavior.Forever;//设置动画循环播放
doubleanimation.AutoReverse = true;//设置可以进行反转
doubleanimation.Duration=new Duration(TimeSpan.FromSeconds(3));//设置动画播放时间

动画方式的类型

一.平移:

TranslateTransform:在二维x-y坐标系统内平移(移动)对象:

在故事板中依赖的属性为RenderTransform.X;就是沿X轴进行平移; 用法:

代码语言:javascript
复制
Button btn2 = new Button();
DoubleAnimation yd5 = new DoubleAnimation(100, 200, new Duration(TimeSpan.FromSeconds(3)));//浮点动画定义了开始值和起始值
btn2.RenderTransform = new TranslateTransform();//在二维x-y坐标系统内平移(移动)对象
yd5.RepeatBehavior = RepeatBehavior.Forever;//设置循环播放
yd5.AutoReverse = true;//设置可以进行反转
Storyboard.SetTarget(yd5, btn2);//绑定动画为这个按钮执行的浮点动画
Storyboard.SetTargetProperty(yd5, new PropertyPath("RenderTransform.X"));//依赖的属性
sb.Children.Add(yd5);//向故事板中加入此浮点动画
sb.Begin();//播放此动画

二.旋转:

RotateTransform:在二维x-y坐标系统内围绕指定点顺时针旋转某个对象:

在故事板中依赖属性为:RenderTransform.Angle就是要进行旋转的角度; 用法:

代码语言:javascript
复制
Button btn3 = new Button();
DoubleAnimation yd1 = new DoubleAnimation();//实例化浮点动画
btn3.RenderTransform = new RotateTransform();//设置为旋转动画
btn3.RenderTransformOrigin = new Point(0.5, 0.5);//设置旋转的中心
yd1.From = 0;//动画的起始值
yd1.To = 3600;//动画的结束值
yd1.Duration = TimeSpan.FromSeconds(3);//动画的播放时间
yd1.RepeatBehavior = RepeatBehavior.Forever;//设置动画循环播放
yd1.AutoReverse = true;//设置动画可以进行反转
Storyboard.SetTarget(yd1, btn3);//给故事板绑定动画
Storyboard.SetTargetProperty(yd1, new PropertyPath("RenderTransform.Angle"));//动画的依赖属性
sb.Children.Add(yd1);//故事板添加动画
sb.Begin();//播放动画

三.缩放:

ScaleTransform:在二维x-y坐标系统内缩放对象;

在故事板中依赖的属性为RenderTransform.ScaleXRenderTransform.ScaleY,这要根据你要沿哪个轴进行缩放,X代表x轴,Y代表y轴; 用法:

代码语言:javascript
复制
Button btn1 = new Button();
DoubleAnimation yd4 = new DoubleAnimation(1.0,0.5,new Duration(TimeSpan.FromSeconds(3)));//实例化浮点动画,分别包含了缩放的倍数和动画的时间
btn1.RenderTransform = new ScaleTransform();//设置动画为缩放
yd4.RepeatBehavior = RepeatBehavior.Forever;//设置循环播放
yd4.AutoReverse = true;//设置可以反转
btn1.RenderTransformOrigin = new Point(0.5,0.5);//设置缩放为中心点
Storyboard.SetTarget(yd4,btn1);//绑定动画
Storyboard.SetTargetProperty(yd4,new PropertyPath("RenderTransform.ScaleX"));//动画依赖的属性
sb.Children.Add(yd4);//添加动画
sb.Begin();//播放动画

四.颜色动画:

ColorAnimation:对插入的两个目标值之间的color属性值进行动画处理: 一般依赖的属性为:(控件名称.Background).(SolidColorBrush.Color)也就是设置了其背景色 用法:

代码语言:javascript
复制
Button btn4 = new Button();
ColorAnimation color = new ColorAnimation(Colors.Red,Colors.Blue,new Duration(TimeSpan.FromSeconds(0.05)));//实例化颜色动画
color.RepeatBehavior = RepeatBehavior.Forever;//设置循环播放
color.AutoReverse = true;//设置可以反转
Storyboard.SetTarget(color, btn4);//绑定动画
Storyboard.SetTargetProperty(color, new PropertyPath("(Button.Background).(SolidColorBrush.Color)"));//设置动画依赖的属性
sb.Children.Add(color);//增加动画
sb.Begin();//播放动画

另一篇文章对这几种动画也有具体的介绍,如果喜欢请进传送门

WPF中实现动画的几种效果(最基础方式)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/198332.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月21日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 动画方式的类型
  • 一.平移:
  • 二.旋转:
  • 三.缩放:
  • 四.颜色动画:
    • 另一篇文章对这几种动画也有具体的介绍,如果喜欢请进传送门
    相关产品与服务
    容器服务
    腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档