当前位置: 首页 > 编程笔记 >

Silverlight实现星星闪烁动画

姜钧
2023-03-14
本文向大家介绍Silverlight实现星星闪烁动画,包括了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);
      }
    }
  }
}

效果图:

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

 类似资料:
  • 本文向大家介绍JS实现星星海特效,包括了JS实现星星海特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现星星海特效的具体代码,供大家参考,具体内容如下 知识点 1.CSS使用@keyframes自定义动画,使用animation调用自定义动画 2.opacity 透明度。从 0.0 (完全透明)到 1.0(完全不透明) 3.CSS中transform 4.animation

  • 本文向大家介绍vue实现评价星星功能,包括了vue实现评价星星功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue实现评价星星的具体代码,供大家参考,具体内容如下 代码: 关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍js实现漫天星星效果,包括了js实现漫天星星效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下 效果图: 实现代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Unity3D Shader实现动态星空,包括了Unity3D Shader实现动态星空的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Unity3D Shader实现动态星空的具体代码,供大家参考,具体内容如下 Spec:亮度 Rotation:开始旋转角度,可以调节 RotationSpeed:旋转速度 Fog开头:雾化效果,可以看算法实现 以上就是本文的全部内容,

  • 本文向大家介绍canvas实现十二星座星空图,包括了canvas实现十二星座星空图的使用技巧和注意事项,需要的朋友参考一下 效果如下: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍如何实现星星评价(jquery.raty.js插件),包括了如何实现星星评价(jquery.raty.js插件)的使用技巧和注意事项,需要的朋友参考一下 1、引入jquery.js文件 2、引入jquery.raty.js 3、页面中放在这个:<span class="readOnly" data-path="images" ><i>4.5</i></span> 4、js: 以上就是