微信小游戏 彩色试管 倒水游戏 逻辑 （四）

 最近开始研究微信小游戏，有兴趣的 可以关注一下 公众号， 记录一些心路历程和源代码。

定义了一个名为 `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 = this
        if(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;
    }
}