屏幕快照 2017-07-27 上午9.18.59.png

//需求為實現(xiàn)對象沿line3軌跡運動  
private addLine() {  
    //為方便調(diào)試,先把三條線畫出來  
    let line1 = new egret.Shape()  
    line1.graphics.lineStyle(5,0x87CEFA);  
    line1.graphics.moveTo(this.objectPoint.x, this.objectPoint.y - this.objectWH);  //起點  
    line1.graphics.lineTo(this.highX, this.highY);  
    line1.graphics.lineTo(this.highX*2 - this.objectPoint.x, this.stageH- this.objectWH);  
    line1.graphics.endFill();  
    this.addChild(line1);  

    let line2 = new egret.Shape()  
    line2.graphics.lineStyle(1,0x00868B);  
    line2.graphics.moveTo(this.objectPoint.x, this.objectPoint.y - this.objectWH);  //起點  
    line2.graphics.curveTo(this.highX, this.highY, this.highX*2 - this.objectPoint.x, this.stageH- this.objectWH);  //控制點,終點  
    line2.graphics.endFill();  
    this.addChild(line2);  

    //line2為真實貝塞爾曲線軌跡,但是因為最高點過低而導致運動效果不太好,所以我們修改控制點的Y值,來打到較好的效果  
    let line3 = new egret.Shape()  
    line3.graphics.lineStyle(1,0x4B0082);  
    line3.graphics.moveTo(this.objectPoint.x, this.objectPoint.y - this.objectWH);  //起點  
    line3.graphics.curveTo(this.highX, this.highY-300, this.highX*2 - this.objectPoint.x, this.stageH- this.objectWH);  //控制點,終點  
    line3.graphics.endFill();  
    this.addChild(line3);  
  
    //利用egret的緩動動畫Tween來實現(xiàn)動畫  
    //二次方貝塞爾公式  
    //起點P0  控制點P1  終點P2  
    //(1 - t)^2 P0 + 2 t (1 - t) P1 + t^2 P2  
    //在1秒內(nèi)，this的factor屬性將會緩慢趨近1這個值，這里的factor就是曲線中的t屬性，它是從0到1的閉區(qū)間。  
    egret.Tween.get(this).to({factor: 1}, 1000);  
}  

//添加factor的set,get方法,注意用public  
public get factor():number {  
  return 0;  
}  
//計算方法參考 二次貝塞爾公式  
public set factor(value:number) {  
  this.mainObject.x = (1 - value) * (1 - value) * this.objectPoint.x + 2 * value * (1 - value) * this.highX + value * value * (this.highX*2 - this.objectPoint.x);  
  this.mainObject.y = (1 - value) * (1 - value) * (this.objectPoint.y - this.objectWH) + 2 * value * (1 - value) * (this.highY-300) + value * value * (this.stageH- this.objectWH);  
}  

123.gif