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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。