WPF动画

  • 在 WPF（Windows Presentation Foundation）中，主要有两种类型的动画：属性动画（Property Animation）和关键帧动画（Key - Frame Animation）。属性动画用于简单地从一个起始值平滑地过渡到一个结束值，例如改变一个控件的宽度从 100px 到 200px。关键帧动画则更加灵活，它允许你在动画过程中定义多个关键帧，每个关键帧可以有不同的值，这样可以创建更复杂的动画效果，比如一个物体先加速再减速的运动动画。
  • WPF动画主要使用Storyboard来设置动画。Storyboard是一种用于控制时间和多个动画的容器，允许你在时间轴上定义动画的开始、持续时间、暂停等。

  • 主要的动画类型包括：

  • 位移动画（DoubleAnimation）：用于改变对象的位置。
  • 透明度动画（DoubleAnimation）：用于改变对象的透明度。
  • 缩放动画（ScaleTransform）：用于改变对象的大小。
  • 旋转动画（RotateTransform）：用于改变对象的旋转角度。
  • 颜色动画（ColorAnimation）：用于改变颜色。

1. 缩放动画

在XAML文件中添加按钮

<Window x:Class="Animation.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"Title="{Binding Title}" Height="350" Width="525" ><StackPanel><Button Name="AnimatedButton" Content="点击缩放!" Width="100" Height="50"RenderTransformOrigin="0.5, 0.5" Click="AnimatedButton_Click" Margin="20"><Button.RenderTransform><ScaleTransform /></Button.RenderTransform></Button></StackPanel>
</Window>

编辑动画

using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Media;namespace Animation.Views
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void AnimatedButton_Click(object sender, RoutedEventArgs e){// 获取当前的缩放变换ScaleTransform scale = (ScaleTransform)AnimatedButton.RenderTransform;// 创建一个位移动画DoubleAnimation scaleAnimationX = new DoubleAnimation{From = 1.0, // 起始缩放To = 1.3,   // 结束缩放Duration = TimeSpan.FromSeconds(0.1), // 动画持续时间AutoReverse = true // 自动反转};DoubleAnimation scaleAnimationY = new DoubleAnimation{From = 1.0, // 起始缩放To = 1.3,   // 结束缩放Duration = TimeSpan.FromSeconds(0.1), // 动画持续时间AutoReverse = true // 自动反转};// 应用动画到缩放变换scale.BeginAnimation(ScaleTransform.ScaleXProperty, scaleAnimationX);scale.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimationY);}}
}

动画效果

WPF缩放动画

2. 位移动画

<Window x:Class="Animation.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"Title="{Binding Title}" Height="350" Width="525" ><Canvas Name="MyCanvas"><Button Content="Start Animation" Click="Button_Click" Name="MyButton"/></Canvas>
</Window>

在按钮的点击事件中编辑动画

using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Media;
using System.Windows.Controls;
using Example;namespace Animation.Views
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void Button_Click(object sender, RoutedEventArgs e){// 创建位移动画DoubleAnimation animation = new DoubleAnimation{From = 0,To = MyCanvas.ActualWidth-MyButton.ActualWidth,Duration = new Duration(TimeSpan.FromSeconds(2)),AutoReverse = true};// 应用动画到按钮的X轴位移TranslateTransform translateTransform = new TranslateTransform();MyButton.RenderTransform = translateTransform;// 开始动画translateTransform.BeginAnimation(TranslateTransform.XProperty, animation);}}
}

动画效果

WPF位移动画

3. 旋转动画

<Window x:Class="Animation.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"Title="{Binding Title}" Height="350" Width="525" ><Canvas Name="MyCanvas"><Button Content="Start Animation" Click="Button_Click" Name="MyButton"/><Grid><Button Name="MyButton1" Width="100" Height="50" Content="点击我" Click="MyButton_Click1"RenderTransformOrigin="0.5, 0.5" Margin="178,49,-178,-49"><Button.RenderTransform><RotateTransform x:Name="ButtonRotateTransform" Angle="0"/></Button.RenderTransform></Button></Grid></Canvas></Window>

编辑动画

