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 si* = 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(si*, 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(si*, 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;
}

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