【WP7】动画的使用

WP7中，提供了很多动画效果的使用，动画的表现效果其实跟Flash有点相似，通过定义始末状态和时间，然后通过两种状态的过渡达到动画效果

大部分控件都支持动画效果，首先看一个例子

例如：在Grid网格控件内部定义一个Ellipse椭圆控件，然后实现椭圆控件的动画效果

            <Grid.Resources>
                <Storyboard x:Name="std">
                    <DoubleAnimation Duration="0:0:1"
                    Storyboard.TargetName="ellipse1" 
                    Storyboard.TargetProperty="Width" By="110"/>
                    <DoubleAnimation Duration="0:0:1"
                    Storyboard.TargetName="ellipse1"
                    Storyboard.TargetProperty="Height" From="50" To="400"/>
                </Storyboard>
            </Grid.Resources>
            
            <Ellipse Height="133" HorizontalAlignment="Left" Margin="55,52,0,0" Name="ellipse1" Stroke="Black"
            StrokeThickness="1" VerticalAlignment="Top" Width="231" />

 

　　　　1、首先定义Grid的资源Storyboard，std表示资源的名字，可以通过改名字对该资源进行操作（开始播放动画，停止等），添加控件ellipse1

　　　　2、Storyboard ：用来描述与控制一个或多个动画

　　　　3、DoubleAnimation ：一种类型的动画，通过属性的改变，过渡实现动画，比如Width

　　　　　 ColorAnimation ：颜色改变动画，下面会演示

　　　　　 PointAnimation ：坐标点改变动画，下面会演示

　　　　4、属性

　　　　　　Duration　　　　　　　　　　　　时间段，设置动画时间

　　　　　　Storyboard.TargetName　　　　目标控件的名字（ellipse1）

　　　　　　Storyboard.TargetProperty　　 目标控件的属性（Width）

　　　　　　By 　　　　　　　　　　　　　　 改变量，为负时表示减，为正时表示增

　　　　　　From/To　　　　　　　　　　　　设置属性值的始末值

　　　　　　RepeatBehavior　　　　　　　　动画播放次数，设为Forever表示一直循环播放

　　　　5、最后通过代码使动画启动

    　　this.std.Begin();
    　　this.std.Stop();

 

　　

　　ColorAnimation 和 PointAnimation 的用法和DoubleAnimation相似，不做过多说明，大家试一下就会懂了，下面演示一下用法，具体效果就不贴出来了，大家自己做出来的应该会更有信心的，敲一下吧（有些代码建议自己敲，不要直接copy，这样可以加深印象）

            <Grid.Resources>
                <Storyboard x:Name="std">
                    <DoubleAnimation Duration="0:0:1" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Width" By="110"/>
                    <DoubleAnimation Duration="0:0:1" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Height" To="400"/>
                    
                    <ColorAnimation Duration="0:0:2" Storyboard.TargetName="g1" Storyboard.TargetProperty="Color" From="LightBlue" To="Green" RepeatBehavior="Forever"/>
                    <ColorAnimation Duration="0:0:3" Storyboard.TargetName="g2" Storyboard.TargetProperty="Color" From="Orange" To="Snow" RepeatBehavior="Forever"/>
                    <ColorAnimation Duration="0:0:1" Storyboard.TargetName="g3" Storyboard.TargetProperty="Color" From="Yellow" To="Red" RepeatBehavior="Forever"/>
                    
                    <PointAnimation Duration="0:0:1" Storyboard.TargetName="lg" Storyboard.TargetProperty="StartPoint" To="0,0" />
                    <PointAnimation Duration="0:0:1" Storyboard.TargetName="lg" Storyboard.TargetProperty="EndPoint" To="100,100" />
                </Storyboard>
            </Grid.Resources>
            
            <Ellipse Height="133" HorizontalAlignment="Left" Margin="55,52,0,0" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="231">
                <Ellipse.Fill>
                    <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                        <GradientStop x:Name="g1" Color="Yellow" Offset="0"/>
                        <GradientStop x:Name="g2" Color="Green" Offset="0.5"/>
                        <GradientStop x:Name="g3" Color="Red" Offset="1"/>
                    </RadialGradientBrush>

                </Ellipse.Fill>
            </Ellipse>
            
            <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Orange" StrokeThickness="6">
                <Path.Data>
                    <LineGeometry x:Name="lg" StartPoint="300,400" EndPoint="10,10"/>
                </Path.Data>
            </Path>