原文:WPF 动画:同为控件不同命 - 简书

1. 及格与优秀

读大学的时候,有一门课的作业是用 PPT 展示。

但是我们很多同学都把 PPT 当做 Word 来用,就单纯地往里面堆文字。

大家都单纯地从一页堆积的文字翻到另一页堆积的文字,以致于台下的同学都听不下去,包括那些以同样的方式汇报的同学。

本来以为会在枯燥中期待下课的到来,直到有个叫幽灵东的同学汇报,他惊艳到了我们。

相比别人单纯地堆积文字,他更多的采用图片+较少的文字的方式。

同时,那些图片和文字的出现、出现顺序、消失,都采用了动画。这些经过设计的动画,串联起来之后,竟让我们观众像是在看一部小动漫。

我们不禁都盯着屏幕,赞叹着正在呈现的动画,同时又期待着下一个动画。

2. 动起来的软件

而对于我们的 Windows 软件或 网站,在实现基础的业务功能后,做一些"增值"的动画效果,会让我们的系统看起来,更有趣。

所以,有时候,我们会在鼠标移入按钮时,让按钮缓慢变大;

又或者打开一个子窗口的时候,让这个子窗口以动画的方式出现在我们面前,例如:像一幅画一样,从左到右展开的方式。

这两种动画都是在控件的尺寸上做手脚。

然而,今天我们要讲的重点是:

虽然按钮(System.Windows.Controls.Button 类)和窗口(System.Windows.Window 类) 都继承自 System.Window.Controls.ContentControl。

它们实现缩放动画的方式,却有些出入。

3. Button 的缩放实现

当你想对 Button 进行缩放时,你可以通过对不同的属性分发动画,来实现该效果。

3.1 基于 Width 和 Height 的动画

即:将动画分发给 Button 的 Width 和 Height 属性,从而实现 Button 的缩放。

3.1.1 代码
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="180" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetProperty="Height" To="180" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
3.1.2 效果
image

3.2 基于 RenderTransform 的动画

跟 Width 一样,RenderTransform 也是 Button 的依赖项属性。

它的值类型为 System.Windows.Media.Transform,这个类是定义在二维平面上启用变换的功能,包括旋转、缩放、扭曲、平移。

System.Windows.Media.Transform 的子类 System.Windows.Media.ScaleTransform ,就是实现在二维 x-y 坐标系内缩放对象。

所以下面我们会用到它。

3.2.1 代码
<Style TargetType="{x:Type Button}" x:Key="zoomByScale">
<!--设置元素的重点为转换的中心点-->
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/> <!--设置转换信息为(或往转换信息里添加)缩放-->
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform></ScaleTransform>
</Setter.Value>
</Setter> <!--鼠标移入时,将动画分发给 ScaleTransform 的 ScaleX、ScaleY 属性-->
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="1.2" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="0:0:6"/>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" To="1.2" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="0:0:6"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
3.2.2 效果
image
3.2.3 附件
属性 摘要 备注
RenderTransform 获取或设置影响此元素的呈现位置的转换信息 依赖项属性,值为 System.Windows.Media.Transform 类的对象
ScaleTransform 在二维 x-y 坐标系内缩放对象 继承自 Transform 类
ScaleX 获取或设置 x 轴的缩放比例 ScaleTransform 的成员。默认值为 1
RotateTransform 在 二维 x-y 坐标系内围绕指定点按照顺时针方向旋转对象。 继承自 Transform 类
Angle 获取或设置顺时针旋转角度(以度为单位) RotateTransform 的成员。默认值为 0

3.3 Viewbox 的一次性缩放

3.3.1 代码
<Grid Width="300" Height="300">
<Viewbox Width="150" Height="150" x:Name="vb_ChangeSizeButton">
<Button Width="150" Height="150" Content="Viewbox 带我飞"/>
</Viewbox>
<StackPanel Margin="15" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal">
<Button Margin="10" Click="Zoom_Big" Cursor="Hand" Content="+"/>
<Button Margin="10" Click="Zoom_Small" Cursor="Hand" Content="——" />
</StackPanel>
</Grid>
// 将 viewBox 的尺寸放大到 1.2 倍
private void Zoom_Big(object sender, RoutedEventArgs e)
{
vb_ChangeSizeButton.Width = vb_ChangeSizeButton.Width * 1.2;
vb_ChangeSizeButton.Height = vb_ChangeSizeButton.Height * 1.2;
} // 将 viewBox 的尺寸除以 1.2
private void Zoom_Small(object sender, RoutedEventArgs e)
{
vb_ChangeSizeButton.Width = vb_ChangeSizeButton.Width / 1.2;
vb_ChangeSizeButton.Height = vb_ChangeSizeButton.Height / 1.2;
}
3.3.2 解释

当 viewbox 的尺寸改变时,子元素大小缩放的倍数等同于 viewbox 的缩放倍数。

3.3.3 效果
image

4. Window 的缩放

对于 Window 的动画,我们一般是分发给它的 RenderTransform 属性。

Width 或 Height 虽然也可以,但是无法实现同时缩放宽高。

既然提到了,我们就先来看看。

4.1 Window 基于 Width 和 Height 的动画

4.1.1 动画只分发给 Width 属性
4.1.1.1 代码
<Window.Style>
<Style TargetType="Window" BasedOn="{StaticResource {x:Type Window}}">
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Style.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="300" Duration="0:0:0.6"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Style>
4.1.1.2 效果
image

这看起来还挺正常。但如果你想要宽高同时放大呢?

