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

本文实例为大家分享了WPF实现文字粒子闪烁动画的具体代码,供大家参考,具体内容如下

实现效果如下:

思路:首先根据显示文本创建文本路径Geometry,然后在路径内随机生成圆形粒子并添加动画。

步骤:

1、粒子类Particle.cs

public class Particle
 {
    /// <summary>
    /// 形状
    /// </summary>
    public Ellipse Shape;
    /// <summary>
    /// 坐标
    /// </summary>
    public Point Position;
}

2、粒子系统ParticleSystem.cs

/// <summary>
/// 粒子路径
/// </summary>
private Geometry particleGeometry;

/// <summary>
/// 粒子个数
/// </summary>
private int particleCount = 100;

/// <summary>
/// 粒子最小尺寸
/// </summary>
private static int sizeMin = 10;

/// <summary>
/// 粒子最大尺寸
/// </summary>
private int sizeMax = 20;

/// <summary>
/// 随机数
/// </summary>
private Random random;

/// <summary>
/// 粒子列表
/// </summary>
private List<Particle> particles;

/// <summary>
/// 粒子容器
/// </summary>
private Canvas containerParticles;

    public ParticleSystem(Geometry _path, int _maxRadius, int _particleCount, Canvas _containerParticles)
    {
      particleGeometry = _path;
      particleCount = _particleCount;
      sizeMax = _maxRadius;
      containerParticles = _containerParticles;
      random = new Random();
      particles = new List<Particle>();
      SpawnParticle();
    }

    /// <summary>
    /// 初始化粒子
    /// </summary>
    private void SpawnParticle()
    {
      //清空粒子队列
      particles.Clear();
      containerParticles.Children.Clear();

      //生成粒子
      for (int i = 0; i < particleCount; i++)
      {
        double size = random.Next(sizeMin, sizeMax + 1);
        while(true)
        {
          Point po = new Point(random.Next((int)particleGeometry.Bounds.Left, (int)particleGeometry.Bounds.Right), random.Next((int)particleGeometry.Bounds.Top, (int)particleGeometry.Bounds.Bottom));
          if (particleGeometry.FillContains(po, 2, ToleranceType.Absolute))
          {
            Particle p = new Particle
            {
              Shape = new Ellipse
              {
                Width = size,
                Height = size,
                Stretch = System.Windows.Media.Stretch.Fill,
                Fill = GetRandomColorBursh(),
              },
              Position = po,
            };
            SetParticleSizeAnimation(p.Shape);
            particles.Add(p);
            Canvas.SetLeft(p.Shape, p.Position.X);
            Canvas.SetTop(p.Shape, p.Position.Y);
            containerParticles.Children.Add(p.Shape);
            break;
          }
        }
      }
    }

    /// <summary>
    /// 设置粒子大小动画
    /// </summary>
    private void SetParticleSizeAnimation(Ellipse p)
    {
      Storyboard sb = new Storyboard();
      //动画完成事件 再次设置此动画
      sb.Completed += (S, E) =>
      {
        SetParticleSizeAnimation(p);
      };
      int size = random.Next(sizeMin, sizeMax + 1);
      int time = random.Next(100, 1000);
      DoubleAnimation daX = new DoubleAnimation(size, new Duration(TimeSpan.FromMilliseconds(time)));
      DoubleAnimation daY = new DoubleAnimation(size, new Duration(TimeSpan.FromMilliseconds(time)));
      Storyboard.SetTarget(daX, p);
      Storyboard.SetTarget(daY, p);
      Storyboard.SetTargetProperty(daX, new PropertyPath("Width"));
      Storyboard.SetTargetProperty(daY, new PropertyPath("Height"));
      sb.Children.Add(daX);
      sb.Children.Add(daY);
      sb.Begin();
    }

    /// <summary>
    /// 获取随机颜色画刷
    /// </summary>
    private SolidColorBrush GetRandomColorBursh()
    {
      byte r = (byte)random.Next(128, 256);
      byte g = (byte)random.Next(128, 256);
      byte b = (byte)random.Next(128, 256);
      return new SolidColorBrush(Color.FromArgb(125, r, g, b));
}

3、主窗体交互

private ParticleSystem ps;

