egret贝塞尔曲线运动

Posted jiajunjie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了egret贝塞尔曲线运动相关的知识,希望对你有一定的参考价值。

class MtwGame {

public constructor() {
}
private static _instance: MtwGame;

public static get Instance(): MtwGame {
if (this._instance == null || this._instance == undefined) {
this._instance = new MtwGame();
}
return this._instance;
}

public stage: egret.Stage;
private ball:egret.Bitmap;
private isMoving:boolean = false;
p1:Array<number>;
p2:Array<number>;
//初始化舞台
public init(stage: egret.Stage): void {
this.stage = stage;

let sky:egret.Bitmap = this.createBitmapByName("bg_jpg");
this.stage.addChild(sky);
let stageW:number = this.stage.stageWidth;
let stageH:number = this.stage.stageHeight;
sky.width = stageW;
sky.height = stageH;


let roll:egret.Shape = new egret.Shape();
// roll.graphics.lineStyle(10, 0x00ff00 );
roll.graphics.beginFill( 0xff0000, 1);
roll.graphics.drawCircle( 0, 0, 3 );
roll.graphics.endFill();
this.stage.addChild( roll );

this.ball = this.createBitmapByName("egret_icon_png");
this.stage.addChild(this.ball);
this.ball.x = 100;
this.ball.y = 300;
this.p1 = [this.ball.x,this.ball.y];
this.ball.anchorOffsetX = this.ball.width>>1;
this.ball.anchorOffsetY = this.ball.height>>1;

this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClick, this);

}

private onClick(e:egret.TouchEvent):void {

if (this.isMoving) {
return;
}
this.p2 = [Math.floor(e.stageX),Math.floor(e.stageY)];
this.isMoving = true;
egret.Tween.get(this).to({factor: 1}, 2000).call(this.moveOver, this);
}

public get factor():number {
return 0;
}

public set factor(value:number) {
//(100,300)锚点坐标
this.ball.x = (1 - value) * (1 - value) * this.p1[0] + 2 * value * (1 - value) * 100 + value * value * this.p2[0];
this.ball.y = (1 - value) * (1 - value) * this.p1[1] + 2 * value * (1 - value) * 300 + value * value * this.p2[1];
}

private moveOver():void {
this.isMoving = false;
this.p1 = this.p2;
}

/**
* 根据name关键字创建一个Bitmap对象。name属性请参考resources/resource.json配置文件的内容。
* Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json.
*/
private createBitmapByName(name:string):egret.Bitmap {
var result = new egret.Bitmap();
var texture:egret.Texture = RES.getRes(name);
result.texture = texture;
return result;
}
}

 

//参考http://bbs.egret.com/forum.php?mod=viewthread&tid=1842&highlight=%E6%9B%B2%E7%BA%BF%E8%BF%90%E5%8A%A8

































































以上是关于egret贝塞尔曲线运动的主要内容,如果未能解决你的问题,请参考以下文章

pr蒙版贝塞尔曲线老是旋转

如何使用贝塞尔曲线沿路径为图像设置动画

浅谈属性动画简单使用之实现爱的贝塞尔曲线浪漫告白效果

canvas抛物线运动轨迹

tween 缓动动画

购物车特效-贝塞尔曲线动画(点击添加按钮,产生抛物线动画效果)