粒子文字效果

作者: ladeng6666 分类: Flash 发布时间: 2012-04-27 15:43 阅读: 16,535

Ispooky的博客中看到了一个文字粒子特效,效果如下:

今天有网友问起,恰巧之前研究过,分享出来给大家。

首先要清楚,本例中粒子的运动是一种叫做Spring的运动方式,你可以在这里找到详细的解释。下面来看看效果:
当鼠标移动至白色圆圈内时,小球向鼠标做Spring运动,当鼠标移出白色圆圈时,小球向舞台中心做Spring运动

具体的实现过程,我在下面的代码中已经进行了详细解释,这里就不再赘述了,上代码:

Particle类

ParticleTest类

接下来,就是对图像抽样,将每个像素看成一个粒子,然后做上面的Spring运动,具体步骤:

  1. 用一个名为srcBmd的BitmapData把源图像的数据draw下来
  2. 遍历srcBmd对象,将所有的像素存储为粒子
  3. 在EnterFrame侦听函数中,遍历所有粒子,根据粒子与鼠标的距离,分别在鼠标和初始位置间做Spring运动
  4. 用另外一个effectBmd加一些效果,显示在舞台上

我把Ispooky的文字换成了照片,道理是一样的,看效果:

代码如下,同样我做了详细的注释:

点击下载源文件

下一步,Ispooky的效果中,在Particle中绘制了细小的线段,所有粒子有一段轨迹,下次我们就来研究这个效果。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

20条评论
  • pyramid

    2012 年 4 月 27 日 下午 4:07

    碉堡了,帅呆了,太震撼了这效果,谢谢师傅

    1. ladeng6666

      2012 年 5 月 2 日 下午 10:16

      谢谢你的评论!

  • twsong

    2012 年 5 月 2 日 上午 7:21

    真厉害

    1. ladeng6666

      2012 年 5 月 2 日 下午 10:17

      谢谢,重点是你能看懂,L0L!

  • Akemi

    2012 年 6 月 21 日 下午 6:58

    i think the information on this subject is still very scarce at internet.http://www.nomedodominio.com

  • 十旋转45度

    2012 年 8 月 30 日 上午 10:04

    拉登叔你贴上来的代码Particle类第51行 if (_disToInit<1){
    < 变成了 <
    源码包里是没错的~

    1. ladeng6666

      2012 年 8 月 30 日 下午 8:57

      特殊符号编码问题,搞不定,还是下载源码看吧,sorry啦!

  • dreamsoar

    2012 年 9 月 26 日 下午 4:57

    感谢提供思路。鉴于对嵌套for循环的恐惧,取像素的时候改为了
    private function createParticles( ):void
    {
    _colorVec = _particleBMD.getVector(_particleBMD.rect);

    var temLen:int = _colorVec.length;
    for (var index:String in _colorVec){
    var color:uint = _colorVec[index];
    var temAlpah:uint = color>>24;
    if(temAlpah != 0 ){
    var temVO:SpringParticle = new SpringParticle( );
    var temX:Number = int(index)%_particleBMD.rect.width;
    var temY:Number = int(index)/_particleBMD.rect.width;
    temVO.x = temVO.targetX = temVO.initX = temX;//temX == 0?_particleBMD.rect.width:temX;
    temVO.y = temVO.targetY = temVO.initY = temY;//temY == Math.floor(temY)?(temY-1):Math.floor(temY);
    temVO.sourceColor = temVO.color = color;
    temVO.index = int(index);
    temVO.fraction = 0.98;
    _particles.push(temVO);
    }
    }
    }
    设置像素的时候用到了setVector

    1. ladeng6666

      2012 年 9 月 26 日 下午 9:39

      用vector存取数据会相对快些吧,另外getVector是返回的指定区域的像素颜色值吧!
      谢谢你的回复,受教啦!

  • 李勇

    2013 年 3 月 29 日 下午 1:15

    很受启发哈!用这个原理可以把切水果游戏里的各种水果图片切成微粒拼接在一起,就可以实现任意角度任意位置切开水果了,还可以反复切成任意小块!

  • 魏煜

    2013 年 7 月 18 日 上午 10:09

    我自学AS3一直关注你的东西 很实用 感谢你 虽然我用的都是简单的功能

  • keycoding

    2013 年 7 月 25 日 下午 9:46

    楼主源码来一份吧

    1. ladeng6666

      2013 年 7 月 25 日 下午 11:01

      右击代码下面的 源码下载 ,然后另存为即可!!

      1. keycoding

        2013 年 7 月 25 日 下午 11:55

        貌似,a标签的是http://vdisk.weibo.com/s/4GXm1这个东西,提示被删除了,as新手啊!求分享源码
        yfqkeycoding@gmail.com

  • keycoding

    2013 年 7 月 25 日 下午 11:51

    貌似源码都下载不了了@ladeng6666

    1. ladeng6666

      2013 年 8 月 6 日 下午 9:56

      不好意思,已经更新源码地址了,给你带来的不变,请见谅!
      请重新下载!

  • 隔空戳骚客

    2013 年 8 月 5 日 下午 2:06

    拉登大师,源码无法下载,请给一份!

    1. ladeng6666

      2013 年 8 月 6 日 下午 9:55

      已更新附件,谢谢你的关注!

  • 灰机_不会飞

    2013 年 8 月 13 日 下午 11:30

    照着博主的思路写了一个C#版本的实现,不过性能差好多….

  • poetry

    2015 年 8 月 27 日 上午 8:00

    效果太绚丽了,超喜欢!

发表评论

电子邮件地址不会被公开。 必填项已用*标注