public MainWindow()
    {
      InitializeComponent();
      this.Loaded += MainWindow_Loaded;
    }

    private void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
      Geometry g = CreateTextPath("H E L L O", new Point(this.cvs_particleContainer.Margin.Left, this.cvs_particleContainer.Margin.Top), new Typeface(new FontFamily("Arial"), FontStyles.Normal, FontWeights.Bold, FontStretches.Normal), 200);
      ps = new ParticleSystem(g, 25, 350, this.cvs_particleContainer);
    }

    /// <summary>
    /// 创建文本路径
    /// </summary>
    /// <param name="word">文本字符串</param>
    /// <param name="point">显示位置</param>
    /// <param name="typeface">字体信息</param>
    /// <param name="fontSize">字体大小</param>
    /// <returns></returns>
    private Geometry CreateTextPath(string word, Point point, Typeface typeface, int fontSize)
    {
      FormattedText text = new FormattedText(word, new System.Globalization.CultureInfo("en-US"), FlowDirection.LeftToRight, typeface, fontSize, Brushes.Black);
      Geometry g = text.BuildGeometry(point);
      PathGeometry path = g.GetFlattenedPathGeometry();
      return path;
}

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

(0)

相关推荐

  • 不一样的文字闪烁 轮番闪烁

    文字闪烁 var speed=300; function m() { whattext.innerText="Jb51.net" setTimeout("e()",speed) } function e() { whattext.innerText="我们" setTimeout("m()",speed) } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

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

  • 利用JS实现文字的聚合动画效果

    前言 所谓文字聚合效果,原理就是将容器分为若干的小块,然后每个小块设置 background-poisition ,最后添加css3动画就可以了,去掉注释,也就仅仅20行的代码. 先来看看效果图: js代码如下: //c为列数,r为行数,把box划分成多少个小块 var box = document.querySelector('.boxWrap1'),c=4,r=8; //每个小块的宽高 var w = box.offsetWidth/c,h = box.offsetHeight/r; //循

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

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

  • WPF实现倒计时转场动画效果

    代码如下 一.创建 CountdownTimer.xaml 继承ContentControl代码如下. using System; using System.Linq; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windo

  • 利用Matlab复刻两款粒子爱心动画效果

    目录 粒子爱心1 效果图 粒子爱心2 效果图 粒子爱心1 function particleHeart1 % @author : slandarer % 调整背景及比例 ax=gca;hold on ax.DataAspectRatio=[1,1,1]; ax.XLim=[-25,25]; ax.YLim=[-25,20]; ax.Color=[0,0,0]; ax.XColor='none'; ax.YColor='none'; set(gcf,'Color',[0,0,0]); % 散点位置

  • iOS CAEmitterLayer实现粒子发射动画效果

    iOS实现粒子发射动画效果图 代码已上传 GitHub:https://github.com/Silence-GitHub/CoreAnimationDemo 动画效果用 CAEmitterLayer 实现.CAEmitterLayer 显示粒子发射动画,具体的粒子由 CAEmitterCell 封装.代码示例是展示 CAEmitterLayer 如何使用.为了方便,直接在控制器(UIViewController)中设置 CAEmitterLayer.如果在项目中使用,有时在自定义视图(UIVi

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

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

  • 原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果

    本文实例讲述了原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=gbk> <title>www.jb51.net 粒子效果演示</title> <meta name="description" content="HTML5/canva

  • iOS 屏幕解锁文字动画效果

    CAGradientLayer相信大家都比较熟悉,关于其如何使用,我就不在这里废话了,网上有很多介绍,想详细了解的话,可以去看看.我只简单说下如何利用CAGradientLayer制作屏幕解锁文字动画效果. 1.创建一个CAGradientLayer对象gradLayer,设置它的frame和label.bounds一样(这里要注意一下是Label的bounds不是frame); 2.这里我给gradLayer.colors一共设置了三个颜色值,首尾颜色透明度设置成0.3,中间的颜色值透明度保持

  • iOS实现知乎和途家导航栏渐变的文字动画效果

    效果图如下 分析如下: 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了毛玻璃效果,背景是一张图片 4.下拉放大图片效果 5.title文字动画效果 通过简单分析,系统的导航栏实现以上效果有点困难,直接自定义一个假的导航栏更容易点 分布拆解实现以上效果 一.下拉放大header图片 - (void)viewDidLoad { [super viewDidLoad]; [self.view

随机推荐