[粒子特效]吹散
原例：传送门
很久以前的例子了，现在重新学习粒子效果，练练手也好。
其实这里最有技术含量的是粒子的运动算法，至于setPixel之类的东西实在没什么好说的。
例一
粒子从图片的右边开始吹散，渐渐扩散到左边，运动轨迹是直线。
从程序的角度来看，每个粒子有自己的速度，比如最右边的速度为10，那么最左边为-50，速度大于0才让粒子运动，于是右边的粒子最先动，通过加速度的控制，慢慢的让左边的粒子运动。
再仔细看，右边的粒子初始速度很小，速度慢慢变快，一般来说，这种初始速度会保持在[0, 1]之间。来看个公式：
speed = range * Math.random() - (width - x);
speed表示粒子的速度，width表示图片的宽度，x表示粒子的x坐标。
很明显，这个公式会使右边的粒子先有正速度，其中range控制正速度的粒子有多大的范围，举个例子，图片宽度400，如果range为50，则x在 [350, 400] 的粒子会率先运动。刚才演示的range为1，现在来看个50的。
例二
粒子的运动是一种弧线轨迹，我就来说这是怎么实现的。
有没有想起正余弦曲线? 是不是很像? 没错，这就是原理。
package com.zhujl.object {
public class Particle {
public var x:Number;
public var y:Number;
public var color:Number;
public var vx:Number;
public var vy:Number;
public var ax:Number;
public var ay:Number;
public var vr:Number;
public var centerY:Number;
public var radius:Number;
public function Particle(x:Number, y:Number, color:uint, width:Number, centerY) {
this.x = x;
this.y = y;
this.color = color;
this.vx = Math.random() - (width - x);
this.ax = 0.3;
this.centerY = centerY;
this.vr = y > centerY ? Math.PI : 0;
this.radius = y > centerY ? y - centerY : centerY - y;
}
public function update():void {
vx += ax;
if(vx > 0){
x += vx;
vr += 0.1;
y = centerY + Math.cos(vr) * radius;
}
}
}
}
再来一个类似的:
源码如下：
package com.zhujl.object {
public class Particle {
public var x:Number;
public var y:Number;
public var color:Number;
public var vx:Number;
public var vy:Number;
public var ax:Number;
public var ay:Number;
public var vr:Number;
public var centerY:Number;
public var radius:Number;
public function Particle(x:Number, y:Number, color:uint, width:Number, centerY) {
this.x = x;
this.y = y;
this.color = color;
this.vx = Math.random() - (width - x);
this.ax = 0.3;
this.centerY = y;
this.vr = 0;
this.radius = 40;
}
public function update():void {
vx += ax;
if(vx > 0){
x += vx;
y = centerY - Math.sin(vr) * radius;
vr += 0.1;
}
}
}
}
要注意的是，这里我用sin，初始弧度统一为0，所以开始是一段上升的曲线，而flash的坐标系y轴是反过来的，所以centerY - Math.sin(vr) * radius才是向上。
例三：
这次不用正余弦了，改用抛物线
源码如下：
package com.zhujl.object {
public class Particle {
public var x:Number;
public var y:Number;
public var color:Number;
public var vx:Number;
public var vy:Number;
public var ax:Number;
public var ay:Number;
public function Particle(x:Number, y:Number, color:uint, width:Number, centerY) {
this.x = x;
this.y = y;
this.color = color;
this.vx = 1 * Math.random() - (width - x);
this.ax = 0.3;
this.vy = -5;
this.ay = 0.05;
}
public function update():void {
vx += ax;
if(vx > 0){
x += vx;
vy += ay;
y += vy;
}
}
}
}