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则跟不设置该属性时是一样的

 3 total views,  1 views today

页面下部广告