【WPF动画】

news/2024/9/18 18:07:51/ 标签: wpf, 经验分享, c#

关于 WPF 中 System.Windows.Media.Animation 命名空间下常用动画类的简要介绍、使用方法和适用场景的表格

      • 使用场景解释:
      • 示例代码1
      • 示例代码2:使用 `Storyboard` 组合多个动画
      • 代码解释
      • 应用场景

动画类描述使用示例适用场景
DoubleAnimation用于为 double 类型的属性(如 Width, Height 等)创建动画。xml <DoubleAnimation From="0" To="100" Duration="0:0:2" />控件大小的变化、透明度的渐变等。
ColorAnimation用于为 Color 类型的属性(如 Background, Foreground 等)创建动画。xml <ColorAnimation From="Red" To="Blue" Duration="0:0:2" />背景色、前景色的渐变效果。
PointAnimation用于为 Point 类型的属性(如 Center, Position 等)创建动画。xml <PointAnimation From="0,0" To="100,100" Duration="0:0:2" />控件位置的变化、路径动画。
ThicknessAnimation用于为 Thickness 类型的属性(如 Margin, Padding 等)创建动画。xml <ThicknessAnimation From="0,0,0,0" To="20,20,20,20" Duration="0:0:2" />控件的内外边距动画效果。
VectorAnimation用于为 Vector 类型的属性(如 GradientStop.Offset 等)创建动画。xml <VectorAnimation From="0,0" To="100,100" Duration="0:0:2" />渐变偏移动画。
ObjectAnimationUsingKeyFrames用于为非数值类型的属性(如 Visibility 等)创建动画。xml <ObjectAnimationUsingKeyFrames><DiscreteObjectKeyFrame Value="Visible" KeyTime="0:0:1" /><DiscreteObjectKeyFrame Value="Hidden" KeyTime="0:0:2" /></ObjectAnimationUsingKeyFrames>控件显示状态的渐变(Visible, Hidden, Collapsed)。
Storyboard控制一组动画的时序和执行。xml <Storyboard><DoubleAnimation ... /></Storyboard>将多种动画组合成复杂动画效果。
BooleanAnimationUsingKeyFramesbool 类型的属性创建动画。xml <BooleanAnimationUsingKeyFrames><DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:1" /><DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:2" /></BooleanAnimationUsingKeyFrames>控件的启用状态等布尔属性的变化。
RectAnimationRect 类型的属性(如 Clip, Viewbox 等)创建动画。xml <RectAnimation From="0,0,100,100" To="50,50,150,150" Duration="0:0:2" />剪裁区域、视图框的动画。
Int32Animation用于为 int 类型的属性(如 Count, Index 等)创建动画。xml <Int32Animation From="0" To="10" Duration="0:0:2" />列表项的计数变化等。

使用场景解释:

  • DoubleAnimation: 当你需要平滑地改变控件的大小、位置、透明度等属性时,使用 DoubleAnimation 是最常见的选择。
  • ColorAnimation: 适用于颜色过渡效果,比如当按钮被点击时改变背景色。
  • PointAnimation: 可以用来控制图形对象的移动,尤其是在 Path 动画中。
  • ThicknessAnimation: 用于边距或填充的动画,例如在控件被悬停时动态改变其边距。
  • VectorAnimation: 适用于渐变背景的动画效果,特别是在复杂的渐变操作中。
  • ObjectAnimationUsingKeyFrames: 适用于非数值属性的离散变化,比如在特定时间点改变控件的 Visibility
  • Storyboard: 适合在复杂动画场景中同时控制多种动画的执行顺序和同步。
  • BooleanAnimationUsingKeyFrames: 适用于布尔值的动画,比如启用/禁用控件。
  • RectAnimation: 适用于剪裁和视图框动画,尤其是在处理图像或视频剪裁时。
  • Int32Animation: 适用于整数属性的变化,比如动画化索引或计数。

示例代码1

要使用这些动画类,可以在 XAML 中直接定义,也可以在 C# 代码中以编程方式创建和启动。例如,Storyboard 可以包含多种动画,并通过 Begin 方法启动:

<Button Content="Animate" Name="button"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="Width" From="100" To="300" Duration="0:0:2" /></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
</Button>

示例代码2:使用 Storyboard 组合多个动画

<Window x:Class="WpfApp1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow" Height="300" Width="400"><Grid><Button x:Name="MyButton" Content="Click Me" Width="100" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><!-- 宽度动画 --><DoubleAnimation Storyboard.TargetName="MyButton" Storyboard.TargetProperty="Width" From="100" To="200" Duration="0:0:2" /><!-- 高度动画 --><DoubleAnimation Storyboard.TargetName="MyButton" Storyboard.TargetProperty="Height" From="50" To="100" Duration="0:0:2" /><!-- 颜色动画 --><ColorAnimation Storyboard.TargetName="MyButtonBackground" Storyboard.TargetProperty="Color" From="LightBlue" To="LightCoral" Duration="0:0:2" /><!-- 旋转动画 --><DoubleAnimation Storyboard.TargetName="MyButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="0" To="360" Duration="0:0:2" /></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers><!-- 添加背景颜色的动画目标 --><Button.Background><SolidColorBrush x:Name="MyButtonBackground" Color="LightBlue"/></Button.Background><!-- 添加旋转变换 --><Button.RenderTransform><RotateTransform Angle="0" /></Button.RenderTransform><Button.RenderTransformOrigin>0.5,0.5</Button.RenderTransformOrigin></Button></Grid>
</Window>

