WPF —— 动画缩放变换

不爱敲代码的阿玲2024-04-10 6:10

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

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

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

设置Property属性值为value

XML 复制代码

<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 :布局变换，导致窗体布局重新绘算，这种性能比较低，一般用于变形上面不做动画

XML 复制代码

    <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>

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

XML 复制代码

<StackPanel>

    <Button>
        hello world</Button>
    
    <Button>hello world</Button>
</StackPanel>