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