代码解释

  1. 宽度动画 (DoubleAnimation):

    • 目标是按钮的 Width 属性。
    • 动画将按钮的宽度从 100 增加到 200,持续时间为 2 秒。
  2. 高度动画 (DoubleAnimation):

    • 目标是按钮的 Height 属性。
    • 动画将按钮的高度从 50 增加到 100,持续时间为 2 秒。
  3. 颜色动画 (ColorAnimation):

    • 目标是按钮的背景颜色。
    • 动画将按钮的背景色从 LightBlue 渐变到 LightCoral,持续时间为 2 秒。
  4. 旋转动画 (DoubleAnimation):

    • 目标是按钮的旋转角度。
    • 动画将按钮顺时针旋转 360 度,持续时间为 2 秒。
  5. Storyboard:

    • 将以上所有动画组合在一起,在按钮点击时同时播放这些动画,形成一个复杂的动画效果。
  6. RenderTransform:

    • 为按钮添加一个旋转变换,以便旋转动画能够正常工作。

应用场景

这个 Storyboard 示例展示了如何在用户点击按钮时,创建一个包括尺寸变化、颜色渐变和旋转的复杂动画。这种技术非常适合在用户界面中创建引人注目的效果,比如点击反馈、过渡效果或者引导用户注意某个特定控件。

你可以根据需要向 Storyboard 添加更多动画,甚至可以控制它们的播放顺序(如顺序播放或延迟播放),从而实现更复杂的动画效果。


http://www.ppmy.cn/news/1521013.html

相关文章

驱动开发系列17 - PCI总线

一:概述 PCI(外设计算机互连)或PCIe总线是现代计算机的主要组成部分,了解它的工作原理对于理解许多Linux设备驱动程序非常重要。 关于PCI总线本身有很多好的信息(在维基百科和其他地方),而Linux内核中也有关于PCI处理子系统实际实现的文档。然而,这两种现有来源…

云原生 | 在 Kubernetes 中使用 Cilium 替代 Calico 网络插件实践指南!

[ 知识是人生的灯塔,只有不断学习,才能照亮前行的道路 ] 0x00 简述介绍 什么是 Cilium? Cilium 是一款开源软件,它基于一种名为eBPF的新的Linux内核技术提供动力,用于透明地保护使用 Docker 和 Kubernetes 等Linux 容器管理平台中部署的应用程序服务之间的网络连接,Ciliu…

深度解析RAG技术在大模型时代的原理与实践

RAG的概念 QCon北京2024上涉及了很多大模型应用落地场景&#xff0c;出现比较多的应用模式关键词是&#xff1a;AI Agent和RAG&#xff08;RAG也常被在Agent的Cot或是Mutil-Agent协作的流程中&#xff09;。 &#xff0c;那什么是RAG&#xff1f; 本文将基于RAG的核心组件、…

Web攻防之应急响应(二)

目录 前提 &#x1f354;学习Java内存马前置知识 内存马 内存马的介绍 内存马的类型众多 内存马的存在形式 Java web的基础知识&#xff1a; Java内存马的排查思路&#xff1a; &#x1f354;开始查杀之前的需要准备 1.登录主机启动服务器 2.生成jsp马并连接成功 …

Python实现 ElGamal 加密算法

目录 使用 Python 实现 ElGamal 加密算法的博客引言ElGamal 加密算法的工作原理Python 面向对象实现 ElGamal 算法代码解析示例场景&#xff1a;安全消息传输代码解析Python 代码的扩展和优化总结 使用 Python 实现 ElGamal 加密算法的博客 引言 ElGamal 加密算法 是一种基于…

绿色无广告,纯净体验——2024年优质免费视频剪辑软件

如果你习惯一个视频网站的时候&#xff0c;工作上遇到问题也会第一时间在视频网站上进行搜索解决方案。就比如我同事就很喜欢在短视频网站上搜索Office软件的一些操作步骤。如果你也想分享这类视频&#xff0c;那么我们一起探讨下有哪些适合抖音剪辑的视频剪辑工具。 1.福昕视…

magisk+lsposed hook okhttp3采集小红书app端接口(包含完整源码)(2024-09-03)

摘要&#xff1a; 本文介绍如何通过hook OkHttp3框架来拦截并处理应用的网络响应&#xff0c;特别是在某书APP中&#xff0c;通过深入理解Okhttp3的API&#xff0c;hook RealCall以获取请求和响应数据&#xff0c;实现关键词搜索、笔记和用户等数据的回传操作。 一、原理介…

