Silverlight实现跑马灯动画
程序员文章站
2023-12-13 21:23:10
本文实例为大家分享了silverlight实现跑马灯效果的具体代码,供大家参考,具体内容如下
主要功能有以下几点:
1、使用动画属性驱动图片运动动画
2、图片循环到最...
本文实例为大家分享了silverlight实现跑马灯效果的具体代码,供大家参考,具体内容如下
主要功能有以下几点:
1、使用动画属性驱动图片运动动画
2、图片循环到最后一张后会自动循环
3、当鼠标放到图片时运动的图片会停止,当鼠标离开时暂停的图片会继续运动
4、当鼠标点击任何一个图片时,该图片会显示真正大小
xaml:
<grid x:name="layout" background="white"> <canvas x:name="canvas" background="black" grid.row="1" height="280"> <!--隐藏矩形以外的其它部分--> <canvas.clip > <rectanglegeometry x:name="rg" /> </canvas.clip> <stackpanel x:name="sp" orientation="horizontal" ></stackpanel> </canvas> <image x:name="img_full" width="640" height="480" visibility="collapsed" mouseleftbuttonup="img_full_mouseleftbuttonup" /> </grid>
界面由grid、canvas、stackpanel和一个image组成,image用来显示图片的真实尺寸。
public partial class demo : usercontrol { //定义 private storyboard storyboard; private const double photowidth = 320; private double totalwidth; public demo() { initializecomponent(); createphoto(); } /// <summary> /// 创建图片列表 /// </summary> private void createphoto() { string[] piclist = new string[] { "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg" }; //创建多组图片,保证图片不会出现空白,因为stackpanel是横向排列的,这样就可以把图片类似模拟的排成一圈 for (int i = 0; i < 3; i++) { //根据数组创建图片 for (int j = 0; j < piclist.length; j++) { uc_pic pic = new uc_pic(); pic.imageurl = "../images/photo/" + piclist[j]; pic.width = photowidth; //绑定事件 pic.mouseenter += new mouseeventhandler(pic_mouseenter); pic.mouseleave += new mouseeventhandler(pic_mouseleave); pic.mouseleftbuttonup += new mousebuttoneventhandler(pic_mouseleftbuttonup); //添加对象到stackpanel中 sp.children.add(pic); } } //计算图片的总宽度 totalwidth = -1.0 * photowidth * piclist.length; canvas.setleft(sp, totalwidth); //调用初始化 方法 createstoryboard(); //播放动画 storyboard.begin(); //重新绘制区域 resize(); } /// <summary> /// 创建故事面板 /// </summary> private void createstoryboard() { //创建故事面板 storyboard = new storyboard(); doubleanimation animation = new doubleanimation(); //设置动画延时 animation.duration = new duration(timespan.fromseconds(2.0)); //设置对象的作用属性 storyboard.settarget(animation, sp); storyboard.settargetproperty(animation, new propertypath("(canvas.left)", new object[0])); //添加到动画故事板内 storyboard.children.add(animation); //动画自动完成事件 storyboard.completed += new eventhandler(storyboard_completed); } //动画自动完成事件,当动画播放完成(结束)的时候。再次循环动画 void storyboard_completed(object sender, eventargs e) { doubleanimation animation = (doubleanimation)storyboard.children[0]; //取得图片当前位置 double left = canvas.getleft(sp); //如果图片已接近最后,就重新设置位置 if (left > (totalwidth - photowidth)) { animation.from = new double?(left); } //设置动画的起始值(from)所依据的总量(总长度) animation.by = new double?(totalwidth); //循环动画 storyboard.begin(); } private void resize() { //重新绘制显示区域 rg.rect = new rect(0, 0, this.actualwidth, 260); } void pic_mouseleftbuttonup(object sender, mousebuttoneventargs e) { //显示放大图片 uc_pic pic = sender as uc_pic; img_full.source = pic.photo.source; img_full.visibility = visibility.visible; } void pic_mouseleave(object sender, mouseeventargs e) { //继续动画 storyboard.resume(); } void pic_mouseenter(object sender, mouseeventargs e) { //暂停动画 storyboard.pause(); } private void img_full_mouseleftbuttonup(object sender, mousebuttoneventargs e) { //隐藏放大图片 img_full.visibility = visibility.collapsed; } private void usercontrol_sizechanged(object sender, sizechangedeventargs e) { //动画根据屏幕大小改变而改变 resize(); } }
同时还有一个usercontrol用来承载图片代码如下:
<canvas x:name="layoutroot" background="white"> <image x:name="photo" width="320" height="240" stretch="uniformtofill" margin="10" /> </canvas>
c#:
public partial class uc_pic : usercontrol { public uc_pic() { initializecomponent(); } private string _imgurl; public string imageurl { get { return this._imgurl; } set { //设置图片资源属性 this._imgurl = value; uri uri = new uri(value, urikind.relative); bitmapimage bitimg = new bitmapimage(uri); this.photo.source = bitimg; } } }
这样就完成了跑马灯的效果,如图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。