[windows phone开发]新生助手的开发过程与体会二

　　上一讲咱们谈了新生助手主页的基本的设计，今天我们谈一谈关于展现实景地图时等动画的设计，即Storyboard的应用。

　　在Windows phone中，Storyboard类表示通过时间线控制动画，并为其子动画提供对象和属性目标信息。它就相当于一个盒子，里面装有其他的动画对象，如DoubleAnimation、DoubleAnimationUsingKeyFrames...，我们可以分别为它们制定BeginTime，从而控制它们启动的时间。Storyboard提供了6个常用的动画属性选项，它们分别是AutoReverse（根据执行路线反向回到初始状态）、BeginTime、Duration、FillBehaviour、RepeatBehavior和SpeedRatio。

　　首先介绍一下偏移动画：主页的气球就是利用的偏移动画。偏移动画使用的是TranslateTransform类来创建的，它表示在二维坐标系中平移对象。通过TransformGroup可以应用多种变换。　

　　利用工具箱向全景视图中添加一个image，将代码更改为

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Image Name="img1" Source="/action/1.png" Margin="0,615,308,-350">
                <Image.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform/>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
            <Image Name="img2" Source="/action/2.png" Margin="72,615,236,-350">
                <Image.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform/>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>           
        </Grid>

你可以添加任意张图片作为你想要制作的动画，此处只添两张。然后我们创建Storyboard绑定它们。在

phone:PhoneApplicationPage

中添加如下代码

   <phone:PhoneApplicationPage.Resources>
        <Storyboard RepeatBehavior="Forever" x:Name="Bounce">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:01" Storyboard.TargetName="img1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:06" Value="-1000"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:02" Storyboard.TargetName="img" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:06" Value="-1000"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

创建Storyboard