using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Media;
using System.Windows.Controls;
using Example;namespace Animation.Views
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void Button_Click(object sender, RoutedEventArgs e){// 创建位移动画DoubleAnimation animation = new DoubleAnimation{From = 0,To = MyCanvas.ActualWidth-MyButton.ActualWidth,Duration = new Duration(TimeSpan.FromSeconds(2)),AutoReverse = true};// 应用动画到按钮的X轴位移TranslateTransform translateTransform = new TranslateTransform();MyButton.RenderTransform = translateTransform;// 开始动画translateTransform.BeginAnimation(TranslateTransform.XProperty, animation);}private void MyButton_Click1(object sender, RoutedEventArgs e){// 创建旋转动画DoubleAnimation animation = new DoubleAnimation{From = 0,To = 360, // 旋转360度Duration = new Duration(TimeSpan.FromSeconds(1)),RepeatBehavior = RepeatBehavior.Forever // 无限循环};// 应用动画到按钮的旋转角度ButtonRotateTransform.BeginAnimation(RotateTransform.AngleProperty, animation);}}}

动画效果

WPF旋转动画

4. 颜色动画

在页面中直给Button2接定义颜色动画

<Window x:Class="Animation.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"Title="{Binding Title}" Height="350" Width="525" ><Window.Resources><Storyboard x:Key="ColorAnimationStoryboard"><ColorAnimationStoryboard.TargetName="MyButton2"Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"From="Green"To="GreenYellow"Duration="0:0:1.5"AutoReverse="True"RepeatBehavior="Forever" /></Storyboard></Window.Resources><Canvas Name="MyCanvas"><Button Content="Start Animation" Click="Button_Click" Name="MyButton"/><Grid><Button Name="MyButton1" Width="100" Height="50" Content="点击我" Click="MyButton_Click1"RenderTransformOrigin="0.5, 0.5" Margin="178,49,-178,-49"><Button.RenderTransform><RotateTransform x:Name="ButtonRotateTransform" Angle="0"/></Button.RenderTransform></Button></Grid><Button Name="MyButton2" Width="100" Height="50" Content="点击我" Click="MyButton_Click2" Canvas.Left="162" Canvas.Top="167"/></Canvas></Window>

点击按钮时触发动画

 private void MyButton_Click2(object sender, RoutedEventArgs e){// 从资源中获取Storyboard并开始动画Storyboard storyboard = (Storyboard)FindResource("ColorAnimationStoryboard");storyboard.Begin();}

动画效果

WPF颜色动画

5. 透明度动画

<Window x:Class="Animation.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"Title="{Binding Title}" Height="350" Width="525" ><Window.Resources><Storyboard x:Key="ColorAnimationStoryboard"><ColorAnimationStoryboard.TargetName="MyButton2"Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"From="Green"To="GreenYellow"Duration="0:0:1.5"AutoReverse="True"RepeatBehavior="Forever" /></Storyboard></Window.Resources><Canvas Name="MyCanvas"><Button Content="Start Animation" Click="Button_Click" Name="MyButton"/><Grid><Button Name="MyButton1" Width="100" Height="50" Content="点击我" Click="MyButton_Click1"RenderTransformOrigin="0.5, 0.5" Margin="178,49,-178,-49"><Button.RenderTransform><RotateTransform x:Name="ButtonRotateTransform" Angle="0"/></Button.RenderTransform></Button></Grid><Button Name="MyButton2" Width="100" Height="50" Content="点击我" Click="MyButton_Click2" Canvas.Left="162" Canvas.Top="167"/><Button Name="MyButton3" Width="100" Height="50" Content="点击我" Click="MyButton_Click3" Background="Blue" RenderTransformOrigin="0.897,3.506" Canvas.Left="162" Canvas.Top="245"/></Canvas></Window>

编辑动画

 private void MyButton_Click3(object sender, RoutedEventArgs e){// 创建透明度动画DoubleAnimation opacityAnimation = new DoubleAnimation{From = 1.0,  // 初始透明度To = 0.4,    // 目标透明度Duration = new Duration(TimeSpan.FromSeconds(1)), // 动画持续时间AutoReverse = true  ,// 动画反向播放RepeatBehavior = RepeatBehavior.Forever // 无限循环};// 应用动画到按钮的透明度MyButton3.BeginAnimation(UIElement.OpacityProperty, opacityAnimation);}

动画效果

WPF透明度动画

WPF动画的应用很广泛和也很灵活，如关键帧动画的设计，动画的数据绑定，这里只是简单的示范，后续在使用过程中会再更。。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/61672.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

VSCode汉化教程【简洁易懂】

VSCode汉化教程【简洁易懂】

我们安装完成后默认是英文界面。 找到插件选项卡&#xff0c;搜索“Chinese”&#xff0c;找到简体&#xff08;更具你的需要&#xff09;&#xff08;Microsoft提供&#xff09;Install。 安装完成后选择Change Language and Restart。
阅读更多...
海洋通信船舶组网工业4G路由器应用

海洋通信船舶组网工业4G路由器应用

船舶是浩瀚海洋中探索与贸易的载体&#xff0c;更是船员们生活与工作的家园。为了在广阔的水域中搭建起稳定、高效的网络桥梁&#xff0c;工业4G路由器以卓越的通信组网能力&#xff0c;为船舶组网提供网络支持。 工业4G路由器以其强大的信号发射能力&#xff0c;确保船舶内部…
阅读更多...
深入浅出分布式缓存：原理与应用

深入浅出分布式缓存：原理与应用

文章目录 概述缓存分片算法1. Hash算法2. 一致性Hash算法3. 应用场景Redis集群方案1. Redis 集群方案原理2. Redis 集群方案的优势3. Java 代码示例：Redis 集群数据定位Redis 集群中的节点通信机制：Gossip 协议Redis 集群的节点通信：Gossip 协议Redis 集群的节点通信流程Red…
阅读更多...
麒麟部署一套NFS服务器，用于创建网络文件系统

麒麟部署一套NFS服务器，用于创建网络文件系统

一、服务端共享目录 在本例中，kyserver01（172.16.200.10）作为客户端，创建一个目录/testdir并挂载共享目录；kyserver02（172.16.200.11）作为服务端，创建一个共享目录/test，设置为读写权限，要求客户端使用root登录时映射为nobody用户、非root登录时保持不变。 服务端启…
阅读更多...
美国AWS EC2 ubuntu 使用密码登陆

美国AWS EC2 ubuntu 使用密码登陆

1。使用页面登录ec2 2.切换root用户 sudo -i 3.为root用户或者其它用户配置密码 passwd user passwd root 4.修改下面文件的配置vi /etc/ssh/sshd_config PermitRootLogin和PasswordAuthentication 修改为yes 第五步&#xff1a;进入/etc/ssh/sshd_config.d目录&#xff0c;…
阅读更多...
PHP 高并发解决方案

PHP 高并发解决方案

PHP作为一种脚本语言&#xff0c;在处理高并发请求时可能面临一些挑战。但通过合理的设计和优化&#xff0c;可以有效提升PHP应用程序的性能和并发处理的能力。 一、缓存 页面缓存&#xff1a;将生成的页面缓存起来&#xff0c;减少对数据库的查询&#xff0c;提高响应速度。…
阅读更多...
圣诞节秘诀

圣诞节秘诀

&#x1f570;️你想在2024年圣诞节脱颖而出吗&#xff1f;利用我们的数据洞察&#xff0c;发现今年最受欢迎的礼物&#xff01;无论是在亚马逊、速卖通、Shopify还是直销平台上&#xff0c;我们的排行榜都将帮助您找到最畅销和最受欢迎的产品。立即优化您的库存&#xff0c;以…
阅读更多...
Unreal从入门到精通之如何绘制用于VR的3DUI交互的手柄射线

Unreal从入门到精通之如何绘制用于VR的3DUI交互的手柄射线

文章目录 前言实现方式MenuLaser实现步骤1.Laser和Cursor2.移植函数3.启动逻辑4.检测射线和UI的碰撞5.激活手柄射线6.更新手柄射线位置7.隐藏手柄射线8.添加手柄的Trigger监听完整节点如下：效果图前言 之前我写过一篇文章《Unreal5从入门到精通之如何在VR中使用3DUI》，其中讲…
阅读更多...
JDK1.8中JVM堆内存等参数配置

JDK1.8中JVM堆内存等参数配置

在JDK 8中&#xff0c;JVM内存模型主要包括堆内存&#xff08;Heap Memory&#xff09;、元空间&#xff08;Metaspace&#xff09;以及直接内存&#xff08;Direct Memory&#xff09;。以下是一些常用的JVM内存参数配置建议&#xff0c;特别是在JDK 8环境下&#xff1a; 1. …
阅读更多...
2024 APMCM亚太数学建模C题 - 宠物行业及相关产业的发展分析和策略 完整参考论文（2）

2024 APMCM亚太数学建模C题 - 宠物行业及相关产业的发展分析和策略 完整参考论文（2）

5.2 问题一模型的建立与求解 5.2.1 分析发展情况 为了更好地理解数据的变化趋势，利用matlab通过六个子图对宠物行业中的关键变量进行了可视化展示。 图 1. 宠物数量变化展示了 猫数量、狗数量 和 总宠物数量 在 2019-2023 年间的变化趋势。结果显示：猫的数量呈逐年上升的趋…
阅读更多...
堆外内存泄露排查经历

堆外内存泄露排查经历

优质博文&#xff1a;IT-BLOG-CN 一、问题描述 淘宝后台应用从今年某个时间开始docker oom的量突然变多&#xff0c;确定为堆外内存泄露。 后面继续按照上一篇对外内存分析方法的进行排查(jemalloc、pmap、mallocpmap/mapsNMTjstackgdb)&#xff0c;但都没有定位到问题。至于…
阅读更多...
数据检索是什么意思?数据检索包括哪几个

数据检索是什么意思?数据检索包括哪几个

不少用户会提出这样的疑问&#xff0c;数据检索是什么意思&#xff1f;数据检索即把数据库中存储的数据根据用户的需求提取出来&#xff0c;选择适合的数据库检索方式需要根据具体的需求和场景来进行判断。数据检索的结果会生成一个数据表&#xff0c;既可以放回数据库&#xf…
阅读更多...
在 Ubuntu 系统上安装 npm 环境以及 nvm（Node Version Manager）

在 Ubuntu 系统上安装 npm 环境以及 nvm（Node Version Manager）

在 Ubuntu 系统上安装 npm 环境以及 nvm&#xff08;Node Version Manager&#xff09; 步骤 1: 更新系统包步骤 2: 安装 nvm步骤 3: 安装 Node.js 和 npm步骤 4: 设置默认 Node.js 版本&#xff08;可选&#xff09;总结 在 Ubuntu 系统上安装 npm 环境以及 nvm&#xff08;No…
阅读更多...
DimensionX:单图生成任意的3d/4d视图

DimensionX:单图生成任意的3d/4d视图

DimensionX:单图生成任意的3d/4d视图 通俗易懂的来说 在我们的方法中&#xff0c;关键是如何从一张图片生成动态的3D和4D场景。我们使用一个叫做ST-Director的工具&#xff0c;它可以分开处理空间&#xff08;3D&#xff09;和时间&#xff08;4D&#xff09;两个方面。想象一…
阅读更多...
接口测试和单元测试

接口测试和单元测试

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 接口测试的本质&#xff1a;就是通过数据驱动&#xff0c;测试类里面的函数。 单元测试的本质&#xff1a;通过代码级别&#xff0c;测试函数。 单元测试的框架…
阅读更多...
第5篇 寻找最大数___ARM汇编语言＜一＞

第5篇 寻找最大数___ARM汇编语言＜一＞

Q&#xff1a;如何设计一段ARM处理器汇编语言子程序并调用来寻找一组数中的最大数呢&#xff1f; A&#xff1a;基本原理与基于Nios II处理器的汇编语言子程序一样&#xff0c;使用子程序LARGE实现找到列表中最大数的功能。主程序通过寄存器将列表的条目数和起始地址作为参数传…
阅读更多...
JavaWeb之综合案例

JavaWeb之综合案例

前言 这一节讲一个案例 1. 环境搭建 然后就是把这些数据全部用到sql语句中执行 2.查询所有-后台&前台 我们先写后台代码 2.1 后台 2.2 Dao BrandMapper&#xff1a; 注意因为数据库里面的名称是下划线分割的&#xff0c;我们类里面是驼峰的&#xff0c;所以要映射 …
阅读更多...
【LeetCode每日一题】——746.使用最小花费爬楼梯

【LeetCode每日一题】——746.使用最小花费爬楼梯

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时空频度】九【代码实现】十【提交结果】 一【题目类别】 数组 二【题目难度】 简单 三【题目编号】 746.使用最小花费爬楼梯 四【题目描述】 给你一…
阅读更多...
记录下jekins新建个前端部署配置项

记录下jekins新建个前端部署配置项

1 新建个item 2 输入项目名称&#xff0c;选择个新的工程或 或者搜个已存在的现有模板 3 添加一些描述 4 &#xff08;可选&#xff09;配置下构建历史保存情况 5 限制下构建节点和选择gitlab或者github 6 写下git仓库地址、账号密码以及分支 7 选择构建工具node以及版本 8 构建…
阅读更多...
RocketMQ: 专业术语以及相关问题解决

RocketMQ: 专业术语以及相关问题解决

概述 要了解 RocketMQ 的多个关键特性的实现原理&#xff0c;并对消息中间件遇到的各种问题进行解决我们引用 JMS 规范 与 CORBA Notification 规范&#xff0c;规范为我们设计系统指明了方向但是仍有不少问题规范没有提及&#xff0c;对于消息中间件又至关重要RocketMQ 并不遵…
阅读更多...
最新文章

Copyright @ 2022~2023