[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

中添加如下代码

class="code_img_closed" src="/Upload/Images/2013071818/0015B68B3C38AA5B.gif" alt="" />logs_code_hide('59965bfc-12f9-4f7b-b6f9-bfc5180e67f8',event)" src="/Upload/Images/2013071818/2B1B950FA3DF188F.gif" alt="" />

   <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

其中Storyboard中RepeatBehavior属性设为Forever，无限循环。设定平移方式是沿Y轴平移，设定好关键时间对应的关键值（即相对位置）（你可以自行调整试试看是什么效果），用TargetName绑定作用的对象。然后在后台代码的MainPage中添加

Bounce.Begin();

这个是用来启动故事版的，运行程序，你会发现气球在竖直方向平移运动。

　　之后尝试在气球（或者你的图片）运动到覆盖了我们的button时点击气球，看button有什么效果，是不是没有任何作用？因为气球将我们的鼠标“挡住了”，这可不是我们想要的结果。这里有一个属性，即鼠标的穿透事件，我们需要在Image的属性中的IsHitTestVisible设为false，默认为true，这样鼠标就可以穿透图片了。

<Image IsHitTestVisible="False" Name="img1" Source="/action/1.png" Margin="0,615,308,-350">
                <Image.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform/>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>

关于偏移动画就介绍这么多。接下来介绍一下翻转动画，怎么样一个图片翻转出来而不是直接显示出来。我们想要达到的效果是运行程序，图片不显示，点击按钮，图片翻转出来，点击除按钮和图片以外的区域图片翻转消失。

　　首先新建一个Windows phone应用程序，向其中添加一张图片和一个按钮，修改图片的代码如下

<Image Name="img1" HorizontalAlignment="Left" Height="136" Source="/Images/QuickLink_taobao.png" VerticalAlignment="Bottom"
                 Width="164" Visibility="Collapsed" Margin="251,0,0,226" Grid.Row="1">
            <Image.RenderTransform>
                <ScaleTransform/>
            </Image.RenderTransform>
        </Image>

我们将image的Visibility属性设为Collapsed让它不可见，同时定义了图片的变幻方式。

修改按钮代码如下

<Button Content="按钮" HorizontalAlignment="Left" VerticalAlignment="Top" 
                Name="button2" Margin="100,87,0,0" Grid.Row="1" ManipulationStarted="OnButtonManipulationStarted"/>

其中具体位置参数自行设定。同样为了实现动画效果，我们要为图片的出现和消失创建两个故事板

    <phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimationUsingKeyFrames x:Name="Daukf" Duration=" 0:0:1" 
                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                                           Storyboard.TargetName="img1">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseIn"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Name="Storyboard2">
            <DoubleAnimationUsingKeyFrames Duration="0:0:1"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" 
                                           Storyboard.TargetName="img1">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

为图片的出现和消失创建故事版

绑定作用对象为img1，在后台代码中添加点击按钮的ManipulationStarted事件

      void OnButtonManipulationStarted(object sender, ManipulationStartedEventArgs args)
      {
         img1.Visibility = System.Windows.Visibility.Visible;
         Storyboard2.Begin();
         args.Complete();
         args.Handled = true;
      }

 

args.Handled = true代表该事件已经处理过了，不需要再进一步向上传送处理，这涉及到路由事件，大家可以自己去看一看，这不是今天的重点，不再介绍。这段代码将imag1的可见性设为可见，图片就出现了，此时故事版2启动，动画相应启动。

之后添加点击其它区域让图片消失的代码，我们需要重载OnManipulationStarted

protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
      {
         if (e.OriginalSource != img1)
         {
            Storyboard1.Begin();
            Storyboard1.Completed += (o, args) =>
               {                
                  img1.Visibility = Visibility.Collapsed;
               };
          }
      }

判断点击的区域，不是img1则故事板1启动，当动画完成后，图片消失。如果不等动画完成就直接让图片消失的话则不会看到动画效果。运行程序看一下我们的成果吧。

至于旋转动画、缩放动画、倾斜动画等读者可以去买一本书看看或者去网上搜一搜，都是大同小异，以后有时间我会继续向大家介绍，今天就介绍到这里。

　　总结一下，今天重点介绍了Storyboard的偏移动画和翻转动画，这其中又夹杂了一些实际项目中遇到的的像鼠标穿透事件、路由事件的处理等。没有单独向大家介绍某项单独技术而是用在实际开发项目中介绍我认为会更具有实际意义，相信对大家是有帮助的。这里提一下，为什么图片的显示没有用button的Click事件而是用的ManipulationStarted呢，大家可以试一下会出现什么效果。图片一定也能出现，但消失呢？自己试试吧！

　　下一讲将向大家介绍新生助手助手第二页中运用的动态磁帖，期待大家继续关注。如果大家发现什么问题尽管评论或者发送邮件到1031733198@qq.com，我会尽快给大家回复，如果是错误我会尽快修正。