1. 程式人生 > >WPF 在Xaml檔案內實現旋轉放大動畫效果

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>