欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-06-10 09:45:14
本文实例为大家分享了wpf实现文字粒子闪烁动画的具体代码,供大家参考,具体内容如下实现效果如下:思路:首先根据显示文本创建文本路径geometry,然后在路径内随机生成圆形粒子并添加动画。步骤:1、粒...

本文实例为大家分享了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;
}

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