WPF —— 动画缩放变换

本文涉及的产品
云服务器 ECS,每月免费额度200元 3个月
云服务器ECS,u1 2核4GB 1个月
简介: `ScaleTransform`用于二维x-y坐标系中对象的缩放,可沿X或Y轴调整。在故事板中,通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性,并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时,EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后,展示了如何将动画集成到自定义按钮样式中。

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

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

key属性当我们使用静态资源访问时候-->

设置Property属性 值为value

<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Top"></Setter>
<Setter Property="Width" Value="100"></Setter>
<Setter Property="Height" Value="100"></Setter>
<Setter Property="RenderTransformOrigin"
        Value="0.5,0.5"></Setter>
<Setter Property="Background"
        Value="Red"></Setter>

对变换的类型进行赋值
RenderTransform :渲染变换,不影响页面布局,一般使用动画效果
LayoutTransform :布局变换,导致窗体布局重新绘算,这种性能比较低,一般用于变形上面不做动画

    <Setter Property="LayoutTransform">
        <Setter.Value>
            <ScaleTransform></ScaleTransform>
        </Setter.Value>
    </Setter>

    <!--触发器-->
    <Style.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <!--x轴的缩放-->
                    <!--to = 2 倍数-->
                    <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX"
                                     To="2"
                                     Duration="0:0:2"
                                     RepeatBehavior="Forever">

                    </DoubleAnimation>
                    <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
                                     To="2"
                                     Duration="0:0:2"
                                     RepeatBehavior="Forever">

                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

自定义按钮 并且把动画添加到按钮的样式里面,也就是重写按钮样式

<StackPanel>

    <Button>
        hello world</Button>

    <Button>hello world</Button>
</StackPanel>
目录
相关文章
|
C# 前端开发
WPF加载等待动画
原文:WPF加载等待动画 原文地址:https://www.codeproject.com/Articles/57984/WPF-Loading-Wait-Adorner 界面遮罩 等待动画全局颜色 ...
3341 0
|
8月前
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
135 0
|
C#
WPF特效-鱼游动动画2
原文:WPF特效-鱼游动动画2           纯代码撸动画实践2:           原图:(png格式)                                                添加Effect以及Effect动画处理后Gif效果:                                     处理: 眼部放大缩小动画; 嘴缩放动画; 尾部收缩动画;  颜色变化效果动画。
1021 0
|
C# 图形学
WPF特效-鱼游动动画
原文:WPF特效-鱼游动动画   实现思路:           通过VisualBrush Binding方式获取鱼局部图像,在Viewport3D中创建ModelVisual3D块并把获取到的局部图通过VisualBrush Binding方式赋值。
934 0
|
C# C++ 图形学
WPF特效-鱼游动动画3
原文:WPF特效-鱼游动动画3 WPF不支持骨骼,故使用3DMax导出了序列模型文件(.mtl;.obj)。 方法1: 使用Blend 2013打开所有obj文件,拖动排列一下即可在usercontrol中显示,使用RenderTargetBitmap生成png的序列图,使用Timer播放序列图即可。
1074 0
|
C#
WPF特效-粒子动画
原文:WPF特效-粒子动画 WPF实现泡泡龙小游戏效果。     /// -Ball to Ball Collision - Detection and Handling    /// http://stackoverflow.
1424 0
|
C# 前端开发
WPF之基于路径的动画
原文:WPF之基于路径的动画   不是突然想到要做一个路径动画的,是今天谈业务需求的时候偶然谈到的,   一艘船从一个国家到另外一个国家,沿着一条固定的路线前进,就是一个简单的动画效果,以前貌似在书上看到过,所以自己也来做一个。
1061 0
|
C# 索引 容器
WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画
原文:WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画 利用WPF的ListView控件实现类似于Winform中DataGrid行背景色交替变换的效果,同时增加鼠标的悬停效果。
1741 0
|
前端开发 C# 算法
WPF路径动画(动态逆向动画)
原文:WPF路径动画(动态逆向动画) WPF 中的Path.Data 不再多介绍,M开始坐标点 C弧度坐标点 L 直线坐标点   个人写了关于Path.Data数据反向,意思就是把Path的数据逆转,但是图形是没有变化的 Xaml代码如下: ...
1906 0
|
C# 索引
WPF简单模拟QQ登录背景动画
原文:WPF简单模拟QQ登录背景动画 介绍 之所以说是简单模拟,是因为我不知道QQ登录背景动画是怎么实现的.这里是通过一些办法把它简化了,做成了类似的效果 效果图   大体思路 首先把背景看成是一个4行8列的点的阵距,X轴Y轴都是距离70.
1214 0