效果如下图:
这个图的静态效果,闪光会在表面划过。类似的效果也可以用webgl 的shader实现
/**物体/图片表面一道流光闪过效果实现
* 本效果实现是使用遮罩实现
* 表面流光 基于egret2d 引擎实现
* @param item 闪光对象物品
* @param twTime 缓动时间
* @param dir 缓动x轴方向 1 正方向 0 反方向
* @param parentData{parent,globalponit} 因为布局问题或其他问题导致sparkMark,spark,item位置不能再同个父节点的相同x,y
* @param call 缓动结束后回调函数
*/
public static surfaceFlash(item: egret.DisplayObject, twTime: number = 1000, dir: number = 1, parentData?: { parent: egret.DisplayObjectContainer, globalponit: egret.Point }, call?: { call: Function, callObj: any }): void {
if (!item)
return;
let texture = new egret.RenderTexture();//纹理对象
texture.drawToTexture(item);
let sparkMark: egret.Bitmap = new egret.Bitmap(texture);//遮罩层
let spark: egret.Bitmap = new egret.Bitmap(RES.getRes("spark_png"));//闪光图
spark.mask = sparkMark;
//let startX: number;
let endX: number;
//保证遮罩对象和原对象在同一位置
if (parentData) {//因为布局问题或其他问题导致sparkMark,spark,item位置不能再同个父节点的相同x,y
let ponit = parentData.parent.globalToLocal(parentData.globalponit.x, parentData.globalponit.y, parentData.globalponit)
sparkMark.x = ponit.x;
spark.y = sparkMark.y = ponit.y;
spark.x = dir == 1 ? ponit.x : ponit.x + item.width;
endX = dir != 1 ? ponit.x : ponit.x + item.width;
parentData.parent.addChild(sparkMark);
parentData.parent.addChild(spark);
} else {
sparkMark.x = item.x;
spark.y = sparkMark.y = item.y;
spark.x = dir == 1 ? item.x : item.x + item.width;
endX = dir != 1 ? item.x : item.x + item.width;
item.parent && item.parent.addChild(sparkMark);
item.parent && item.parent.addChild(spark);
}
let tw = egret.Tween.get(spark);
tw.to({ x: endX }, twTime).call(() => {
egret.Tween.removeTweens(spark);
//对遮罩对象和遮罩进行移除或回收处理
spark.parent.removeChild(spark);
sparkMark.parent.removeChild(sparkMark);
spark.mask = null;
spark = null;
sparkMark = null;
call ? call.call.call(call.callObj) : undefined;
});
}
参考链接
- https://blog.csdn.net/qq_30392565/article/details/70670128,cocos实现效果
- https://bbs.egret.com/forum.php?mod=viewthread&tid=50625&highlight=闪光,egre论坛