1.動畫類型

Linear+類型 +KeyGrame:線性變化關鍵幀，簡單線性動畫的處理基本一樣

DiscreteDoubleKeyFrame:離散變化關鍵幀，不連續變化

SplineDoubleKeyFrame:樣條關鍵幀，樣條函數（二次貝塞爾曲線）

EasingDoubleKeyFrame:緩沖式關鍵幀

ObjectAnimationUsingKeyFrame:理論上讓任意類型參與動畫

2.線性和離散變化關鍵幀

<Window x:Class="WPF___關鍵幀動畫.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:WPF___關鍵幀動畫"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><Storyboard x:Key="sb"><DoubleAnimationUsingKeyFrames Storyboard.TargetName="bor"Storyboard.TargetProperty="Width"><!--細化控制--><!--LinearDoubleKeyFrame與DiscreteDoubleKeyFrame的區別是，前者是緩慢的變化過程，后者是到達KeyTime,突然變化到Value--><LinearDoubleKeyFrame KeyTime="0:0:1" Value="200"/><LinearDoubleKeyFrame KeyTime="0:0:2" Value="150"/><DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="400"/><LinearDoubleKeyFrame KeyTime="0:0:5" Value="350"/><DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="400"/></DoubleAnimationUsingKeyFrames><!--離散--><StringAnimationUsingKeyFrames Storyboard.TargetName="txt"Storyboard.TargetProperty="Text"><DiscreteStringKeyFrame KeyTime="0:0:0" Value=""/><DiscreteStringKeyFrame KeyTime="0:0:0.5" Value="H"/><DiscreteStringKeyFrame KeyTime="0:0:1" Value="He"/><DiscreteStringKeyFrame KeyTime="0:0:1.5" Value="Hel"/><DiscreteStringKeyFrame KeyTime="0:0:2" Value="Hell"/><DiscreteStringKeyFrame KeyTime="0:0:2.5" Value="Hello"/></StringAnimationUsingKeyFrames></Storyboard></Window.Resources><Window.Triggers><EventTrigger RoutedEvent="Button.Click" SourceName="btn"><BeginStoryboard Storyboard="{StaticResource sb}"/></EventTrigger></Window.Triggers><Grid><StackPanel><TextBlock x:Name="txt"/><Border x:Name="bor" Height="30" Width="100" Background="OrangeRed"/></StackPanel><Button Content="執行動畫" Height="30" VerticalAlignment="Bottom" Name="btn"/></Grid> </Window>

3.SplineDoubleKeyFrame關鍵幀

<Window x:Class="WPF___關鍵幀動畫.SplineDoubleKeyFrame"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:WPF___關鍵幀動畫"mc:Ignorable="d"Title="SplineDoubleKeyFrame" Height="450" Width="800"><Window.Resources><Storyboard x:Key="sb" RepeatBehavior="Forever"><DoubleAnimationUsingKeyFrames Storyboard.TargetName="tt1"Storyboard.TargetProperty="X"><SplineDoubleKeyFrame KeyTime="0:0:1" Value="300" KeySpline="0.1,0.6,0.9,0.4"/></DoubleAnimationUsingKeyFrames></Storyboard></Window.Resources><Window.Triggers><EventTrigger RoutedEvent="Button.Click" SourceName="btn"><BeginStoryboard Storyboard="{StaticResource sb}"/></EventTrigger></Window.Triggers><Grid><StackPanel><Grid Width="300" Height="30" Background="Orange"><Ellipse Width="10" Height="10" Fill="White" HorizontalAlignment="Left"><Ellipse.RenderTransform><TranslateTransform X="-10" x:Name="tt1"/></Ellipse.RenderTransform></Ellipse></Grid></StackPanel><Button Content="執行動畫" VerticalAlignment="Bottom" Height="30" Name="btn"/></Grid> </Window>

KeySpline="0.1,0.6,0.9,0.4"說明：動畫的變換速度曲線

?4.EasingDoubleKeyFrame緩沖式關鍵幀

動畫效果

