1、AnimationTimeline,WPF中的集成關係請查看網址:http://msdn.microsoft.com/en-us/library/system.windows.media.animation.animationtimeline(v=vs.110).aspx#inheritanceContinued程序員
一個簡單的動畫以下代碼所示:windows
da.To = 300; da.Duration = new Duration(TimeSpan.Parse("0:0:15")); //從動畫開始到結束所用的時間 da.AccelerationRatio = 0.4; //加速比率通常與DecelerationRatio相對應,除加速減速的部分其餘全是勻速 da.DecelerationRatio = 0.2; da.AutoReverse = true; //是否自動回覆到初始狀態 da.RepeatBehavior = RepeatBehavior.Forever; //設置動畫的重複特性 btn1.BeginAnimation(Canvas.LeftProperty, da); btn1.BeginAnimation(Canvas.TopProperty, da);
通常動畫的使用步驟以下:併發
1.選定動畫對象。2.選定動畫對象的相關屬性。3.根據相關屬性的數據類型,選定相應的動畫類,如上例中的Width爲double類型,選用DoubleAnimation的動畫類。4.設置動畫的相關屬性,如上例中的From To等。5.選擇動畫的出發條件,如本例中的點擊鼠標觸發動畫。6.調用所要動畫對象中的BeginAnimation方法,該方法把DoubleAnimation和按鈕的WidthProperty聯繫了起來。post
動畫的相關屬性如加速比率AccelerationRatio、減速比率DecelerationRatio、動畫時間Duration、開始時刻BeginTime、結束時刻、動畫重複次RepeatBehavior、動畫終止狀態FillBehavior、是否返回到開始狀態AutoReverse、相關屬性的範圍From To 等內容,請查閱幫助文檔。相關屬性的動畫範圍By 是在原有屬性的基礎上加上(By爲正)或者減去(By爲負)。IsAdditive爲True是,相關屬性的動畫從From+相關屬性的當前值。IsCumulative針對連續變化的相關屬性動畫,爲True時,第二次動畫的from和to是在原有的基礎上加上原來的from和to。動畫
2、StoryBoard,WPF動畫的基本操做如前面所敘述的那樣,其中都是對一些動畫基類的操做,他們的基類都繼承自AnimationTimeline,其餘的動畫類以下圖的組織方式。spa
StoryBoard在WPF動畫中起着相當重要的做用,他支持多個動畫的併發進行,而且WPF專門設計了BeginStoryBoard,他是一個觸發器類,他爲StoryBoard提供了宿主(只能含有一個storyboard)。設計
<GroupBox Header="Storyboard"> <Canvas Height="50"> <Ellipse Name="mypp" Canvas.Left="0" Canvas.Top="12" Width="50" Height="50"> <Ellipse.Fill> <SolidColorBrush x:Name="brushColor" Color="DarkBlue"></SolidColorBrush> </Ellipse.Fill> <Ellipse.Triggers> <EventTrigger RoutedEvent="Ellipse.MouseEnter"> <BeginStoryboard Name="AnimationColor"> <Storyboard > <ColorAnimation Storyboard.TargetName="brushColor" Storyboard.TargetProperty="Color" To="Red" Duration="0:0:8"></ColorAnimation> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="Ellipse.MouseEnter"> <BeginStoryboard Name="DoubleAnimation"> <Storyboard > <DoubleAnimation Storyboard.TargetName="mypp" Storyboard.TargetProperty="Width" To="288" Duration="0:0:8"></DoubleAnimation> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="Ellipse.MouseLeftButtonDown"> <PauseStoryboard BeginStoryboardName="DoubleAnimation"/> <PauseStoryboard BeginStoryboardName="AnimationColor"/> </EventTrigger> <EventTrigger RoutedEvent="Ellipse.MouseLeftButtonUp"> <ResumeStoryboard BeginStoryboardName="DoubleAnimation"/> <ResumeStoryboard BeginStoryboardName="AnimationColor"/> </EventTrigger> <EventTrigger RoutedEvent="Ellipse.MouseRightButtonUp"> <SeekStoryboard BeginStoryboardName="AnimationColor"/> </EventTrigger> </Ellipse.Triggers> </Ellipse> </Canvas> </GroupBox>
3、KeyFrame KeyFrame動畫就是程序員須要爲某個相關屬性在特定的時間內設置特定的值,如Bool、Char等類型在基本動畫類中並無相應的動畫類,咱們能夠利用KeyFrame進行手動設置,在特定的時間設置相應的值。其中KeyFrame包括線性KeyFrame和非線性KeyFrame(spline KeyFrame),以及離散KeyFrame(Discrate KeyFrame)。其中線性和非線性都是以過分的形式進行慢慢的變化,而離散的KeyFrame徹底是忽然的變化,在相應的時刻變換爲相應的值,徹底沒有過分。code
使用示例以下:orm
<Window.Resources> <!--線性變化--> <Storyboard x:Key="myBoard" RepeatBehavior="Forever"> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="circle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> <LinearColorKeyFrame KeyTime="00:00:00" Value="AliceBlue"/> <LinearColorKeyFrame KeyTime="00:00:03" Value="Blue"/> <LinearColorKeyFrame KeyTime="00:00:08" Value="Green"/> </ColorAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="circle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(TranslateTransform.Y)"> <LinearDoubleKeyFrame KeyTime="00:00:00" Value=" 0"/> <LinearDoubleKeyFrame KeyTime="00:00:03" Value="296"/> <LinearDoubleKeyFrame KeyTime="00:00:08" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="circle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(TranslateTransform.X)"> <LinearDoubleKeyFrame KeyTime="00:00:00" Value=" 0"/> <LinearDoubleKeyFrame KeyTime="00:00:03" Value="296"/> <LinearDoubleKeyFrame KeyTime="00:00:08" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <!--離散KeFrame--> <Storyboard x:Key="myBoard2" RepeatBehavior="Forever"> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:3" Storyboard.TargetName="circle1" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> <DiscreteColorKeyFrame KeyTime="00:00:00" Value="Red"/> <DiscreteColorKeyFrame KeyTime="00:00:01" Value="Green"/> <DiscreteColorKeyFrame KeyTime="00:00:02" Value="Yellow"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:3" Storyboard.TargetName="circle2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> <DiscreteColorKeyFrame KeyTime="00:00:00" Value="Green"/> <DiscreteColorKeyFrame KeyTime="00:00:01" Value="Red"/> <DiscreteColorKeyFrame KeyTime="00:00:02" Value="Yellow"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:3" Storyboard.TargetName="circle3" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> <DiscreteColorKeyFrame KeyTime="00:00:00" Value="Yellow"/> <DiscreteColorKeyFrame KeyTime="00:00:01" Value="Green"/> <DiscreteColorKeyFrame KeyTime="00:00:02" Value="Red"/> </ColorAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Window.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Storyboard="{StaticResource ResourceKey=myBoard}"/> <BeginStoryboard Storyboard="{StaticResource ResourceKey=myBoard2}"/> </EventTrigger> </Window.Triggers>
在主窗口中定義以下兩個元素,對象
<GroupBox Header="線性KeyFrame"> <Canvas Height="20"> <Ellipse Name="circle" Width="30" Height="30" Stroke="Red" StrokeThickness="3" RenderTransformOrigin="0.5,0.5"> <Ellipse.Fill> <SolidColorBrush Color="Blue"/> </Ellipse.Fill> <Ellipse.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Canvas> </GroupBox> <GroupBox Header="離散KeyFrame"> <StackPanel Orientation="Horizontal"> <Ellipse Name="circle1" Fill="Black" Width="50" Height="50"/> <Ellipse Name="circle2" Fill="Black" Width="50" Height="50"/> <Ellipse Name="circle3" Fill="Black" Width="50" Height="50"/> </StackPanel> </GroupBox>
非線性KeyFrame的使用
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6" />替換相應的線性KeyFrame代碼便可。