WPF 在Xaml文件内实现旋转放大动画效果

效果:
  TextBlock A 鼠标进入时放大 1.5 倍、旋转 360 度,并修改背景颜色;鼠标离开时缩小回 1 倍大小、旋转回 0 度。

<TextBlock Text="A" FontSize="60" RenderTransformOrigin="0.5,0.5">

    <!-- 属性触发:改变背景颜色 -->
    <TextBlock.Resources>
        <Style TargetType="{x:Type TextBlock}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="YellowGreen"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Resources>

    <!-- 特效:放大、旋转 -->
    <TextBlock.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1" />
            <RotateTransform Angle="0"/>
        </TransformGroup>
    </TextBlock.RenderTransform>

    <!-- 事件触发:放大、旋转 动画 -->
    <TextBlock.Triggers>
        <!-- 鼠标进入事件 -->
        <EventTrigger RoutedEvent="UIElement.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" 
                        From="1" To="1.5" Duration="0:0:0.3" AutoReverse="False" />
                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
                        From="1" To="1.5" Duration="0:0:0.3" AutoReverse="False" />
                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)" 
                        From="0" To="360" Duration="0:0:0.5" AutoReverse="False" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <!-- 鼠标离开事件 -->
        <EventTrigger RoutedEvent="UIElement.MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" 
                        To="1" Duration="0:0:0.3" AutoReverse="False" />
                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
                        To="1" Duration="0:0:0.3" AutoReverse="False" />
                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)" 
                        To="0" Duration="0:0:0.5" AutoReverse="False" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </TextBlock.Triggers>
</TextBlock>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值