WPF 在Xaml檔案內實現旋轉放大動畫效果
阿新 • • 發佈:2018-12-22
效果:
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>