HTML5梦幻之旅——炫丽的流星雨效果实现过程

代码清单3
然后我们保存一下添加拖尾效果的对象，这样方便以后使用。如代码清单4所示

复制代码
self.object = $object;

代码清单4
然后添加放置要添加拖尾效果对象的层，并将它显示出来。如代码清单5

复制代码
self.originalSprite = new LSprite();
self.addChild(self.originalSprite);
self.originalSprite.addChild(self.object);

代码清单5
最后添加一个时间轴事件，方便添加拖尾。

复制代码
self.addEventListener(LEvent.ENTER_FRAME,self.smeared);

代码清单6
到这里，Smearing构造器就写完了，也解释完了，看不懂的话可能是你不了解lufylegend，里面的addChild，LSprite都是lufylegend中封装的。
我们在上面的代码中已经加入了时间轴事件。为什么要加入呢？因为我不妨说一下拖尾的原理。拖尾其实就是不断地将原对象克隆出来，然后放在现在所在的位置上，相当于不断地向画面上盖章。当原对象移开时，我们克隆的对象并没有移开，而原对象移开了，如果我们增加的对象有很多，那就会形成一条链接原对象的线。这时我们再遍历一下这个线里的每个成员，通过缓动来改变当前对象的透明度。然后判断该对象的透明度是否为0，如果是就移除，避免占太多空间。因此，我们添加时间轴事件用来不断添加拖尾对象。
Smearing成员函数smeared起到这点作用，代码如下：

复制代码
Smearing.prototype.smeared = function(self){
var smearingChild = new SmearingChild(self.originalSprite,self.object);
self.smearingSprite.addChild(smearingChild);
for(var key in self.smearingSprite.childList){
LTweenLite.to(self.smearingSprite.childList[key],0.5,{
alpha: 0,
onComplete:function(o){
self.smearingSprite.removeChild(o);
}
});
}
};

代码清单7
这些代码按照我在上面所说的原理执行。可以看到我们在最后遍历了拖尾层的成员，然后改变遍历到的对象的透明度，并且在缓动结束后移除自身。其中的缓动类用的是lufylegend中封装好了的LTweenLite，可以去API文档里看看，写得很详细。
主要是上面两行代码，如代码清单8：

复制代码
var smearingChild = new SmearingChild(self.originalSprite,self.object);
self.smearingSprite.addChild(smearingChild);

代码清单8
可以看到又用到了一个名为SmearingChild的类，这个便是传说中的拖尾类。这个类不容忽视，虽然代码很少，但是很重要，里面的代码如代码清单9：