
应该算是比较古老的一个鼠标特效了,最近一个项目里客户想要,我用AS3重新实现了一下,后来,觉得好玩又增加了定时位图描绘的功能,就有了下图所示的效果(可在这里在线体验):


其实就是底下铺一张位图,然后设置一个定时器(Timer),每隔一个时间间隔就Draw一下画面,再附加一个减淡的ColorTransform即可。
在核心类内提供了很多参数可供调整,在这里做一下注释:
// 颜色的RGB分量是以sine函数为周期变化的,这里是它们的起始角度 private static var _COLOR_VARIATION_R:Number = Math.PI * 1.5; private static var _COLOR_VARIATION_G:Number = Math.PI * 0.5; private static var _COLOR_VARIATION_B:Number = Math.PI * - 0.5; // 颜色RGB分量的sine函数增值(每一帧) private static const _COLOR_VARIATION_STEP_R:Number = .04; private static const _COLOR_VARIATION_STEP_G:Number = .03; private static const _COLOR_VARIATION_STEP_B:Number = .02; // 最小(起始)线宽 private static const MIN_LINE_WIDTH:Number = .1; // 最大线宽 private static const MAX_LINE_WIDTH:Number = 3; // 线宽递增值(每一帧) private static const LINE_WIDTH_VARIATION_STEP:Number = 0.04; // 这个没作用,忘了在代码里实现了……原本是打算限制最高速度的 private static const MAX_SPEED:Number = 2; // 鼠标移动速度对曲线锚点的影响比例 private static const MOUSE_SPEED_FACTOR:Number = .04; // 在鼠标移动速度的基础上,附加一个随机速度 private static const MAX_RANDOM_SPEED:Number = .5; // alpha递减值(每一帧) private static const ALPHA_DECREASE_STEP:Number = 0.01; // 递减能达到的最小alpha值 private static const MIN_ALPHA:Number = 0.8;
如果按照下面的代码,同时生产多个SpeedCurveCursor的实例,则会出现非常纠结的效果……(在线体验)
for (var i:int = 0; i < 15; i++)
{
_speedCurveCursor = new SpeedCurveCursor(50 + i);
addChildAt(_speedCurveCursor,2);
_speedCurveCursor.activate();
}
