WP8.1 Study3：WP8.1中Animation应用

WP8.1上的Animation动画的API和WIN8/WIN8.1上的差不多，网上可以找到很多资料，同时可以去MSDN看官方文档。

下面是我参考一些资料，写出来的例子，希望以后有用。

xaml代码如下：

<Grid>
        <StackPanel>
            <StackPanel.Resources>
                <!--DoubleAnimation-->
                <Storyboard x:Name="showAnimation">
                    <DoubleAnimation Storyboard.TargetName="animatedImage"
                                     Storyboard.TargetProperty="Opacity"
                                     From="0"
                                     To="1"
                                     Duration="0:0:2"/>
                </Storyboard>
                <Storyboard x:Name="HideAnimation">
                    <DoubleAnimation Storyboard.TargetName="animatedImage"
                                     Storyboard.TargetProperty="Opacity"
                                     From="1" 
                                     To="0"
                                     Duration="0:0:2"/>
                </Storyboard>
                <!--FadeTheAnimation-->
                <Storyboard x:Name="fadeinAnimation">
                    <FadeInThemeAnimation Storyboard.TargetName="animatedrectangle"
                                          FillBehavior="HoldEnd"
                                          SpeedRatio="8"
                                          Duration="0:0:4"/>
                </Storyboard>
                <Storyboard x:Name="fadeoutAnimation">
                    <FadeOutThemeAnimation Storyboard.TargetName="animatedrectangle"
                                           SpeedRatio="0.1"
                                           Duration="0:0:4"/>
                </Storyboard>
                <!--ColorAnimation-->
                <Storyboard x:Name="coloranimation">
                    <ColorAnimation Storyboard.TargetName="animatedEllipse"
                                    Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
                                    From="Red"
                                    To="Blue"
                                    Duration="0:0:2"/>
                </Storyboard>
                <!--
                    PointerDownThemeAnimation - 鼠标（手指）在控件上按下时的动画
                -->
                <Storyboard x:Name="storyboardPointerDown">
                    <PointerDownThemeAnimation Storyboard.TargetName="border" />
                </Storyboard>

                <!--
                    PointerUpThemeAnimation - 鼠标（手指）在控件上抬起时的动画
                -->
                <Storyboard x:Name="storyboardPointerUp">
                    <PointerUpThemeAnimation Storyboard.TargetName="border" />
                </Storyboard>
        
            </StackPanel.Resources>
            
            <!--控件-->
            <Button Name="show" Content="show" Width="80" Height="50" Click="show_Click"/>
            <Button Name="hide" Content="hide" Width="80" Height="50" Click="hide_Click"/>
            <Image Name="animatedImage"
                   Source="blue.png"
                   Opacity="0"
                   Width="100"
                   Height="100"
                   ImageOpened="animatedImage_ImageOpened"/>
            <Rectangle Name="animatedrectangle"  Fill="RosyBrown" Width="100" Height="100"/>
                <Ellipse Name="animatedEllipse"  Fill="Red" Width="100" Height="100"/>
            <Border Name="border" BorderThickness="5" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100" HorizontalAlignment="Left">
                <Border.Child>
                    <TextBlock Text="我是 Border 里的内容" FontSize="24.667" TextAlignment="Center" VerticalAlignment="Center" />
                </Border.Child>
            </Border>
        </StackPanel>

    </Grid>

当前页面的主要C#代码如下：

 private void show_Click(object sender, RoutedEventArgs e)
        {
            showAnimation.Begin();
            fadeinAnimation.Begin();
            coloranimation.Begin();
            storyboardPointerUp.Begin();
        }

        private void hide_Click(object sender, RoutedEventArgs e)
        {
            HideAnimation.Begin();

            fadeoutAnimation.Begin();
            storyboardPointerDown.Begin();
        }

        private void animatedImage_ImageOpened(object sender, RoutedEventArgs e)
        {

        }