WPF 作出窗體旋轉動畫
阿新 • • 發佈:2019-02-16
這裡只是做出和窗體旋轉效果一樣的效果,並不是真的窗體旋轉,原理是,將窗體設定成無邊框透明,在窗體中放置一個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>