<Window.Resources><Storyboard x:Key="sb_1"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_1"Storyboard.TargetProperty="Width"><!--EasingMode：緩沖模式--><!--Oscillations：速度--><!--Springiness：力度--><DoubleAnimation.EasingFunction><ElasticEase Oscillations="3" Springiness="3" EasingMode="EaseIn"/></DoubleAnimation.EasingFunction></DoubleAnimation></Storyboard><Storyboard x:Key="sb_2"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_2"Storyboard.TargetProperty="Width"><!--Bounces：彈跳次數--><!--Bounciness：彈跳力度--><DoubleAnimation.EasingFunction><BounceEase Bounces="3" Bounciness="2"/></DoubleAnimation.EasingFunction></DoubleAnimation></Storyboard><Storyboard x:Key="sb_3"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_3"Storyboard.TargetProperty="Width"><!--Amplitude：收縮幅度--><DoubleAnimation.EasingFunction><BackEase Amplitude="1" /></DoubleAnimation.EasingFunction></DoubleAnimation></Storyboard><Storyboard x:Key="sb_4"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_4"Storyboard.TargetProperty="Width"><DoubleAnimation.EasingFunction><CircleEase/></DoubleAnimation.EasingFunction></DoubleAnimation></Storyboard><Storyboard x:Key="sb_5"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_5"Storyboard.TargetProperty="Width"><DoubleAnimation.EasingFunction><PowerEase/></DoubleAnimation.EasingFunction></DoubleAnimation></Storyboard><Storyboard x:Key="sb_6"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_6"Storyboard.TargetProperty="Width"><!--Exponent:插值的指數--><DoubleAnimation.EasingFunction><ExponentialEase Exponent="1"/></DoubleAnimation.EasingFunction></DoubleAnimation></Storyboard><Storyboard x:Key="sb_7"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_7"Storyboard.TargetProperty="Width"><DoubleAnimation.EasingFunction><QuadraticEase/></DoubleAnimation.EasingFunction></DoubleAnimation></Storyboard><Storyboard x:Key="sb_8"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_8"Storyboard.TargetProperty="Width"><DoubleAnimation.EasingFunction><SineEase/></DoubleAnimation.EasingFunction></DoubleAnimation></Storyboard><Storyboard x:Key="sb_9"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_9"Storyboard.TargetProperty="Width"></DoubleAnimation></Storyboard><!--SpeedRatio="0.3"AccelerationRatio="0.1"DecelerationRatio="0.1"FillBehavior="HoldEnd"IsAdditive="True"RepeatBehavior="Forever"IsCumulative="True"--><Style TargetType="Button"><Setter Property="HorizontalAlignment" Value="Right"/><Setter Property="Width" Value="120"/></Style></Window.Resources><Window.Triggers><EventTrigger RoutedEvent="Button.Click" SourceName="btn_1"><BeginStoryboard Storyboard="{StaticResource sb_1}"/></EventTrigger><EventTrigger RoutedEvent="Button.Click" SourceName="btn_2"><BeginStoryboard Storyboard="{StaticResource sb_2}"/></EventTrigger><EventTrigger RoutedEvent="Button.Click" SourceName="btn_3"><BeginStoryboard Storyboard="{StaticResource sb_3}"/></EventTrigger><EventTrigger RoutedEvent="Button.Click" SourceName="btn_4"><BeginStoryboard Storyboard="{StaticResource sb_4}"/></EventTrigger><EventTrigger RoutedEvent="Button.Click" SourceName="btn_5"><BeginStoryboard Storyboard="{StaticResource sb_5}"/></EventTrigger><EventTrigger RoutedEvent="Button.Click" SourceName="btn_6"><BeginStoryboard Storyboard="{StaticResource sb_6}"/></EventTrigger><EventTrigger RoutedEvent="Button.Click" SourceName="btn_7"><BeginStoryboard Storyboard="{StaticResource sb_7}"/></EventTrigger><EventTrigger RoutedEvent="Button.Click" SourceName="btn_8"><BeginStoryboard Storyboard="{StaticResource sb_8}"/></EventTrigger><EventTrigger RoutedEvent="Button.Click" SourceName="btn_9"><BeginStoryboard Storyboard="{StaticResource sb_9}"/></EventTrigger></Window.Triggers><Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Border Background="Orange" Width="50" Height="30" Name="bor_1" Grid.Row="0"/><Button Content="ElasticEase" Name="btn_1"/><Border Background="Red" Width="50" Height="30" Name="bor_2" Grid.Row="1"/><Button Content="BounceEase" Grid.Row="1" Name="btn_2"/><Border Background="Green" Width="50" Height="30" Name="bor_3" Grid.Row="2"/><Button Content="BackEase" Grid.Row="2" Name="btn_3"/><Border Background="Blue" Width="50" Height="30" Name="bor_4" Grid.Row="3"/><Button Content="CircleEase" Grid.Row="3" Name="btn_4"/><Border Background="Orange" Width="50" Height="30" Name="bor_5" Grid.Row="4"/><Button Content="PowerEase" Grid.Row="4" Name="btn_5"/><Border Background="Red" Width="50" Height="30" Name="bor_6" Grid.Row="5"/><Button Content="ExponentialEase" Grid.Row="5" Name="btn_6"/><Border Background="Green" Width="50" Height="30" Name="bor_7" Grid.Row="6"/><Button Content="QuadraticEase" Grid.Row="6" Name="btn_7"/><Border Background="Blue" Width="50" Height="30" Name="bor_8" Grid.Row="7"/><Button Content="SineEase" Grid.Row="7" Name="btn_8"/><Border Background="Orange" Grid.Row="9" Width="50" Height="30" Name="bor_9"/><Button Content="擴展屬性" Grid.Row="9" Name="btn_9"/></Grid>

