使用Silverlight怎么实现跑马灯动画

使用Silverlight怎么实现跑马灯动画？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

专业领域包括成都网站制作、做网站、外贸营销网站建设、商城网站开发、微信营销、系统平台开发， 与其他网站设计及系统开发公司不同，创新互联建站的整合解决方案结合了帮做网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，为客户提供全网互联网整合方案。

主要功能有以下几点：

1、使用动画属性驱动图片运动动画

2、图片循环到最后一张后会自动循环

3、当鼠标放到图片时运动的图片会停止，当鼠标离开时暂停的图片会继续运动

4、当鼠标点击任何一个图片时，该图片会显示真正大小

XAML：

界面由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();
    }
    /// 

    /// 创建图片列表
    /// 
    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();
 
    }
    /// 

    /// 创建故事面板
    /// 
    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用来承载图片代码如下：

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怎么实现跑马灯动画
网站地址：http://6mz.cn/article/ipdjic.html