首页 > 其他 > 详细

Egret 划线手势动画 (切水果)

时间:2020-01-16 20:29:14      阅读:235      评论:0      收藏:0      [点我收藏+]

 

一个划线的动画。类似切水果,但是没别人做得那么好。就是一个实现思路。

技术分享图片

 

 

演示效果:

技术分享图片

 

代码如下:

/**
 * 划线
 * @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();
    }

  

Egret 划线手势动画 (切水果)

原文:https://www.cnblogs.com/gamedaybyday/p/12203035.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!