Silverlight实现星星闪烁动画

本文实例为大家分享了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, 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,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;
        //加入可视化树
        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);
      }
    }
  }
}

效果图:

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

(0)

相关推荐

  • Silverlight实现跑马灯动画

    本文实例为大家分享了Silverlight实现跑马灯效果的具体代码,供大家参考,具体内容如下 主要功能有以下几点: 1.使用动画属性驱动图片运动动画 2.图片循环到最后一张后会自动循环 3.当鼠标放到图片时运动的图片会停止,当鼠标离开时暂停的图片会继续运动 4.当鼠标点击任何一个图片时,该图片会显示真正大小 XAML: <Grid x:Name="Layout" Background="White"> <Canvas x:Name="ca

  • Silverlightbutton图片切换样式实例代码

    之前一直做WPF现在开始接触Slilverlight感触很多. 今天做一个Button要求 有两个图片,button默认有一个图片,鼠标over时用另一个图片, 用wpf做的时候写一个template很简单,但silverlight和wpf写起来不一样 记录一下.大概思路是两个image鼠标MouseOver的时候一个Visible一个Collapsed 写的是一个自定义控件,代码和皮肤分离,很简单的一个demo 代码下载:ImageButtonTest.rar 先写一个继承自button的im

  • Silverlight实现星星闪烁动画

    本文实例为大家分享了Silverlight实现星星闪烁动画展示的具体代码,供大家参考,具体内容如下 原理很简单,生成1000个圆,从随机数来布置它们的位置,通过动画来处理它们的透明度,动画时长也是随机生成. 1.创建图形数组并设置背景透明,渐变笔触,大小等,而后加入到Grid元素的子元素集中: 2.创建动画时间线: 3.加载完成后播放动画: 4.每一轮动画播放完毕后,重新随机生成一下图形的Margin,动画的时间长度也是随机生成. 代码: using System; using System.C

  • android实现字体闪烁动画的方法

    本文实例讲述了android实现字体闪烁动画的方法.分享给大家供大家参考.具体如下: 这里基于线程和Timer实现Android的字体闪烁动画效果. public class ActivityMain extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); spark(); } pr

  • android实现图片闪烁动画效果的两种实现方式(实用性高)

    大家在使用APP的时候,有的APP在点击语音搜索界面后,会出现一个小话筒,小话筒会类似雷达似得在闪烁,表示正在倾听你说话的内容(这个大家可以参照微软的必应APP),那么问题来了,这种动画效果是如何实现的呢?其实实现这种动画效果有很多种方法,最常见的是两种:第一种就是插入n张图片进行切换已达到如此目的,第二种就是通过改变一张图片的透明度来达到闪烁的效果.下面就分别讲一下通过这两种方法如何实现. 第一种:通过n张图片之间切换实现动画效果 这种方法的原理很简单,利用handler的延时机制在子线程中完

  • WPF实现文字粒子闪烁动画效果

    本文实例为大家分享了WPF实现文字粒子闪烁动画的具体代码,供大家参考,具体内容如下 实现效果如下: 思路:首先根据显示文本创建文本路径Geometry,然后在路径内随机生成圆形粒子并添加动画. 步骤: 1.粒子类Particle.cs public class Particle { /// <summary> /// 形状 /// </summary> public Ellipse Shape; /// <summary> /// 坐标 /// </summary

  • 原生js实现星星闪烁效果

    本文实例为大家分享了js实现星星闪烁效果的具体代码,供大家参考,具体内容如下 星星闪烁的原理其实很简单: html代码: <body style="background:#000"> <div id="stars_box"></div> </body> js: var stars_box=document.getElementById('stars_box'); //获取id为star_box的元素 var Obj=f

  • javascript实现消灭星星小游戏简单版

    来看看实现的效果图 游戏规则:双击颜色一样的星星,双击相同的部分就消失了 实例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" content="target-densitydpi=320,width=640,user-scalable=no" /> <noscript><meta http-equiv="refresh"

  • js实现星星闪特效

    本文实例为大家分享了js实现星星闪特效的具体代码,供大家参考,具体内容如下 效果如下 思路: 1.准备一张星星的图片 2.创建多个星星(可以利用for循坏) 3.求出可视网页的宽高 clientWidth,clientHeight 4.设置星星的随机坐标 利用 Math.random() 5.设置星星的缩放可以用css中的scale 6.设置星星的缩放延迟频率 animationDelay 7.给星星加动画(鼠标移动时,星星方法旋转) 代码如下 <style> *{ margin: 0; pa

  • JavaScript满天星导航栏实现方法

    说明 分享一个满天星导航栏的效果,代码不多,但效果挺好看,先看看效果图吧. 解释 实现这个效果,需要掌握的知识不用很多,知道简单的CSS,会用JS 获取元素, 能绑定事件基本就足够了. 好的,我们直接来看代码,注释已经写的很详细了,不想看有注释的,点这里点击预览. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> b

  • JavaScript利用canvas绘制流星雨效果

    目录 前言 需求分析 实现过程 1.绘制满天繁星 2.满天繁星闪起来 3.绘制流星 4.流星划过夜空 5.流星雨 6.merge视觉盛宴 前言 最近总是梦见一些小时候的故事,印象最深刻的就是夏天坐在屋顶上,看着满天的繁星,一颗,两颗,三颗...不由自主地开始了数星星的过程.不经意间,一颗流星划过夜间,虽然只是转瞬即逝,但它似乎比夜空中的其它繁星更吸引着我.听老人说,看见流星的时候许愿,愿望是可以实现的,此时早已把数星星抛之脑后,开始期待着下一颗流星的出现.但是那天晚上,流星再也没有出现,这也成了

随机推荐