使用Trigger
1.当触发事件时的动画效果
View Code
1 <Window x:Class="WpfApplication2.Window2"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 Title="Window2" Height="300" Width="1000">
5
6 <Grid>
7 <Ellipse Name="myEllipse" Width="40" Height="30" Fill="Red">
8 <Ellipse.Triggers>
9 <EventTrigger RoutedEvent="Ellipse.MouseEnter">
10 <BeginStoryboard>
11 <Storyboard>
12 <DoubleAnimation From="100" To="400" Duration="0:0:5" Storyboard.TargetProperty="(Ellipse.Width)"></DoubleAnimation>
13 </Storyboard>
14 </BeginStoryboard>
15 </EventTrigger>
16 </Ellipse.Triggers>
17
18 </Ellipse>
19 </Grid>
20 </Window>
2、通过触发器暂停和恢复一个故事版
View Code
1 <Window x:Class="WpfApplication2.Window2"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 Title="Window2" Height="300" Width="1000">
5
6 <Grid>
7 <Ellipse Name="myEllipse" Width="40" Height="30" Fill="Red">
8 <Ellipse.Triggers>
9 <EventTrigger RoutedEvent="Ellipse.MouseEnter">
10 <BeginStoryboard Name="changeWidth">
11 <Storyboard>
12 <DoubleAnimation From="100" To="400" Duration="0:0:5" Storyboard.TargetProperty="(Ellipse.Width)"></DoubleAnimation>
13 </Storyboard>
14 </BeginStoryboard>
15 </EventTrigger>
16
17 <EventTrigger RoutedEvent="Ellipse.MouseLeftButtonDown" >
18 <PauseStoryboard BeginStoryboardName="changeWidth"></PauseStoryboard>
19 </EventTrigger>
20
21 <EventTrigger RoutedEvent="Ellipse.MouseLeftButtonUp">
22 <ResumeStoryboard BeginStoryboardName="changeWidth"></ResumeStoryboard>
23 </EventTrigger>
24 </Ellipse.Triggers>
25
26 </Ellipse>
27 </Grid>
28 </Window>
3.其中有一个触发器类型与故事版无关，那就是SoundPlayerAction，它只用来播放一种声音
View Code
<Ellipse Name="myEllipse" Width="40" Height="30" Fill="Red">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseEnter">
<SoundPlayerAction Source="D:\Music\thankyou.wav"></SoundPlayerAction>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
4.动态发光效果的按钮
View Code
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="CornflowerBlue"/>
<Setter Property="Height" Value="26"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Height="{TemplateBinding Height}">
<Grid.RowDefinitions>
<RowDefinition Height="1.8*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Grid.RowSpan="2" RadiusX="13" RadiusY="13"
Fill="{TemplateBinding Background}">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="1" Color="LightGray"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle Grid.RowSpan="2" RadiusX="13" RadiusY="13">
<Rectangle.Fill>
<RadialGradientBrush Center="0.5,1" GradientOrigin="0.5,1"
RadiusX="0.7" RadiusY="0.8">
<RadialGradientBrush.GradientStops>
<GradientStop x:Name="glowStop" Offset="0" Color="White"/>
<GradientStop Offset="1" Color="Transparent"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Margin="3,1.1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#dfff"/>
<GradientStop Offset="1" Color="#0fff"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Grid.RowSpan="3" Margin="13,2,13,4"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="#1fff" To="#cfff"
Storyboard.TargetName="glowStop"
Storyboard.TargetProperty="(GradientStop.Color)"
Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever"
AccelerationRatio="0.4" DecelerationRatio="0.6"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Margin="14,0" >click me</Button>
<Button Background="DarkRed" Foreground="White">And me!</Button>
</StackPanel>
效果如下图所示：
5.给嵌套的属性增加动态效果
View Code
<Ellipse Fill="Red" Height="100" Width="200">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
Duration="0:0:7" From="red" To="Purple" RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
Storyboard.TargetProperty属性定义了Ellipse.Fill属性，然后指明它要控制的那个属性。每7秒内颜色从红色和紫色之间渐变。
6、通过索引控制动态效果的路径
View Code
<Ellipse Height="100" Width="200">
<Ellipse.Fill>
<LinearGradientBrush x:Name="gradientBrush" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Red" />
<GradientStop Color="Black" Offset="0.5" />
<GradientStop Color="Blue" Offset="1" />
</LinearGradientBrush>
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="gradientBrush"
Storyboard.TargetProperty="
(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"
To="Green" Duration="0:0:4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
其中Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"是
给画刷的的第三个渐变点增加动态效果
二、层次
使用ParalleTimeline元素把若干个动画组合在一起
View Code
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="StackPanel.Loaded">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline RepeatBehavior="Forever">
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.2"
Storyboard.TargetName="button1"
Storyboard.TargetProperty="(Button.Height)"
By="30" AutoReverse="True" />
<DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.2"
Storyboard.TargetName="button2"
Storyboard.TargetProperty="(Button.Height)"
By="30" AutoReverse="True" />
<ParallelTimeline BeginTime="0:0:2">
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.2"
Storyboard.TargetName="button3"
Storyboard.TargetProperty="(Button.Height)"
By="30" AutoReverse="True" />
<DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.2"
Storyboard.TargetName="button4"
Storyboard.TargetProperty="(Button.Height)"
By="30" AutoReverse="True" />
</ParallelTimeline>
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
<Button Name="button1" Height="25">One</Button>
<Button Name="button2" Height="25">Two</Button>
<Button Name="button3" Height="25">Three</Button>
<Button Name="button4" Height="25">Four</Button>
</StackPanel>
三、关键帧动画
View Code
<Canvas>
<Rectangle Fill="Yellow" Width="20" Height="20">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="800" Duration="0:0:10" Storyboard.TargetProperty="(Canvas.Left)"
RepeatBehavior="Forever" AutoReverse="True"/>
<DoubleAnimationUsingKeyFrames Duration="0:0:2"
Storyboard.TargetProperty="(Canvas.Top)" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames.KeyFrames>
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:0.5"/>
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:1"/>
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:1.5"/>
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:2"/>
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
使用SplineDoubleKeyFrame样条关键帧动画
View Code
<Canvas>
<Rectangle Fill="Red" Width="20" Height="20">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="800" Duration="0:0:10"
Storyboard.TargetProperty="(Canvas.Left)"
RepeatBehavior="Forever" AutoReverse="True" />
<DoubleAnimationUsingKeyFrames Duration="0:0:2" RepeatBehavior="Forever"
Storyboard.TargetProperty="(Canvas.Top)">
<DoubleAnimationUsingKeyFrames.KeyFrames>
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<SplineDoubleKeyFrame Value="50" KeyTime="0:0:0.5"
KeySpline="0.4,0 0.7,0.7" />
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:1"
KeySpline="0.2,0.2 0.7,0.4" />
<SplineDoubleKeyFrame Value="50" KeyTime="0:0:1.5"
KeySpline="0,0.3 0.75,0.75" />
<SplineDoubleKeyFrame Value="0" KeyTime="0:0:2"
KeySpline="0.25,0.25 0.6,1" />
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
四、Path动画
Point动画
View Code
<Path Stroke="Black" StrokeThickness="4">
<Path.Data>
<LineGeometry StartPoint="50,50" EndPoint="0,0"></LineGeometry>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<PointAnimationUsingPath AutoReverse="True" RepeatBehavior="Forever" Duration="0:0:2"
Storyboard.TargetProperty="(Path.Data).(LineGeometry.EndPoint)">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 14.64,14.64 A 50,50 90,0 1 85.36,14.64"></PathGeometry>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>