WPF實現下拉、透明漸變、縮放等動畫效果

WPF中自有的Animation類可以方便的實現各種動畫效果，下面介紹幾種用法用以拋磚引玉，讀者可發揮想像實現各種複雜的動畫效果，做個遊戲也不成問題。

效果演示：

此例動畫較為簡單，直接在無需在後台補充代碼就可實現。

XAML代碼

<Window x:Class="Animation.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Title="MainWindow" Height="400" Width="600"> <Grid ClipToBounds="True"> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="160"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid Height="30" Grid.Row="0" Background="DimGray" Grid.ColumnSpan="2"> <Grid.Triggers> <EventTrigger RoutedEvent="Grid.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Height" To="100" Duration="0:0:0.2"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> <EventTrigger RoutedEvent="Grid.MouseLeave"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Height" To="30" Duration="0:0:0.1"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Grid.Triggers> <TextBlock Text="工具欄" VerticalAlignment="Bottom" HorizontalAlignment="Center" FontSize="24" /> </Grid> <Grid Grid.Row="1" Background="DimGray" Opacity="0.2"> <Grid.Triggers> <EventTrigger RoutedEvent="Grid.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> <EventTrigger RoutedEvent="Grid.MouseLeave"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.2" Duration="0:0:0.1"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Grid.Triggers> <TextBlock Text="信息區" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> <Grid Grid.Row="1" Grid.Column="1" Background="DimGray" RenderTransformOrigin="1,1"> <Grid.RenderTransform> <ScaleTransform x:Name="gdScale" ScaleX="0.2" ScaleY="0.2"/> </Grid.RenderTransform> <Grid.Triggers> <EventTrigger RoutedEvent="Grid.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="gdScale" Storyboard.TargetProperty="ScaleX" To="1" Duration="0:0:0.2"/> <DoubleAnimation Storyboard.TargetName="gdScale" Storyboard.TargetProperty="ScaleY" To="1" Duration="0:0:0.2"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> <EventTrigger RoutedEvent="Grid.MouseLeave"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="gdScale" Storyboard.TargetProperty="ScaleX" To="0.2" Duration="0:0:0.1"/> <DoubleAnimation Storyboard.TargetName="gdScale" Storyboard.TargetProperty="ScaleY" To="0.2" Duration="0:0:0.1"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Grid.Triggers> <TextBlock Text="提示區" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </Grid></Window>

代碼分析

整體布局為一個外層Grid用來劃分各功能區，三個子Grid分別對應三個功能模塊。工具欄用DoubleAnimation對高度的變換實現視覺上的下拉效果，需要注意子控制項應相對於容器底部進行布局；信息區用DoubleAnimation對透明度進行動畫處理；提示區對縮放矩陣ScaleTransform中的數值進行變換，其中RenderTransformOrigin用來設置縮放中心，（0，0）代表左上角，（1，1）代表右下角。

推薦閱讀：