Egret 划線手勢動畫 （切水果）

 

一個划線的動畫。類似切水果。

 

 但是沒別人做得那么好。就是一個實現思路。

1. 在觸摸move函數中，繪制Line線段。

2. 線段隨着時間推移，Line逐漸縮小直至消失。

演示效果：

 

代碼如下：

/**
 * 划線
 * @author chenkai 2020.1.16
 */
class DrawLine {
	private lineList:Array<Line> = [];                   //線段數組
	private touchArea:egret.DisplayObjectContainer;      //划線觸摸響應區域  
	private startX:number;                               //划線觸摸起點
	private startY:number;
	private color:number = 0xffffff;                     //線段顏色
	private thickNess:number = 10;                       //線段粗細
	private alpha:number = 1;                            //線段alpha
	private CapsStyle:string  = egret.CapsStyle.SQUARE;  //線段端點樣式
	private JointStyle:string = egret.JointStyle.ROUND;  //鏈接點樣式

	public constructor() {
		
	}

	public setTouchArea(touchArea:egret.DisplayObjectContainer){
		this.touchArea = touchArea;
	}

	public enable(){
		this.touchArea.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouchBegin, this);
		this.touchArea.addEventListener(egret.Event.ENTER_FRAME, this.onEnterFrame, this);
	}

	public disable(){
		this.touchArea.removeEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouchBegin, this);
		this.touchArea.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.onTouchMove, this);
		this.touchArea.removeEventListener(egret.TouchEvent.TOUCH_END, this.onTouchEnd, this);
		this.touchArea.removeEventListener(egret.Event.ENTER_FRAME, this.onEnterFrame, this);

	}

	private onTouchBegin(e:egret.TouchEvent){
		this.startX = e.stageX;
		this.startY = e.stageY;
		this.touchArea.removeEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouchBegin, this);
		this.touchArea.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.onTouchMove, this);
		this.touchArea.addEventListener(egret.TouchEvent.TOUCH_END, this.onTouchEnd, this);
	}

	private onTouchMove(e:egret.TouchEvent){
		let line:Line = new Line();
		line.init(this.startX, this.startY, e.stageX, e.stageY);
		this.lineList.push(line);
		this.touchArea.addChild(line);
		this.startX = e.stageX;
		this.startY = e.stageY;
	}

	private onTouchEnd(){
		this.touchArea.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouchBegin, this);
		this.touchArea.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.onTouchMove, this);
		this.touchArea.removeEventListener(egret.TouchEvent.TOUCH_END, this.onTouchEnd, this);
	}


	//線段由起點到終點位置，樣式是兩頭細，中間粗，所以分成2段來繪制。
	//第一段從起點到中間，由細變粗
	//第二段從終點到中間，由細變粗
	private onEnterFrame(){
		let len = this.lineList.length;
		let line:Line;
		let midIndex:number = len*3/5;        //線段中間最粗的位置
		let rate = this.thickNess/midIndex;   //線段的粗細變化值
		
		//繪制第一段，起點到中間，由細變粗
		for(let i=0;i<midIndex;i++){
			let line:Line = this.lineList[i];
			line.graphics.clear();
			line.graphics.lineStyle(rate*i,this.color,this.alpha,true,null,this.CapsStyle,this.JointStyle);
			line.graphics.moveTo(line.startX,line.startY);
			line.graphics.lineTo(line.endX, line.endY);
		}

		//繪制第二段，終點到中間，由細變粗
		rate = this.thickNess/(len-midIndex);
		let j = 0;
		for(let i=len-1;i>=midIndex;i--){
			j++;
			let line:Line = this.lineList[i];
			line.graphics.clear();
			line.graphics.lineStyle(rate*j,this.color,this.alpha,true,null,this.CapsStyle,this.JointStyle);
			line.graphics.moveTo(line.startX,line.startY);
			line.graphics.lineTo(line.endX, line.endY);
		}
		//刪除生命周期結束的線。當線段數量<10時，只刪除2個；當線段數量>=10時，刪除十分之一的線段
		if(len < 10){
			for(let i=0;i<2;i++){
				let line:Line = this.lineList.shift();
				line && line.removeSelf();
			}
		}else{
			len = len/10;
			for(let i=0;i<len;i++){
				let line:Line = this.lineList.shift();
				line.removeSelf();
			}
		}
		
		

	}

	public destroy(){
		//刪除監聽
		if(this.touchArea){
			this.touchArea.removeEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouchBegin, this);
			this.touchArea.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.onTouchMove, this);
			this.touchArea.removeEventListener(egret.TouchEvent.TOUCH_END, this.onTouchEnd, this);
			this.touchArea.removeEventListener(egret.Event.ENTER_FRAME, this.onEnterFrame, this);
		}
		//刪除線段
		let len = this.lineList.length;
		let line:Line;
		for(let i=0;i<len;i++){
			line = this.lineList[i];
			line.removeSelf();
		}
		this.lineList.length = 0;
		//刪除引用
		this.touchArea = null;
	}
}

class Line extends egret.Sprite{
	public startX:number;
	public startY:number;
	public endX:number;
	public endY:number;

	public constructor(){
		super();
	}

	public init(startX:number, startY:number,endX:number,endY:number){
		this.startX = startX;
		this.startY = startY;
		this.endX = endX;
		this.endY = endY;
	}

	public removeSelf(){
		this.parent && this.parent.removeChild(this);
	}
}

　　

 

在Main.ts中使用：

    /**
     * 創建場景界面
     * Create scene interface
     */
    protected createGameScene(): void {
        let drawLine:DrawLine = new DrawLine();
        drawLine.setTouchArea(this.stage);
        drawLine.enable();
        //drawLine.destroy();
    }