Silverlight开发历程—动画（实现跑马灯效果）

概述主要功能有以下几点： 1、使用动画属性驱动图片运动动画 2、图片循环到最后一张后会自动循环 3、当鼠标放到图片时运动的图片会停止，当鼠标离开时暂停的图片会继续运动 4、当鼠标点击任何一个图片时，该图片会显示真正大小 XAML： <Grid x:Name="Layout" Background="White"> <Canvas x:Name="canvas" Backgro

主要功能有以下几点：

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,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开发历程—动画（实现跑马灯效果）全部内容，希望文章能够帮你解决Silverlight开发历程—动画（实现跑马灯效果）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。