15 動畫基礎
15.1使用代碼創建動畫
private void Button1_Click(object sender,RoutedEventArgs e)
{
DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.From = 160;
widthAnimation.To = 300;
widthAnimation.Duration = TimeSpan.FromSeconds(1);
Button1.BeginAnimation(Button.WidthProperty, widthAnimation);
}
From：起始值
To：目標值
Duration：動畫持續時間，除了用TimeSpan還可以用Duration.Automatic和Duration.Forever
By：可用來代替To，說明目標值是相對起始值的偏移。如果From=160，To=300相當於From=160，By=140
IsAdditive：bool類型，說明From和To都是相對元素的當前值。如果：IsAdditive=true，則From=160相當於是160+Button.ActualWidth，To相當於是300+ Button.ActualWidth
AutoReverse：設置爲true則動畫執行完會反向執行
FillBehavior：值爲FillBehavior.Stop則執行完動畫後會回到原來直線動畫前的狀態， 值爲FillBehavior.HoldEnd則保持執行動畫後的狀態。
Completed：值是一個事件處理函數，表面動畫執行完處理該事件。
將BeginAnimation的第二個參數設置爲null來停止動畫。
例如：Button1.BeginAnimation(Button.WidthProperty, null);
BeginTime：動畫開始前等待一段時間
SpeedRatio：動畫的執行速度，默認是1。
AccelerationRatio：動畫執行開始時加速，隨後勻速
DecelerationRatio：動畫在結束時減速
RepeatBehavior：重複次數，可以無限重複RepeatBehavior.Forever
15.2 使用故事板和觸發器創建動畫
<Button Name="Button1"Content="Button" VerticalAlignment="Center"HorizontalAlignment="Center" Width="75"Height="30">
<Button.Triggers>
<EventTriggerRoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Button1"
Storyboard.TargetProperty="Width"
To="300" Duration="0:0:0.2">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
說明：
1.故事板一般需要用事件觸發器來調用。
2.代碼中由於故事板寫在了Button裏面，所以Storyboard.TargetName="Button1"這一句可以省略。
3.如果故事板使用的屬性是附加屬性（如Canvas.Left）則需要加個括號寫成下面形式：
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)"
4.動畫中的To使用了硬編碼的值300，如果想用窗口的寬度表示需要使用數據綁定，可寫成下面形式：
<DoubleAnimation Storyboard.TargetProperty="Width"To="{BindingElementName=window1, Path=Width}"
5.也可以用樣式關聯觸發器，可以使用屬性觸發器和事件觸發器。下面是屬性觸發器的代碼：
<Window.Resources>
<Style x:Key="buttonStyle">
<Style.Triggers>
<TriggerProperty="Button.IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Width"
To="300"Duration="0:0:0.2">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Canvas>
<ButtonStyle="{StaticResource buttonStyle}" Name="Button1"Content="Button" VerticalAlignment="Center"HorizontalAlignment="Center" Width="75"Height="30"></Button>
</Canvas>
15.3 控制播放動畫
<Window.Triggers>
<EventTrigger SourceName="cmdStart"RoutedEvent="Button.Click">
<BeginStoryboard Name="storyboardbegin">
<StoryboardName="storyboard" CurrentTimeInvalidated="storyboard_CurrentTimeInvalidated">
<DoubleAnimationStoryboard.TargetName="pic2"Storyboard.TargetProperty="Opacity"
From="1" To="0" Duration="0:0:10">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger SourceName="cmdPause"RoutedEvent="Button.Click">
<PauseStoryboard BeginStoryboardName="storyboardbegin">
</PauseStoryboard>
</EventTrigger>
<EventTrigger SourceName="cmdResume"RoutedEvent="Button.Click">
<ResumeStoryboard BeginStoryboardName="storyboardbegin">
</ResumeStoryboard>
</EventTrigger>
<EventTrigger SourceName="cmdStop"RoutedEvent="Button.Click">
<StopStoryboard BeginStoryboardName="storyboardbegin">
</StopStoryboard>
</EventTrigger>
<EventTrigger SourceName="cmdMiddle"RoutedEvent="Button.Click">
<SeekStoryboard BeginStoryboardName="storyboardbegin"Offset="0:0:5">
</SeekStoryboard>
</EventTrigger>
</Window.Triggers>
<Grid>
<Image Name="pic1"Source="pic1.jpg"></Image>
<Image Name="pic2"Source="pic2.jpg"></Image>
<StackPanel Orientation="Horizontal" Height="30"Width="Auto" VerticalAlignment="Bottom"HorizontalAlignment="Center" Margin="5">
<Button Name="cmdStart">Start</Button>
<Button Name="cmdPause">Pause</Button>
<Button Name="cmdResume">Resume</Button>
<Button Name="cmdStop">Stop</Button>
<Button Name="cmdMiddle">Middle</Button>
</StackPanel>
<ProgressBar Name="progressbar"HorizontalAlignment="Center" Height="20"Margin="10" VerticalAlignment="Top" Width="200"Value="0" Minimum="0" Maximum="1"/>
</Grid>
private voidstoryboard_CurrentTimeInvalidated(object sender, EventArgs e)
{
Clock storyboardclock =(Clock)sender;
if (storyboardclock.CurrentProgress== null)
{
progressbar.Value = 0;
}
else
{
progressbar.Value =(double)storyboardclock.CurrentProgress;
}
}
說明：
1.控制故事板的動作類包括：BeginStoryboard、PauseStoryboard、ResumeStoryboard、StopStoryboard、SeekStoryboard等。
2.監視動畫進度使用代碼實現，故事板的當前時間向前移動時觸發
CurrentTimeInvalidated事件，通過故事板的CurrentProgress屬性獲取當前的進度（0到1）。
15.4實現動畫緩動效果
<Window.Triggers>
<EventTrigger SourceName="Button1" RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Button1" Storyboard.TargetProperty="(Canvas.Top)" To="150" Duration="0:0:10">
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode ="EaseOut" Oscillations="10"></ElasticEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Canvas>
<Button Name="Button1" Canvas.Left="200" Canvas.Top="50" Height="50" Width="50" VerticalAlignment="Center" HorizontalAlignment="Center">Button
</Button>
</Canvas>
說明：
1.動畫緩動效果使得動畫不再是線性執行，而是按照某個定義的動畫函數來變化。
2.WPF提供了多種緩動效果，ElasticEase是擺動效果，就像皮球從高處落地再彈起再落地這樣反覆的過程。
3.EaseIn和EaseOut表示在緩動效果是先緩後急還是先急後緩。
4.其它的緩動效果有：BackEase、BounceEase、CircleEase、CubicEase、ElasticEase、PowerEase、SineEase等。