商品信息的标准化

销售环节的数字化见效最快 现在&#xff0c;企业的数字化是非常热的话题&#xff0c;工业&#xff14;.&#xff10;&#xff0c;人工智能&#xff0c;物联网&#xff0c;机器人都是企业数字化转型的主要方向&#xff0c;但是某些时候&#xff0c;我们走的太远&#xff0c;却忘…

2409vue,vue3.5更新

原文 今天,很高兴地发布Vue3.5! 此次要版本不包含破坏更改,只包括内部改进和有用的新函数.这里包含一些亮点. 反应式系统优化 在3.5中,Vue的响应式系统经历了另一次重大重构,实现了更好性能并显著提高了(-56%)内存使用率而行为不变. 此重构还解决了在SSR时,因挂起计算而导…

微服务中的服务降级与熔断机制

目录&#xff1a; 1、简介2、服务降级2.1. Hystrix基础配置2.2. 启用Hystrix2.3. 实现服务降级2.4. 配置Hystrix 3、熔断机制3.1. 配置熔断器3.2. 查看Hystrix Dashboard 1、简介 在微服务架构中&#xff0c;服务降级与熔断机制是保证系统稳定性和可靠性的关键技术。当系统中的…

flowable 国产数据库并发性能优化

最近在生产环境有用户反馈系统流转速度较慢&#xff0c;这边用的是金仓数据库&#xff0c;这边查了数据库的慢sql日志&#xff0c;最后发现问题&#xff0c;以下是部分慢sql的执行时间截图 主要都是流转过程中更新执行表和历史变量表执行时间较长&#xff0c;于是查了表的默认索…

2024年全国铁路(铁路、高铁、地铁)矢量数据集

数据更新时间​&#xff1a;2024年6月​&#xff1b; ​数据范围&#xff1a;全国各省&#xff08;不包含台湾&#xff09;; 数据格式​&#xff1a;shp; ​数据包含类型&#xff1a;铁路、高铁、地铁 数据​坐标信息&#xff1a; EPSG Code 4326 大地基准面 D_WGS_1…

【OpenGL】 理解makeCurrent函数

背景 用QT学校OpenGL绝对可以事半功倍&#xff0c;QT提供了一系列对OpenGL的支持&#xff0c;包括OPenGL窗口类&#xff0c;对OpenGL函数的面向对象的封装等。 总体说明 在Qt框架中&#xff0c;makeCurrent 是QOpenGLContext类的一个方法&#xff0c;它封装了这些平台特定的…

CSS解析:盒模型

在网页上实现元素布局涉及很多技术。在复杂网站上&#xff0c;可能会用到浮动元素、绝对定位元素以及其他各种大小的元素&#xff0c;甚至也会使用较新的CSS特性&#xff0c;比如Flexbox或者网格布局。 在此之前我们要打好基础&#xff0c;深刻理解浏览器是如何设置元素的大小…

Update Azure OpenAI npm Package to 2023-12-01-preview Version

题意&#xff1a;将 Azure OpenAI npm 包更新到 2023-12-01-preview 版本 问题背景&#xff1a; I am currently using the azure-openai npm package in my project with version 2023-03-15-preview. As per the latest updates, version 2023-12-01-preview is available a…

使用 SCSS 或 LESS 相比于纯 CSS 的好处

使用 SCSS 或 LESS 相比于纯 CSS 有以下几个好处&#xff1a; 变量支持&#xff1a; SCSS/LESS&#xff1a;可以定义变量用于存储颜色、字体大小、间距等值&#xff0c;便于在整个样式文件中复用。例如&#xff0c;可以定义一个颜色变量 $primary-color: #3498db;&#xff0c;然…

网站维护更新简易单页404页html代码

源码介绍 一个简约风格的单页html页面&#xff0c;可用于网站维护中或更新网站时挂个首页使用&#xff0c;如果不喜欢现在的颜色请F12修改设置既可。 效果预览 源码获取 网站维护更新简易单页404页html代码

数据分析利器:Java与MySQL构建强大的数据挖掘系统

数据分析在当今信息时代具有重要的作用&#xff0c;它可以帮助企业和组织深入理解数据&#xff0c;发现隐藏在数据中的模式和规律&#xff0c;并基于这些洞察进行决策和优化。Java与MySQL作为两个强大的工具&#xff0c;结合起来可以构建出一个高效、可靠且功能丰富的数据挖掘系…

在Ubuntu 16.04上安装Nginx的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 介绍 Nginx 是世界上最流行的 Web 服务器之一&#xff0c;负责托管一些互联网上最大和最高流量的网站。在大多数情况下&#xff0c;它比…

杭州网站建设网页手机版

杭州作为中国的电子商务之都&#xff0c;网站建设在杭州可谓是异常繁荣。随着移动互联网的兴起&#xff0c;越来越多的企业开始注重网页的手机版建设&#xff0c;以满足用户在移动设备上的浏览需求。杭州网站建设公司也专门针对手机版网页进行优化&#xff0c;提供更好的用户体…