WPF製作子窗體的彈出動畫效果
阿新 • • 發佈:2018-11-21
建立一個WPF應用程式WpfApplication1,新建個窗體DialogWin
<Window x:Class="WpfApplication1.DialogWin" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="DialogWin" Height="632" Width="635" WindowStyle="None" Name="DW1" Background="Transparent" AllowsTransparency="True" WindowStartupLocation="CenterScreen" WindowState="Normal"> <Window.Resources> <!--此樣式能去除按鈕點選後的虛線框--> <Style x:Key="MyFocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectangle Margin="-2" StrokeThickness="0" Stroke="Red" StrokeDashArray="1 2"/> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--原始旋轉出來樣例--> <Storyboard x:Key="showDW"> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="Opacity" From="0.2" To="1" Duration="0:0:2.5"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[1].Angle" From="70" To="0" Duration="0:0:2" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="0" To="1" Duration="0:0:2" AccelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="0" To="1" Duration="0:0:2" AccelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" DecelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" DecelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="1" BeginTime="0:0:2.05" Duration="0:0:0.2" AccelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" To="1" BeginTime="0:0:2.05" Duration="0:0:0.2" AccelerationRatio="1"> </DoubleAnimation> </Storyboard> <!--原始的旋轉回去樣例--> <Storyboard x:Key="closeDW"> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[1].Angle" To="360" Duration="0:0:1.5" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:3"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="0" Duration="0:0:1.5" AccelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" To="0" Duration="0:0:1.5" AccelerationRatio="1"> </DoubleAnimation> </Storyboard> <!--轉出來--> <Storyboard x:Key="showDW1"> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.2"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[1].Angle" From="180" To="0" Duration="0:0:0.2" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="0.2" To="1" Duration="0:0:0.2" AccelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="0.2" To="1" Duration="0:0:0.2" AccelerationRatio="1"> </DoubleAnimation> </Storyboard> <!--彈出來--> <Storyboard x:Key="showDW2"> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="0.2" To="0.5" Duration="0:0:0.04" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="0.2" To="0.5" Duration="0:0:0.04" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="0.5" To="1" Duration="0:0:0.04" BeginTime="0:0:0.04" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="0.5" To="1" Duration="0:0:0.04" BeginTime="0:0:0.04"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="1" To="1.2" Duration="0:0:0.04" BeginTime="0:0:0.08" AutoReverse="True" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="1" To="1.2" Duration="0:0:0.04" BeginTime="0:0:0.08" AutoReverse="True"> </DoubleAnimation> </Storyboard> <!--轉回去--> <Storyboard x:Key="closeDW1"> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[1].Angle" To="180" Duration="0:0:0.2" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="0.2" Duration="0:0:0.2" AccelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" To="0.2" Duration="0:0:0.2" AccelerationRatio="1"> </DoubleAnimation> </Storyboard> <!--彈回去--> <Storyboard x:Key="closeDW2"> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="1" To="1.2" Duration="0:0:0.04" AutoReverse="True"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="1" To="1.2" Duration="0:0:0.04" AutoReverse="True"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="1" To="0.5" Duration="0:0:0.04" BeginTime="0:0:0.04" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="1" To="0.5" Duration="0:0:0.04" BeginTime="0:0:0.04"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="0.5" To="0.2" Duration="0:0:0.04" BeginTime="0:0:0.08" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="0.5" To="0.2" Duration="0:0:0.04" BeginTime="0:0:0.08" > </DoubleAnimation> </Storyboard> </Window.Resources> <Window.Triggers> <!--設定DW1的事件觸發--> <!--注意對窗體window的name取為DW1--> <EventTrigger SourceName="DW1" RoutedEvent="Window.Loaded"> <BeginStoryboard Name="showQueryCanvasStoryboard2" Storyboard="{StaticResource showDW}"> </BeginStoryboard> </EventTrigger> <!--設定button1的事件觸發--> <!--注意對按鈕的name取為button1--> <EventTrigger SourceName="button1" RoutedEvent="Button.Click"> <BeginStoryboard Name="closeQueryCanvasStoryboard" Storyboard="{StaticResource closeDW}"> </BeginStoryboard> </EventTrigger> </Window.Triggers> <Canvas Background="Transparent" Height="257" Width="214"> <Canvas Background="Brown" Height="236" Width="201" Canvas.Left="9" Canvas.Top="14" Name="Canvas1"> <!--設定動畫--> <Canvas.RenderTransform> <TransformGroup> <ScaleTransform CenterX="100" CenterY="50"></ScaleTransform><!--縮放中心為100,50。RenderTransform.Children[0]--> <RotateTransform CenterX="100" CenterY="50"></RotateTransform><!--旋轉中心為100,50。RenderTransform.Children[1]--> </TransformGroup> </Canvas.RenderTransform> <Button Margin="98,107,124,127" Name="button1" FocusVisualStyle="{DynamicResource MyFocusVisual}" Click="button1_Click" Height="28" Width="112" Canvas.Left="-53" Canvas.Top="77">關閉</Button> <CheckBox Height="31" HorizontalAlignment="Left" Margin="32,25,0,0" Name="checkBox1" VerticalAlignment="Top" Width="75" Canvas.Left="11" Canvas.Top="-1">CheckBox</CheckBox> <TextBlock Height="35" Margin="124,21,34,0" Name="textBlock1" VerticalAlignment="Top" Background="BlueViolet" Text="dfdf" Width="60" Canvas.Left="-73" Canvas.Top="43" /> </Canvas> </Canvas> </Window>
cs程式碼:
新增引用
private void button1_Click(object sender, RoutedEventArgs e) { // this.Close(); /////timer定義 tm.Tick += new EventHandler(tm_Tick); tm.Interval = TimeSpan.FromSeconds(0.2); tm.Start(); } DispatcherTimer tm = new DispatcherTimer(); void tm_Tick(object sender, EventArgs e) { this.Close(); }
慢速旋轉顯示(showDW)、慢速旋轉消失(closeDW)
快速旋轉顯示(showDW1)、快速旋轉消失(closeDW1)
快速彈出顯示(showDW2)、快速旋轉消失(closeDW2)
快速旋轉顯示(showDW1):
time:0 → 0.2
旋轉角度:180→0
透明度: 0→1
放大: X向:0.2→1 Y向:0.2→1
快速彈出顯示(showDW2):
time:0 → 0.04 → 0.08 →← 0.12
放大 放大 放大(並復原)
X向:0.2→0.5 0.5→1 1→1.2→1
Y向:0.2→0.5 0.5→1 1→1.2→1