Silverlight之我见——制作星星闪烁动画

 

圣诞节来了，无聊，做点东西纪念一下。

原理很简单，生成1000个圆，从随机数来布置它们的位置，通过动画来处理它们的透明度，动画时长也是随机生成。

 

1、创建图形数组并设置背景透明，渐变笔触，大小等，而后加入到Grid元素的子元素集中；

2、创建动画时间线；

3、加载完成后播放动画；

4、每一轮动画播放完毕后，重新随机生成一下图形的Margin，动画的时间长度也是随机生成。

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes; 

namespace RandEllipseSample
{
    public partial class MainPage : UserControl
    {
        int shapesCount = 500; //图形数组的容量
        //随机大小的上限
        int theMaxW = 1300;
        int theMaxH = 720;
        Random rand = null;
        Storyboard story = null;
        Ellipse[] myShapes = null;
        public MainPage()
        {
            InitializeComponent();
            rand = new Random();
            story = new Storyboard();
            story.Completed += new EventHandler(story_Completed);
            InitShapes();
            InitAnimation();
            //加载完成后马上播放动画
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        } 

        void MainPage_Loaded(object sender,RoutedEventArgs e)
        {
            story.Begin();
        } 

        void story_Completed(object sender,EventArgs e)
        {
            for (int x = 0; x < shapesCount; x++)
            {
                myShapes[x].Margin = new Thickness(Convert.Todouble(rand.Next(0,theMaxW)),Convert.Todouble(rand.Next(0,theMaxH)),0);
            }
            InitAnimation();
        } 

        /// <summary>
        /// 初始化形状数组
        /// </summary>
        private void InitShapes()
        {
            myShapes = new Ellipse[shapesCount];
            //实例化所有成员
            for (int n = 0; n < shapesCount; n++)
            {
                myShapes[n] = new Ellipse();
                myShapes[n].Fill = new SolidColorBrush(Colors.Transparent);
                myShapes[n].strokeThickness = 2d;
                //笔触为线性渐变
                LinearGradientBrush gBrush = new LinearGradientBrush();
                gBrush.StartPoint = new Point(0,0);
                gBrush.EndPoint = new Point(1,1);
                gBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.Yellow,Offset = 0
                });
                gBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.Red,Offset = 0.25
                });
                gBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.White,Offset = 0.5
                });
                gBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.Blue,Offset = 0.75
                });
                myShapes[n].stroke = gBrush;
                //位置
                myShapes[n].Margin = new Thickness(Convert.Todouble(rand.Next(0,0);
                //大小
                myShapes[n].Width = 10;
                myShapes[n].Height = 10;
                myShapes[n].HorizontalAlignment = HorizontalAlignment.Left;
                myShapes[n].VerticalAlignment = VerticalAlignment.Top;
                //加入可视化树
                this.LayoutRoot.Children.Add(myShapes[n]);
            }
        } 

        /// <summary>
        /// 初始化动画
        /// </summary>
        private void InitAnimation()
        {
            story.Children.Clear();
            for (int i = 0; i < shapesCount; i++)
            {
                int mSecond = rand.Next(0,5);
                //透明度
                DoubleAnimation opacityAnimate = new DoubleAnimation();
                opacityAnimate.From = 1.0;
                opacityAnimate.To = 0.0;
                Storyboard.SetTarget(opacityAnimate,myShapes[i]);
                Storyboard.SetTargetProperty(opacityAnimate,new PropertyPath("Opacity"));
                opacityAnimate.Duration = new Duration(TimeSpan.FromSeconds(mSecond));
                opacityAnimate.RepeatBehavior = RepeatBehavior.Forever; 

                //将时间线添加到情节摘要
                story.Children.Add(opacityAnimate);
            }
        }
    }
}