silverlight中 Storyboard(动画)的使用，实现球的上下循环移动，左右移动，及旋转功能

  话说，总结应该是个收获的心情，可现在的自己似乎没感觉到哪个喜悦的心情，说明自己做得还不够好，现在还是把一些做好的东西总结下。“总结”是学习，工作中必须的，不能偷这个懒 o(╯□╰)o

实现上下循环移动的关键代码是：

  首先创建一个计时器

            rollTimer = new DispatcherTimer();

            rollTimer.Interval = TimeSpan.FromMilliseconds(1000);

            rollTimer.Tick += new EventHandler(rollTimer_Tick);

            rollTimer.Start();

   此计时器设置的间隔期是1秒 也就是说1秒后会触发此事件rollTimer_Tick，然后我在此事件中，让球从上往下移动(用时0.5秒),然后此动画（故事板Storyboard)结束后，触发另一个事件（这个事件的控制是，让球从下往上移动，用时0.5秒），这样在这1秒中，球就实现了，上下循环移动。然后计时器的控制，可隔1秒后触发rollTimer_Tick事件，也就是说能让它循环。到一定的时间，将计时器停止就可将该事件停止。

  rollTimer_Tick中的关键代码为：

 public void rollTimer_Tick(object sender,EventArgs e)

        {

            DoubleAnimation da = new DoubleAnimation();

            da.From = 55;

            da.To = 65;

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

            Storyboard.SetTarget(da, ellipse);

            sbd.Completed += new EventHandler(sbd_Completed);

            sbd.FillBehavior = FillBehavior.HoldEnd;

            sbd.Children.Add(da);

            sbd.Begin();

        }

 

  故事板结束后触发的事件sbd_Completed为：

  #region 下半部分，使其由下往上移动

        private void sbd_Completed(object sender, EventArgs e)

        {

            if (i == 10)

            {

                rollTimer.Stop();

                NumTimer.Stop();

            }

            else

            {

                sbd.Stop();

                sbd.Children.Clear();

                DoubleAnimation da = new DoubleAnimation();

                da.From = 65;

                da.To = 55;

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

                Storyboard.SetTarget(da, ellipse);



                Storyboard.SetTargetProperty(da, new PropertyPath(Canvas.TopProperty));

                sbd.FillBehavior = FillBehavior.HoldEnd;

                sbd.Children.Add(da);

                sbd.Children.Add(da11);

                sbd.Begin();

            }

        }

实现左右移动的关键代码是：

 能实现上下移动，左右移动也就同理了，只要改变一下  Storyboard.SetTargetProperty(da11, new PropertyPath(Canvas.TopProperty));  这个代码，让Canvas.TopProperty 变为Canvas.LeftProperty即可。

 

            Storyboard sbd = new Storyboard();

            DoubleAnimation da = new DoubleAnimation();

            da.From = 60;

            da.To = 340;

            da.Duration = new Duration(TimeSpan.FromSeconds(2));

            Storyboard.SetTarget(da, ellipse5);

            Storyboard.SetTargetProperty(da, new PropertyPath (Canvas.LeftProperty));

            sbd.Children.Add(da);

 

实现旋转的关键代码是:
 首先看下我xaml的布局，对球是这样设计的

<Ellipse x:Name="ellipse5" Canvas.Top="60" Canvas.Left="340" Width="55" Height="55"  Stroke="Black" StrokeThickness="1" >

                    <Ellipse.Fill>

                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                            <GradientStop Offset="0" Color="#E2E0C8"   />

                            <GradientStop Offset="1" Color="#FFFF00"  />

                            <GradientStop Offset="0.4" Color="#978B00"/>

                            <GradientStop Offset="0.6" Color="#686001"/>

                            <GradientStop Offset="0.8" Color="#978B00"/>

                        </LinearGradientBrush>

                    </Ellipse.Fill>

                    <Ellipse.RenderTransform>

                        <RotateTransform Angle="0" CenterX="25" CenterY="25"></RotateTransform>

                    </Ellipse.RenderTransform>

                </Ellipse>

这一行代码 <RotateTransform Angle="0" CenterX="25" CenterY="25"></RotateTransform> 是设置球的旋转中心，旋转中心的设置为 CenterX=25,CenterY=25 而这个的设置又是球的Width="55" Height="55"，照理来说应该是其一半，所以其实25是有点不精确的 \(^o^)/~

后台控制其旋转的代码为：

 

            DoubleAnimation da11 = new DoubleAnimation();

            da11.From = 0;

            da11.To = 360;

            da11.Duration = new Duration(TimeSpan.FromSeconds(2));

            Storyboard.SetTarget(da11, ellipse5);

            Storyboard.SetTargetProperty(da11, new PropertyPath("(Ellipse.RenderTransform).(RotateTransform.Angle)"));

 

注意不同的点: From=0,To=360  和 Storyboard.SetTargetProperty(da11, new PropertyPath("(Ellipse.RenderTransform).(RotateTransform.Angle)")); 这样也就控制了其角度从0度旋转到360度，看起来也就像是圆的旋转咯。

最后效果图：

 

虽然看不出动画效果，嗯，我是想纪念下我实现了我想要的效果，O(∩_∩)O哈哈~