windows phone：动画(二)

Silverlight动画目标

Silverlight动画都是基于时间的，你只需指定特定时间段内需要发生的改变，Silverlight的动画类会自动处理好剩下的工作。

Silverlight的动画的运行原理是改变特定对象的特定属性，该属性(即动画目标)必须是依赖属性。

Silverlight动画可用于double、Color、Point和Object类型，下面是相应的动画类：

Object

  DependencyObject(抽象)

    Timeline(抽象)

        DoubleAnimation

        DoubleAnimationUsingKeyFrames

        ColorAnimation

        ColorAnimationUsingKeyFrames

        PointAnimation

        PointAnimationUsingKeyFrames

        ObjectAnimationUsingKeyFrames

        Storyboard    --  故事板

下面是一个DoubleAnimation示例：

xaml文件片段如下所示：

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
           
            <Button Name="btn1"

                    Content="Button No. 1"
                    Grid.Row="0"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    RenderTransformOrigin="0.5 0.5"
                    Click="OnButtonClick">
                <Button.RenderTransform>
                    <RotateTransform x:Name="rotate1" />
                </Button.RenderTransform>
            </Button>

            <Button Name="btn2"

                    Content="Button No. 2"
                    Grid.Row="1"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    RenderTransformOrigin="0.5 0.5"
                    Click="OnButtonClick">
                <Button.RenderTransform>
                    <RotateTransform x:Name="rotate2" />
                </Button.RenderTransform>
            </Button>

            <Button Name="btn3"

                    Content="Button No. 3"
                    Grid.Row="2"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    RenderTransformOrigin="0.5 0.5"
                    Click="OnButtonClick">
                <Button.RenderTransform>
                    <RotateTransform x:Name="rotate3" />
                </Button.RenderTransform>
            </Button>
        </Grid>
    </Grid>

代码文件片段如下：

    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        void OnButtonClick(object sender, RoutedEventArgs args)
        {
            Button btn = sender as Button;
            RotateTransform rotateTransform = btn.RenderTransform as RotateTransform;

            // 定义和生成一个动画

            DoubleAnimation anima = new DoubleAnimation();
            anima.From = 0;
            anima.To = 360;
            anima.Duration = new Duration(TimeSpan.FromSeconds(0.5));  //设置动画耗时，这里为0.5秒

            // 设置附加属性

            Storyboard.SetTarget(anima, rotateTransform);  //使动画与特定对象关联
            Storyboard.SetTargetProperty(anima, new PropertyPath(RotateTransform.AngleProperty));  //使动画与特定属性关联

            // 生成storyboard，把动画加进去并启动

            Storyboard storyboard = new Storyboard();
            storyboard.Children.Add(anima);
            storyboard.Begin();
        }
    }

运行程序后，被单击的按钮就会在0.5秒旋转一周。

当然，你也可以将动画定义在xaml文件中，如将上面例子作修改，在上面的xaml文件中附加下面的定义：

    <phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="storyboard1">
            <DoubleAnimation Storyboard.TargetName="btn1"             //注意它与下面第三个的目标对象的不同之处
                             Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"    //注意它与下面第二个目标对象属性的不同写法

                             From="0" To="360" Duration="0:0:0.5" />     //Duration的三个数字分别表示  ： 小时、分钟和秒，当然也可以在小时前增加天数等其他时间段
        </Storyboard>

        <Storyboard x:Name="storyboard2">
            <DoubleAnimation Storyboard.TargetName="btn2"
                             Storyboard.TargetProperty="(Button.RenderTransform).Angle"     //这个是简化语法

                             From="0" To="360" Duration="0:0:0.5" />
        </Storyboard>

        <Storyboard x:Name="storyboard3">
            <DoubleAnimation Storyboard.TargetName="rotate3"
                             Storyboard.TargetProperty="Angle"
                             From="0" To="360" Duration="0:0:0.5" />
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

修改代码文件片段如下：

        void OnButtonClick(object sender, RoutedEventArgs args)
        {
            if (sender == btn1)

            {
                storyboard1.Begin();

            }else if (sender == btn2)
            {
                storyboard2.Begin();
            }else if (sender == btn3)

            {
                storyboard3.Begin();

            }
        }

一些动画属性

如果动画类定义了Duration属性，如

anima.Duration = new Duration(TimeSpan.FromSeconds(0.5));

但你又为storyboard设置了更小的Duration值，如

storyboard.Duration = new Duration(TimeSpan.FromSeconds(0.25));

这将导致动画在0.25秒时被截断。默认情况下，storyboard的持续时间其持续时间最长的子元素的时限。

如果想让动画在1秒后启动，可这样设置

anima.BeginTime = TimeSpan.FromSeconds(1);

如果想让动画值From到To逆转，可这样设置

anima.AutoReverse = true; //这样值先从From到To走一遍后，再从To到From走一遍

如果想让动画重复运行，可这样设置

anima.RepeatBehavior = new RepeatBehavior(3);   //  这里的3指的是一共执行的次数，如你将该值设置为1则跟不设置该属性时是一样的