1. 程式人生 > >WPF 作出窗體旋轉動畫

WPF 作出窗體旋轉動畫

這裡只是做出和窗體旋轉效果一樣的效果,並不是真的窗體旋轉,原理是,將窗體設定成無邊框透明,在窗體中放置一個canvas,然後啟動的時候,給canvas設定旋轉動畫,效果如同窗體旋轉一樣。
程式碼:

<Window x:Class="QuickAnswer.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" xmlns:local="clr-namespace:QuickAnswer" mc:Ignorable="d" Title="MainWindow" Height="726" Width="726" WindowStyle="None" Name="QuickAnswer" Background="Transparent" AllowsTransparency="True" WindowStartupLocation
="CenterScreen" WindowState="Normal" ContentRendered="QuickAnswer_ContentRendered" Topmost="True">
<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="HeadCanvas" Storyboard.TargetProperty="Opacity" From="0.2" To="1" Duration="0:0:2.5"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="HeadCanvas" Storyboard.TargetProperty="RenderTransform.Children[1].Angle" From="1080" To="0" Duration="0:0:2" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="HeadCanvas" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="0" To="1" Duration="0:0:2" AccelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="HeadCanvas" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="0" To="1" Duration="0:0:2" AccelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="HeadCanvas" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" DecelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="HeadCanvas" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" DecelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="HeadCanvas" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="1" BeginTime="0:0:2.05" Duration="0:0:0.2" AccelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="HeadCanvas" 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="HeadCanvas" Storyboard.TargetProperty="RenderTransform.Children[1].Angle" To="360" Duration="0:0:1.5" > </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="HeadCanvas" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:3"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="HeadCanvas" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="0" Duration="0:0:1.5" AccelerationRatio="1"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="HeadCanvas" 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> <!--設定QuickAnswer的事件觸發--> <!--注意對窗體window的name取為QuickAnswer--> <EventTrigger SourceName="QuickAnswer" RoutedEvent="Window.Loaded"> <BeginStoryboard Name="showQueryCanvasStoryboard2" Storyboard="{StaticResource showDW}"> </BeginStoryboard> </EventTrigger> <!--設定button1的事件觸發--> <!--注意對按鈕的name取為button1--> </Window.Triggers> <Canvas Background="Transparent" Height="726" Width="726"> <Canvas Name="HeadCanvas" Height="726" Width="726" Canvas.Left="0" Canvas.Top="0" > <Canvas.Background> <ImageBrush ImageSource="/image/icon_preemptive_sucess_man.png"/> </Canvas.Background> <!--設定動畫--> <Canvas.RenderTransform> <TransformGroup> <ScaleTransform CenterX="326" CenterY="326"></ScaleTransform> <!--縮放中心為326,326。RenderTransform.Children[0]--> <RotateTransform CenterX="326" CenterY="326"></RotateTransform> <!--旋轉中心為326,326。RenderTransform.Children[1]--> </TransformGroup> </Canvas.RenderTransform> <Label x:Name="studentNameLab" Canvas.Left="289.5" Canvas.Top="652.65" Content="龐大慶" FontSize="48" Foreground="White"/> </Canvas> </Canvas> </Window>