十三、“自己”的动画——图片转换

第一步：在XAML文件中

（1）图片属性

  <Image x:Name="image" Source="ms-appx:///Assets/SmallLogo.png" HorizontalAlignment="Left" Height="100" Margin="153,87,0,0" VerticalAlignment="Top" Width="100" Tapped="Image_Tapped_1">
            <Image.Projection>
                <PlaneProjection x:Name="ppImage"></PlaneProjection>
            </Image.Projection>
        </Image>

（2）动画属性

 <Page.Resources>

        <Storyboard x:Name="sbImage" Completed="sbImage_Completed">

            <DoubleAnimation   Storyboard.TargetName="ppImage"

                                   Storyboard.TargetProperty="RotationX"  

                                  From="0" To="90" Duration="00:00:07">

            </DoubleAnimation>

        </Storyboard>

        <Storyboard x:Name="sbImage1">

            <DoubleAnimation   Storyboard.TargetName="ppImage"

                                   Storyboard.TargetProperty="RotationX"

                                   From="90" To="0" Duration="00:00:05">  

           </DoubleAnimation>

        </Storyboard>

    </Page.Resources>

第三步：在.cs文件中

//图片的点击事件。注意图片没有click事件，点击图片一般用Tapped方法

        private void Image_Tapped_1(object sender, TappedRoutedEventArgs e)

        {

            sbImage.Begin();   //点击图片之后动画开始播放

       }

//当动画播放完毕之后，就执行此方法

 private void sbImage_Completed(object sender, object e)

        {

            //变换图片，同时播放第二个动画

            image.Source = new BitmapImage(new Uri("ms-appx:///Assets/xiao_changba.png"));  

           sbImage1.Begin();

        }