快捷導(dǎo)航

Silverlight實(shí)現(xiàn)星星閃爍動(dòng)畫

更新時(shí)間：2018年07月04日 11:56:56 作者：東邪獨(dú)孤

這篇文章主要為大家詳細(xì)介紹了Silverlight實(shí)現(xiàn)星星閃爍動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Silverlight實(shí)現(xiàn)星星閃爍動(dòng)畫展示的具體代碼，供大家參考，具體內(nèi)容如下

原理很簡(jiǎn)單，生成1000個(gè)圓，從隨機(jī)數(shù)來(lái)布置它們的位置，通過(guò)動(dòng)畫來(lái)處理它們的透明度，動(dòng)畫時(shí)長(zhǎng)也是隨機(jī)生成。

1、創(chuàng)建圖形數(shù)組并設(shè)置背景透明，漸變筆觸，大小等，而后加入到Grid元素的子元素集中；
2、創(chuàng)建動(dòng)畫時(shí)間線；
3、加載完成后播放動(dòng)畫；
4、每一輪動(dòng)畫播放完畢后，重新隨機(jī)生成一下圖形的Margin，動(dòng)畫的時(shí)間長(zhǎng)度也是隨機(jī)生成。

代碼：

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; //圖形數(shù)組的容量
    //隨機(jī)大小的上限
    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();
      //加載完成后馬上播放動(dòng)畫
      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, 0);
      }
      InitAnimation();
    } 
 
    /// <summary>
    /// 初始化形狀數(shù)組
    /// </summary>
    private void InitShapes()
    {
      myShapes = new Ellipse[shapesCount];
      //實(shí)例化所有成員
      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,theMaxW)), Convert.ToDouble(rand.Next(0,theMaxH)), 0, 0);
        //大小
        myShapes[n].Width = 10;
        myShapes[n].Height = 10;
        myShapes[n].HorizontalAlignment = HorizontalAlignment.Left;
        myShapes[n].VerticalAlignment = VerticalAlignment.Top;
        //加入可視化樹(shù)
        this.LayoutRoot.Children.Add(myShapes[n]);
      }
    } 
 
    /// <summary>
    /// 初始化動(dòng)畫
    /// </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; 
 
        //將時(shí)間線添加到情節(jié)摘要
        story.Children.Add(opacityAnimate);
      }
    }
  }
}

效果圖：