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)

        {

        }