Windows Phone 8.1 动画

network | | 访问(37)
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <Storyboard x:Name="SplineKeyStoryBoard">
            <!--对第一个矩形的Canvas.Top属性使用样条关键帧动画-->
            <DoubleAnimationUsingKeyFrames
                                        Storyboard.TargetName="rect"
                                        Storyboard.TargetProperty="(Canvas.Top)"
                                        Duration="0:0:10"
                                        RepeatBehavior="Forever">
                <SplineDoubleKeyFrame Value="0" KeyTime="0:0:10" KeySpline="0.0,1.0 1.0,0.0" />
            </DoubleAnimationUsingKeyFrames>
            <!--对第一个矩形的Canvas.Left属性使用线性关键帧动画-->
            <DoubleAnimationUsingKeyFrames
                                        Storyboard.TargetName="rect"
                                        Storyboard.TargetProperty="(Canvas.Left)"
                                        Duration="0:0:10"
                                        RepeatBehavior="Forever">
                <LinearDoubleKeyFrame Value="400" KeyTime="0:0:10" />
            </DoubleAnimationUsingKeyFrames>
            <!--对第二个矩形的Canvas.Top属性使用线性关键帧动画-->
            <DoubleAnimationUsingKeyFrames
                                        Storyboard.TargetName="rect2"
                                        Storyboard.TargetProperty="(Canvas.Top)"
                                        Duration="0:0:10"
                                        RepeatBehavior="Forever">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:10"/>
            </DoubleAnimationUsingKeyFrames>
            <!--对第二个矩形的Canvas.Left属性使用线性关键帧动画-->
            <DoubleAnimationUsingKeyFrames
                                        Storyboard.TargetName="rect2"
                                        Storyboard.TargetProperty="(Canvas.Left)"
                                        Duration="0:0:10"
                                        RepeatBehavior="Forever">
                <LinearDoubleKeyFrame Value="400" KeyTime="0:0:10" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,35,0,28">
        <TextBlock Text="我的应用程序" FontSize="20"  />
        <TextBlock Text="动画" FontSize="60" />
    </StackPanel>

    <Canvas x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >
        <!--第一个矩形的运动轨迹是采用样条关键帧的方式向从左下角向右上角用变化的加速度运动-->
        <Rectangle x:Name="rect" Width="50" Height="50" Fill="Purple" Canvas.Top="400" Canvas.Left="0"/>
        <!--第二个矩形的运动轨迹是采用线性关键帧的方式向从左下角向右上角匀速运动-->
        <Rectangle x:Name="rect2" Width="50" Height="50" Fill="Red" Canvas.Top="400" Canvas.Left="0"/>
        <Button Content="运行动画" Canvas.Top="450" Click="Button_Click_1"></Button>
    </Canvas>
</Grid>
private void Button_Click_1(object sender, RoutedEventArgs e) {
    SplineKeyStoryBoard.Begin();
}