欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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;
      }
    }
  }

这样就完成了跑马灯的效果,如图:

Silverlight实现跑马灯动画

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:

下一篇: