egret 实现图片一次闪光效果

效果如下图:
这个图静态效果
这个图的静态效果,闪光会在表面划过。类似的效果也可以用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;
		});
	}

参考链接

  1. https://blog.csdn.net/qq_30392565/article/details/70670128,cocos实现效果
  2. https://bbs.egret.com/forum.php?mod=viewthread&tid=50625&highlight=闪光,egre论坛
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值