最近开始研究微信小游戏,有兴趣的 可以关注一下 公众号, 记录一些心路历程和源代码。
定义了一个名为 `WaterFlow` class,该类继承自 `cc.Graphics`,用于在 Cocos Creator 中创建和显示水流的动画效果。下面是对代码的详细解释:
- `WaterFlow` 类继承自 `cc.Graphics`,用于绘制图形。
- `onLoad` 方法在组件加载时调用,设置默认的线宽和线帽样式。
- `_toPt` 和 `from` 是 `Vec3` 类型的私有属性,用于存储水流动画的终点和起点坐标。
- `toPt` 属性用于获取和设置终点坐标,并更新图形的绘制。
### 水流动画方法
- `playFlowAni` 方法用于播放水流动画。
- 参数 `from` 和 `to` 是 `Vec3` 类型的起点和终点坐标。
- `dur` 是动画持续时间。
- `isTail` 是布尔值,表示是否是最后一束水。
- `onComplete` 是动画完成后的回调函数。
- 方法内部使用 `tween` 函数创建动画,从 `from` 位置过渡到 `to` 位置,并在动画完成后调用 `onComplete` 回调。
### 设置线宽的方法
- `setLineScale` 方法用于设置水流动画的线宽,根据传入的 `scale` 参数调整线宽。
### 用途
这段代码的用途是在 Cocos Creator 中创建和显示水流的动画效果,可以用于游戏中的水滴、水流等效果。
import { Graphics, Vec2, Vec3, tween, v2, v3 } from "cc";const dft_lingWidth = 6;/*** 倾倒的水流*/
export class WaterFlow extends Graphics{onLoad(){super.onLoad()this.lineWidth = dft_lingWidth;this.lineCap = Graphics.LineCap.ROUND;}private _toPt:Vec3 = v3()public get toPt(){return this._toPt}public set toPt(val){Vec3.copy(this._toPt,val)this.clear();this.moveTo(this.from.x,this.from.y)this.lineTo(this._toPt.x,this._toPt.y);this.stroke();}private from:Vec3 = v3();/*** 倒水水流动画* @param from * @param to * @param dur * @param isTail 开始出水false,最后一束水true*/public playFlowAni(from:Vec3,to:Vec3,dur:number,isTail:boolean,onComplete:Function){this.clear();let flow:WaterFlow = thisif(isTail){Vec3.copy(this.from,to);}else{Vec3.copy(this.from,from);}this.moveTo(this.from.x,this.from.y)let tw = tween(flow).set({toPt:from}).to(dur,{toPt:to}).call(onComplete).start();}public setLineScale(scale:number){this.lineWidth = dft_lingWidth*scale;}
}