动画类DoubleAnimationUsingKeyFrames、ObjectAnimationUsingKeyFrames、TransformGroup,VisualStateManager的实际应用
Silverlight主要是用于开发富客户端应用程序，那我们就要对它内置的动画操作类有一定的了解和会应用，下面是关于它的几个类的学习
1.DoubleAnimationUsingKeyFrames
按照一组 KeyFrames对 Double 的值进行动画处理。
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="sbird" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:00.5000000" Value="16"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" KeySpline="0.5,0,0.5,1"/>
</DoubleAnimationUsingKeyFrames>
关键帧动画的目标值是通过其 KeyFrames 属性定义的，该属性包含 DoubleKeyFrame 对象的集合。其中每个 DoubleKeyFrame 都定义一段动画，每段动画都有其自己的目标 Value和 KeyTime 属性。动画运行时，它将在指定的关键时间从一个关键值过渡到下一个关键值。
DoubleKeyFrame 类有三种类型，分别对应以下各个支持的内插方法：LinearDoubleKeyFrame、DiscreteDoubleKeyFrame 和 SplineDoubleKeyFrame。
在 XAML 中声明 DoubleAnimationUsingKeyFrames 时，DoubleKeyFrame 对象元素的顺序并不重要，因为 KeyTime 属性控制关键帧的执行时间，从而也就控制了它们的执行顺序。不过，保持元素顺序与 KeyTime 序列顺序相同是一种好的标记风格。本例中使用的是SplineDoubleKeyFrame对象（样条插件）。
2. ObjectAnimationUsingKeyFrames
在指定的持续时间内对一组关键帧中的对象类型属性的值进行动画处理。
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="eye_story" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:00.8000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:01.5000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
DiscreteObjectKeyFrame是离散关键帧，会在值之间创建突然跳转
3.EasingDoubleKeyFrame
定义一个通过其可将缓动函数与DoubleAnimationUsingKeyFrames关键帧动画相关联的属性。
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ucellino_1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="00:00:01.5000000" Value="56">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:03.2740000" Value="12">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:04.4570000" Value="68">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:11.5520000" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:15.1000000" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
4.RenderTransform
获取或设置影响 UIElement的变换信息
<local:UcellinoControl.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.3" ScaleY="0.3"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform X="-263"/>
</TransformGroup>
</local:UcellinoControl.RenderTransform>
Transform 对象可以是单个变换类型RotateTransform或 TransformGroup,TransformGroup不是变换，而是一个容器，该容器允许您将某一 RenderTransform 的多个变换指定为 XAML 中的标记子级，或将变换项添加到代码中的Chilren。
5.VisualStateManager
管理控件的状态以及用于状态过渡的逻辑.它有一个重要方法GoToState（），使控件在两个状态间过渡。可以通过代码来实现控件的状态过度。
下面是综合运用，小实现的是鸟动画。
1.bird.xaml
<UserControl
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"
mc:Ignorable="d"
x:Class="progetto_colombo.bird"
d:DesignWidth="400" d:DesignHeight="412" Height="319" Width="375" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<Grid x:Name="LayoutRoot" Loaded="OnLoaded">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="Loop">
<vsm:VisualState x:Name="Hover">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="sbird" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:00.5000000" Value="16"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" KeySpline="0.5,0,0.5,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="tail" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:00.5000000" Value="13.074"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" KeySpline="0.5,0,0.5,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="shadowTail" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:00.5000000" Value="-2.876"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" KeySpline="0.5,0,0.5,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="shadowTail" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:00.5000000" Value="-1.377"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" KeySpline="0.5,0,0.5,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="shadowTail" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:00.5000000" Value="-8.269"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" KeySpline="0.5,0,0.5,1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="Eye">
<vsm:VisualState x:Name="Blink">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="eyesClosed" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.0300000" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.1800000" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.2100000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.7000000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.7300000" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.8900000" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.9200000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:04.8000000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:04.8300000" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:04.9900000" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:05.0200000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="NoBlink"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="Wing">
<vsm:VisualState x:Name="Wings">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="wingDown" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1170000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.2200000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="wingUp" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1170000" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.2200000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="Beak">
<vsm:VisualState x:Name="OpenBeak">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="31.918"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="31.918"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="1.581"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-30.092"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="-30.091999053955078"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="1.201"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="OpenBeakSing">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="path3">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-30.092"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="-30.091999053955078"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="1.201"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.6940000" Value="1.201"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.7020000" Value="-30.092"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-30.091999053955078"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="1.201"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1.201"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5080000" Value="-30.092"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.8060000" Value="-30.091999053955078"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.9060000" Value="1.201"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="path4">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="31.918"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="31.918"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="1.581"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.6940000" Value="1.581"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="31.918"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="31.918"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="1.581"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1.581"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5060000" Value="31.918"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.8060000" Value="31.918"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.9060000" Value="1.581"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="Connecting">
<vsm:VisualState x:Name="EyeRolling">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="eye_story" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="EyeNormal"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="Error">
<vsm:VisualState x:Name="Complain">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="eye_story" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:00.8000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:01.5000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:00.8000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:01.5000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="shadowEye" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:00.8000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:01.5000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:00.8000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:01.5000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="X" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:00.8000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:01.5000000">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-52.736"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="-48.249992370605469"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0.26800000667572021"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="54.655"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="50.056427001953125"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0.32100000977516174"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="ResetError"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Canvas x:Name="sbird" RenderTransformOrigin="0.312,0.49">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Grid Height="176.991" x:Name="tail" Width="80.002" RenderTransformOrigin="0.675,0.271" Canvas.Top="138.997">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Path RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="#FF000000" StrokeThickness="6" Data="M209,343 C194.51918,368.12094 171.95985,406.42752 165.55753,418.36282 C155.25279,437.57303 177.64944,440.48721 182.33514,431.45129 C201.41354,394.6604 206.85774,375.63184 219.00523,346.51089 z" Margin="0,0,11,67">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-3.1269999084472655"/>
<TranslateTransform X="-7.4200511448646251" Y="1.0893014662625546"/>
</TransformGroup>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrush EndPoint="0.638,0.636" StartPoint="0.232,0.473">
<GradientStop Color="#FFF4DF00"/>
<GradientStop Color="#FFB15800" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="#FF000000" StrokeThickness="6" Data="M209,343 C194.51918,368.12094 171.95985,406.42752 165.55753,418.36282 C155.25279,437.57303 177.64944,440.48721 182.33514,431.45129 C201.41354,394.6604 206.85774,375.63184 219.00523,346.51089 z" Margin="1.001,25.997,9.999,41.003">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-7.2659998474121092"/>
<TranslateTransform X="-1.168981827388095" Y="0.077184184327642846"/>
</TransformGroup>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrush EndPoint="0.638,0.636" StartPoint="0.232,0.473">
<GradientStop Color="#FFF4DF00"/>
<GradientStop Color="#FFB15800" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="#FF000000" StrokeThickness="6" Data="M212.47699,335.55487 C197.99617,360.67581 171.95985,406.42752 165.55753,418.36282 C155.25279,437.57303 177.64944,440.48721 182.33514,431.45129 C201.41354,394.6604 210.33473,368.18671 222.48222,339.06577 z" Margin="2.626,40.816,4.471,17.89">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-9.5419998703002928"/>
<TranslateTransform X="4.9338791277621539" Y="-1.7160357505817672"/>
</TransformGroup>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrush EndPoint="0.638,0.636" StartPoint="0.232,0.473">
<GradientStop Color="#FFF4DF00"/>
<GradientStop Color="#FFB15800" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="#FF000000" StrokeThickness="6" Data="M214.20029,334.60187 C199.71947,359.72281 171.95985,406.42752 165.55753,418.36282 C155.25279,437.57303 177.64944,440.48721 182.33514,431.45129 C201.41354,394.6604 212.05803,367.2337 224.20552,338.11276 z" Margin="8.775,57.905,-3.612,-0.26">
<Path.Fill>
<LinearGradientBrush EndPoint="0.638,0.636" StartPoint="0.232,0.473">
<GradientStop Color="#FFF4DF00"/>
<GradientStop Color="#FFB15800" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-13.772999995708465"/>
<TranslateTransform X="9.4241872048018251" Y="-4.3973417664774246"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path Fill="#FF000000" Opacity="0.25" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="6" Data="M262.59052,345.89355 C263.39853,354.50345 264.8558,360.66772 267.159,363.64581 C267.82401,371.33667 269.18735,377.83865 271.25,383.14999 C273.83453,390.61774 276.6973,396.32211 279.90176,399.86035 C279.90176,399.86035 289.26501,412.16858 289.26501,412.16858 L297.61554,388.49893 L272.40775,326.95786 z" x:Name="shadowTail" RenderTransformOrigin="0.5,0.5" Margin="36.667,-7,-2.667,88">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
<Path Height="66" Width="92" RenderTransformOrigin="0.141,0.788" Stretch="Fill" Stroke="#FF000000" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="6" Canvas.Left="280.999" Canvas.Top="100.5" Data="M507,293.03799 L586,350.99585 L500,342.56668 z" x:Name="path3">
<Path.Fill>
<LinearGradientBrush EndPoint="0.69,0.942" StartPoint="0.272,0.182">
<GradientStop Color="#FFC2C2C2"/>
<GradientStop Color="#FF818181" Offset="0.95706844329833984"/>
</LinearGradientBrush>
</Path.Fill>
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0.268"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path Width="111.5" Stretch="Fill" Stroke="#FF000000" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="6" Data="M480.5,390.58932 L586,350.99585 L500,342.56668 z" Height="56" RenderTransformOrigin="0.277,0.116" Canvas.Left="260.999" Canvas.Top="151.5" x:Name="path4">
<Path.Fill>
<LinearGradientBrush EndPoint="0.509,0.562" StartPoint="0.295,-0.098">
<GradientStop Color="#FFC2C2C2"/>
<GradientStop Color="#FF818181" Offset="0.95706844329833984"/>
</LinearGradientBrush>
</Path.Fill>
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0.321"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Ellipse Height="36" Stroke="#FF000000" StrokeThickness="6" Width="36" Canvas.Left="184.499" Canvas.Top="237.5">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.819,0.875" StartPoint="0.111,0.153">
<GradientStop Color="#FFC17D06" Offset="0.014950121752917767"/>
<GradientStop Color="#FF512D02" Offset="0.987"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Height="36" Stroke="#FF000000" StrokeThickness="6" Width="36" Canvas.Left="173.499" Canvas.Top="243">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.819,0.875" StartPoint="0.111,0.153">
<GradientStop Color="#FFC17D06" Offset="0.014950121752917767"/>
<GradientStop Color="#FF512D02" Offset="0.987"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Height="36" Width="36" Stroke="#FF000000" StrokeThickness="6" Canvas.Left="161.999" Canvas.Top="246.5">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.819,0.875" StartPoint="0.111,0.153">
<GradientStop Color="#FFC17D06" Offset="0.014950121752917767"/>
<GradientStop Color="#FF512D02" Offset="0.987"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Height="261" Width="261" Stroke="#FF000000" StrokeThickness="6" Canvas.Left="37.999">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.854,0.854" StartPoint="0.146,0.146">
<GradientStop Color="#FFF4C900"/>
<GradientStop Color="#FFA15000" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Stroke="{x:Null}" StrokeThickness="6" Fill="#FF8E4903" Height="236" Width="236" Opacity="0.41" Canvas.Left="50.499" Canvas.Top="12.5"/>
<Ellipse Stroke="{x:Null}" StrokeThickness="6" Fill="#FFFFFFFF" Opacity="0.1" Height="194" Width="194" Canvas.Left="58.499" Canvas.Top="16.5"/>
<Ellipse Stroke="{x:Null}" StrokeThickness="6" Fill="#FFFFFFFF" Opacity="0.1" Height="143" Width="143" Canvas.Left="65.499" Canvas.Top="22.5"/>
<Ellipse Stroke="{x:Null}" StrokeThickness="6" Fill="#FF000000" Height="142" x:Name="shadowEye" Width="142" Opacity="0.2" Canvas.Left="135.999" Canvas.Top="37"/>
<Ellipse Height="142" Width="142" Stroke="#FF000000" StrokeThickness="6" Canvas.Left="131.999" Canvas.Top="31" x:Name="ellipse">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.854,0.854" StartPoint="0.146,0.146">
<GradientStop Color="#FFFFFFFF" Offset="0.004"/>
<GradientStop Color="#FF8A8A8A" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Grid Height="107" x:Name="eye_grid" Width="107" RenderTransformOrigin="0.5,0.5" Canvas.Left="150.498" Canvas.Top="47.644">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Ellipse Fill="#FF000000" Stroke="#FF000000" StrokeThickness="6"/>
<Ellipse Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="6" Margin="15.718,14.002,45.282,47.998"/>
</Grid>
<Path Height="132" Width="130" Opacity="0.25" Fill="#FFFFFFFF" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="6" Canvas.Left="131.999" Canvas.Top="31.116" Data="M71,1.114131E-11 C90.606049,-1.0848015E-05 108.35613,7.9469371 121.20458,20.795418 C124.41669,24.00753 127.32246,27.525993 129.87431,31.303223 L129.9493,31.426653 L121.5,30.999998 C73.174843,30.999998 34,70.174812 34,118.5 C34,121.52031 34.153027,124.50488 34.451752,127.44637 L35.181927,132.23068 L31.303225,129.87431 C16.194267,119.66688 5.2255964,103.79661 1.442467,85.308983 C0.49668482,80.687035 0,75.90152 0,71 C0,31.787563 31.788094,-2.169594E-05 71,1.114131E-11 z" x:Name="path"/>
<Canvas Height="142" x:Name="eyesClosed" Width="142" Visibility="Visible" Canvas.Left="131.999" Canvas.Top="31" Opacity="0">
<Ellipse Height="142" Width="142" Stroke="#FF000000" StrokeThickness="6" Fill="#FFA37105"/>
<Ellipse Height="115" Width="115" Stroke="{x:Null}" StrokeThickness="6" Fill="#FFB17E13" Canvas.Left="11" Canvas.Top="8"/>
<Ellipse Height="97" Width="97" Stroke="{x:Null}" StrokeThickness="6" Fill="#FFC6971F" Canvas.Left="16" Canvas.Top="10"/>
<Path Height="21.749" Width="141" Fill="{x:Null}" Stretch="Fill" Stroke="#FF000000" StrokeThickness="6" Canvas.Left="0.334" Canvas.Top="52.316" Data="M0.16111194,75.125046 C22.648636,46.483772 103.44707,36.857513 141.53903,74.589485"/>
</Canvas>
<Grid Height="66.906" x:Name="wingDown" Width="69.819" Canvas.Left="89.298" Canvas.Top="205.479">
<Path Stretch="Fill" Stroke="{x:Null}" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="6" Data="M120,172 C120,172 102.21127,204.13197 103,214 C103.58932,221.37315 108.69928,217.21515 116.69914,215.21515 C115.76916,224.91919 122.12913,227.76115 133.12892,220.76115 C135.94887,226.71519 141.30881,232.05722 147.34874,221.56198 C146.65794,227.06203 158.97685,242.11865 162.1497,221.74911 C165.84903,197.99966 157.64934,183.99979 152.64941,175.99994" Margin="3.819,0.906,0.181,0.094" Opacity="0.375">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00B87C19"/>
<GradientStop Color="#AC555555" Offset="0.138"/>
<GradientStop Color="#FF000000" Offset="0.777"/>
<GradientStop Color="#00000000" Offset="0.79"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path Margin="0,0,4,1" Stretch="Fill" Stroke="#FF000000" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="6" Data="M120,172 C120,172 102.21127,204.13197 103,214 C103.58932,221.37315 108.69928,217.21515 116.69914,215.21515 C115.76916,224.91919 122.12913,227.76115 133.12892,220.76115 C135.94887,226.71519 141.30881,232.05722 147.34874,221.56198 C146.65794,227.06203 158.97685,242.11865 162.1497,221.74911 C165.84903,197.99966 157.64934,183.99979 152.64941,175.99994">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA5690F"/>
<GradientStop Color="#FFA15801" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
<Grid Height="67" x:Name="wingUp" Width="70" Opacity="0" RenderTransformOrigin="0.5,0.5" Visibility="Visible" Canvas.Left="89.298" Canvas.Top="153.479">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Path Margin="0,0,4,1" Stretch="Fill" Stroke="#FF000000" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="6" Data="M120,172 C120,172 102.21127,204.13197 103,214 C103.58932,221.37315 108.69928,217.21515 116.69914,215.21515 C115.76916,224.91919 122.12913,227.76115 133.12892,220.76115 C135.94887,226.71519 141.30881,232.05722 147.34874,221.56198 C146.65794,227.06203 158.97685,242.11865 162.1497,221.74911 C165.84903,197.99966 157.64934,183.99979 152.64941,175.99994">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA5690F"/>
<GradientStop Color="#FFA15801" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
<Grid Height="75" x:Name="X" Width="75" Visibility="Collapsed" Canvas.Left="165.217" Canvas.Top="63">
<Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF000000" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="16" Data="M109,62 L34.21698,136.78302"/>
<Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF000000" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="16" Data="M109,62 L34.21698,136.78302" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Canvas>
</Grid>
</UserControl>
2.UcellinoControl.xaml
<UserControl
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" x:Name="ucellino_vola"
mc:Ignorable="d"
xmlns:local="clr-namespace:Test"
x:Class="Test.UcellinoControl"
d:DesignWidth="375" d:DesignHeight="319">
<UserControl.Resources>
<Storyboard x:Name="leave">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ucellino" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="449.983" KeySpline="0.5,0,1,0.58899998664856"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ucellino" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="-500.984" KeySpline="0.5,0,1,0.58899998664856"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<local:bird x:Name="ucellino" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment">
<local:bird.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</local:bird.RenderTransform>
</local:bird>
</Grid>
</UserControl>
3.BirdFly.xaml
<UserControl x:Class="Test.BirdFly"
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:Test"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" >
<UserControl.Resources>
<Storyboard x:Name="ucellino1" AutoReverse="False" RepeatBehavior="1x">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ucellino_1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="00:00:01.5000000" Value="7.75">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:03.2740000" Value="278.5">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:04.4570000" Value="459.00003051757812">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:11.5520000" Value="1000">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:15.1000000" Value="1600">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ucellino_1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="00:00:01.5000000" Value="56">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:03.2740000" Value="12">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:04.4570000" Value="68">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:11.5520000" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:15.1000000" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" MinHeight="480" MinWidth="640" RenderTransformOrigin="0.5,0.5">
<local:UcellinoControl x:Name="ucellino_1" HorizontalAlignment="Left" d:LayoutOverrides="Height" RenderTransformOrigin="0.5,0.5">
<local:UcellinoControl.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.3" ScaleY="0.3"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform X="-263"/>
</TransformGroup>
</local:UcellinoControl.RenderTransform>
</local:UcellinoControl>
</Grid>
</UserControl>
效果
