wp8实现关键帧动画

下面实例实现线性关键针动画

1、建一个圆，定一个平移类TranslateTransform和缩放类ScaleTransform

      <Ellipse Fill="Red" HorizontalAlignment="Left" Height="117" Margin="10,25,0,0" VerticalAlignment="Top" Width="117">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform x:Name="tt" />
                        <ScaleTransform x:Name="st"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>

然后我们定义Storyboard启动线性关键帧动画的

<phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="sb">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="tt"  Storyboard.TargetProperty="X">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                <LinearDoubleKeyFrame Value="350" KeyTime="0:0:3"/>
                <!--<LinearDoubleKeyFrame Value="350" KeyTime="0:0:3.6"/>-->
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:6.6"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="st" Storyboard.TargetProperty="CenterX">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                <LinearDoubleKeyFrame Value="350" KeyTime="0:0:3"/>
                <!--<LinearDoubleKeyFrame Value="350" KeyTime="0:0:3.6"/>-->
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:6.6"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleY">
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3"/>
                <LinearDoubleKeyFrame Value="1.2" KeyTime="0:0:3.3"/>
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3.6"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleX">
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3"/>
                <LinearDoubleKeyFrame Value="0.8" KeyTime="0:0:3.3"/>
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3.6"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

效果实现小球的压缩反弹

下面实例实现样条关键针动画

1、定义一个圆

    <Ellipse Fill="Red" HorizontalAlignment="Left" Height="100" Margin="169,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="109" MouseLeftButtonDown="Ellipse_MouseLeftButtonDown_1">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="st" Y="0" />
                </Ellipse.RenderTransform>
            </Ellipse>

然后我们定义Storyboard启动样条关键帧动画

   <Grid.Resources>
                <Storyboard x:Name="sb">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="st" Storyboard.TargetProperty="Y">
                        <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                        <SplineDoubleKeyFrame Value="550" KeyTime="0:0:1" KeySpline="0,0 1,0"/>
                        <SplineDoubleKeyFrame Value="250" KeyTime="0:0:1.8" KeySpline="0,0 0,1"/>
                        <SplineDoubleKeyFrame Value="500" KeyTime="0:0:2.4" KeySpline="0,0 1,0"/>
                        
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>

样条关键针动画与线性关键针的区别在于速度的变化，样条关键针动画可以自由控制一个时间段内的速度的变化，类似于重力加速度

下面实例实现离散关键针动画

1、定义一个圆

  <Ellipse MouseLeftButtonDown="Ellipse_MouseLeftButtonDown_1" Margin="45,47,59,224">
                <Ellipse.Fill>
                    <RadialGradientBrush x:Name="rgb" GradientOrigin="0.5,0.5">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="White" Offset="0"/>
                            <GradientStop Color="Blue" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>

然后我们定义Storyboard启动离散动画的

    <Grid.Resources>
                <Storyboard x:Name="sb">
                    <PointAnimationUsingKeyFrames Storyboard.TargetName="rgb" Storyboard.TargetProperty="GradientOrigin"  RepeatBehavior="Forever">
                        <DiscretePointKeyFrame Value="0.1,0.3" KeyTime="0:0:0"/>
                        <DiscretePointKeyFrame Value="0.2,0.4" KeyTime="0:0:1"/>
                        <DiscretePointKeyFrame Value="0.3,0.5" KeyTime="0:0:2"/>
                        <DiscretePointKeyFrame Value="0.4,0.6" KeyTime="0:0:3"/>
                        <DiscretePointKeyFrame Value="0.5,0.7" KeyTime="0:0:4"/>
                        <DiscretePointKeyFrame Value="0.6,0.8" KeyTime="0:0:5"/>
                        <DiscretePointKeyFrame Value="0.7,0.9" KeyTime="0:0:6"/>
                    </PointAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>

离散关键帧动画相对于前面两种的区别在于它是从一个点直接到另外一个点的不是平滑移动的