cocos creator 流光效果

创建一个金币盒子节点，用来挂载金币和流光效果，并且添加mask属性，选择 IMAGE_STENCIL 使用图像模版作为遮罩，并且挂载金币图片的Sprite Frame

创建金币节点，并挂载金币图片

创建流光节点，选择cocos 自带的图片，设置宽：10，高：60，Size Mode 选为CUSTOM，拉伸图片，然后再设置设置Skew的x值为30，让他呈现为平行四边形

然后我们使用tween动画来让他从左到右位移，就实现了流光效果啦

敲重点！！！一个小算法
怎么确定流光节点的右边刚好在金币节点的左边呢

其实确定好流光节点的坐标也很简单，只需要知道流光节点中间点的平行线右边距离金币左边距离差多少就行了，先上图

这不就形成了直角三角形了吗,那么代入正切公式

// 正切公式 直角三角形 已知角度和邻边 求对边
// Math.tan()  角度转成弧度
let val = (Math.tan(Math.PI * this.streamer.skewX / 180)) * (this.streamer.height / 2);
// 对边角度加上两个节点的半径，得出流光的初始位置
this.startX = val + (this.target.width / 2) + (this.streamer.width / 2);

然后初始化流光节点的位置，再使用tween动画来让流光从左到右过渡

//初始化流光节点的位置
this.streamer.x = -this.startX;
//使用tween动画来让流光从左到右过渡
cc.tween(this.streamer).to(0.5, { x: this.startX }).start();

于是就完成了本篇上文所述的流光效果啦