内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

WPF动画:同为控件不同命

2018-12-05 20:36 出处:清屏网 人气: 评论(0

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.
分享给小伙伴们:
本文标签: WPF动画

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号