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

最新推荐文章于 2025-06-25 15:48:37 发布

文终

最新推荐文章于 2025-06-25 15:48:37 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： WPF 文章标签： WPF Xaml 动画旋转放大

本文链接：https://blog.youkuaiyun.com/hmm12138/article/details/79881622

WPF 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用WPF实现TextBlock元素的鼠标交互效果，包括鼠标悬停时的放大、旋转动画及背景颜色变化，同时提供了详细的XML代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

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