4.1.2 Window 基于 Width 和 Height 的蹩脚动画
4.1.2.1 代码
<Window.Style>
<Style TargetType="Window" BasedOn="{StaticResource {x:Type Window}}">
...
<Style.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="300" Duration="0:0:0.6"/>
<DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="300" Duration="0:0:0.6"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Style>
4.1.2.2 效果
image

这种并不是我们想要的结果。

把两个动画的开始时间错开,也不是用户想要的。

所以,我们更喜欢将动画分发给 RenderTransform 属性。

4.2 window 基于 RenderTransform 的动画

这里将仅对 ScaleX 放大的情况一笔带过了..

image
4.2.1 将动画分发给 ScaleX 和 ScaleY,实现宽高同时放大的代码
 <Window.Style>
<Style TargetType="Window" BasedOn="{StaticResource {x:Type Window}}">
...
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform></ScaleTransform>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" From="0" To="1" Duration="0:0:0.6" AccelerationRatio="0.7"/>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" To="1" Duration="0:0:0.6" AccelerationRatio="0.7"/>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Style>
4.2.2 效果
image

5.总结

  1. 对于 Button,你可以通过 Width|Height、RenderTransform、父元素 ViewBox 的方式进行:宽、高、宽高同时,这 3 种的动画缩放。
  2. 对于 Window,你可以通过 Width|Height、RenderTransform 进行宽或高的缩放,但如果要同时缩放宽高,我们用 RenderTransform.
  3. 内容将同步到微信公众号:广州 WPF 开发

    广州 WPF 开发.jpg

WPF 动画:同为控件不同命 - 简书的更多相关文章

  1. c#字符串加载wpf控件模板代码 - 简书

    原文:c#字符串加载wpf控件模板代码 - 简书 ResourceManager resManagerA = new ResourceManager("cn.qssq666.Properti ...

  2. WPF Step By Step 控件介绍

    WPF Step By Step 控件介绍 回顾 上一篇,我们主要讨论了WPF的几个重点的基本知识的介绍,本篇,我们将会简单的介绍几个基本控件的简单用法,本文会举几个项目中的具体的例子,结合这些 例子 ...

  3. WPF中的ControlTemplate(控件模板)(转)

    原文地址 http://www.cnblogs.com/zhouyinhui/archive/2007/03/28/690993.html WPF中的ControlTemplate(控件模板)     ...

  4. WPF中的ControlTemplate(控件模板)

    原文:WPF中的ControlTemplate(控件模板) WPF中的ControlTemplate(控件模板)                                             ...

  5. wpf XMAL中隐藏控件

    原文:wpf XMAL中隐藏控件 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/a771948524/article/details/9264569 ...

  6. [转]WPF中的ControlTemplate(控件模板)

    WPF中的ControlTemplate(控件模板)                                                                           ...

  7. 在WPF中使用WinForm控件方法

    1.      首先添加对如下两个dll文件的引用:WindowsFormsIntegration.dll,System.Windows.Forms.dll. 2.      在要使用WinForm控 ...

  8. CYQ.Data 支持WPF相关的数据控件绑定(2013-08-09)

    事件的结果 经过多天的思考及忙碌的开发及测试,CYQ.Data 终于在UI上全面支持WPF,至此,CYQ.Data 已经可以方便支持wpf的开发,同时,框架仍保留最低.net framework2.0 ...

  9. WPF中的image控件的Source赋值

    WPF中的Image控件Source的设置 1.XAML中 简单的方式(Source="haha.png"); image控件的Source设置为相对路径后(Source=&quo ...

随机推荐

  1. Java虚拟机6:垃圾收集(GC)-1(内存溢出和内存泄漏的区别)

    1.前言 在进行垃圾收集之前需要普及几个比较重要的概念. 2.内存溢出和内存泄露的概念和区别: (1):内存溢出(out of memory):是指程序在申请内存时,没有足够的内存空间可以分配,系统不 ...

  2. Hadoop学习之路(二十二)MapReduce的输入和输出

    MapReduce的输入 作为一个会编写MR程序的人来说,知道map方法的参数是默认的数据读取组件读取到的一行数据 1.是谁在读取? 是谁在调用这个map方法? 查看源码Mapper.java知道是r ...

  3. 如何寫一個自定義控件/vs2010生成Dll文件并引用dll(C#)

    1.最簡單的例子 首先你先新建->項目->類庫.然後右鍵項目.添加一個用戶控件.設置其用戶控件繼承button. egg: namespace ClassLibrary1{    publ ...

  4. shell脚本执行

    方法一:切换到shell脚本所在的目录执行shell脚本: cd /data/shell ./hello.sh ./的意思是说在当前的工作目录下执行hello.sh.如果不加上./,bash可能会响应 ...

  5. Vue 子组件调用父组件 $emit

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  6. 查看mysql中所有表的数据记录

    select table_name,table_rows from tables where TABLE_SCHEMA = 'database name' order by table_rows de ...

  7. XAMPP启动mysql问题

    Problem detected!21:57:44 [mysql] Port 3306 in use by ""E:\MySQL\bin\mysqld" --defaul ...

  8. Python 学习笔记(十四)Python类(三)

    完善类的内容 示例: #! /usr/bin/env python # coding =utf-8 #通常类名首字母大写 class Person(object): """ ...

  9. Oracle索引实现方式

  10. S/4 HANA中发票输出切换回NAST

    在S/4 HANA中,新的输出管理Output Management叫做SAP S/4HANA output control(输出控制),是基于BRF+的,而不是原来基于NAST的.关于S4新的输出控 ...