5.ObjectAnimationUsingKeyFrame:理論上讓任意類型參與動畫

<Window.Resources><Storyboard x:Key="sb"><!--閃動，還可以設置透明度Opacity來實現--><ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt"RepeatBehavior="Forever"Storyboard.TargetProperty="Visibility"><DiscreteObjectKeyFrame KeyTime="0:0:1" ><DiscreteObjectKeyFrame.Value><Visibility>Hidden</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame><DiscreteObjectKeyFrame KeyTime="0:0:2" ><DiscreteObjectKeyFrame.Value><Visibility>Visible</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></Storyboard></Window.Resources><Window.Triggers><EventTrigger RoutedEvent="Button.Click" SourceName="btn"><BeginStoryboard Storyboard="{StaticResource sb}"/></EventTrigger></Window.Triggers><Grid><StackPanel><TextBlock x:Name="txt" Text="Hello"/><Border x:Name="bor" Height="30" Width="100" Background="OrangeRed"/></StackPanel><Button Content="執行動畫" Height="30" VerticalAlignment="Bottom" Name="btn"/></Grid>

6.動畫拓展屬性

SpeedRatio:播放速度

<Storyboard x:Key="sb_9" SpeedRatio="3"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_9"Storyboard.TargetProperty="Width"></DoubleAnimation></Storyboard>

AccelerationRatio:加速速率

DecelerationRatio:減速速率

<Storyboard x:Key="sb_9" AccelerationRatio="0.1"DecelerationRatio="0.1"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_9"Storyboard.TargetProperty="Width"></DoubleAnimation></Storyboard>

?AccelerationRatio="0.1"? 和 DecelerationRatio="0.1"：

開始10%加速，最后10%減速，兩者相加小于1

AutoReverse:是否執行相反的動畫

<Storyboard x:Key="sb_9" AutoReverse="True"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_9"Storyboard.TargetProperty="Width"></DoubleAnimation></Storyboard>

FillBehavior:動畫結束HoldEnd（保持最后的結果）/Stop

<Storyboard x:Key="sb_9" FillBehavior="HoldEnd"><DoubleAnimation Duration="0:0:2"From="50"To="300"Storyboard.TargetName="bor_9"Storyboard.TargetProperty="Width"></DoubleAnimation></Storyboard>

RepeatBehavior:動畫重復方式，次數/時間/Forever

IsAddtive:將目標屬性的當前值添加到動畫的起始值

<Storyboard x:Key="sb_9" ><DoubleAnimation Duration="0:0:2"From="50"To="300"IsAdditive="True"Storyboard.TargetName="bor_9"Storyboard.TargetProperty="Width"></DoubleAnimation></Storyboard>

只能在Animation中?

IsCumulative:如果動畫不斷重復，就積累動畫值

<Storyboard x:Key="sb_9" ><DoubleAnimation Duration="0:0:2"From="50"To="300"RepeatBehavior="Forever" IsCumulative="True"Storyboard.TargetName="bor_9"Storyboard.TargetProperty="Width"></DoubleAnimation></Storyboard>

只能在Animation中?

總結

以上是生活随笔為你收集整理的14WPF---关键帧动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。