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哈哈~