WPF 动画

使用Trigger

1.当触发事件时的动画效果

<Window x:Class="WpfApplication2.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2" Height="300" Width="1000">
    
    <Grid>
        <Ellipse Name="myEllipse"  Width="40" Height="30" Fill="Red">
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="100" To="400" Duration="0:0:5" Storyboard.TargetProperty="(Ellipse.Width)"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
            
        </Ellipse>
    </Grid>
</Window>

2、通过触发器暂停和恢复一个故事版

<Window x:Class="WpfApplication2.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2" Height="300" Width="1000">
    
    <Grid>
        <Ellipse Name="myEllipse"  Width="40" Height="30" Fill="Red">
            <Ellipse.Triggers>
                <EventTrigger  RoutedEvent="Ellipse.MouseEnter">
                    <BeginStoryboard Name="changeWidth">
                        <Storyboard>
                            <DoubleAnimation From="100" To="400" Duration="0:0:5" Storyboard.TargetProperty="(Ellipse.Width)"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                
                <EventTrigger RoutedEvent="Ellipse.MouseLeftButtonDown" >
                    <PauseStoryboard BeginStoryboardName="changeWidth"></PauseStoryboard>
                </EventTrigger>
                
                <EventTrigger RoutedEvent="Ellipse.MouseLeftButtonUp">
                    <ResumeStoryboard BeginStoryboardName="changeWidth"></ResumeStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
           
        </Ellipse>
    </Grid>
</Window>

3.其中有一个触发器类型与故事版无关，那就是SoundPlayerAction，它只用来播放一种声音

 <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.动态发光效果的按钮

 <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.给嵌套的属性增加动态效果

  <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、通过索引控制动态效果的路径

 <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元素把若干个动画组合在一起

  <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>

三、关键帧动画

<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样条关键帧动画

  <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动画

 <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>