LayaAir 旋转的小球 抛物线效果 [未完善]

2019独角兽企业重金招聘Python工程师标准>>>

一个旋转的小球

class Ball extends Laya.Sprite{

    private static cached:boolean = false;
    private body:Laya.Sprite;

    constructor(){
        super();
        this.init();
    }

    public init():void{
        if(!Ball.cached){
            Ball.cached = true;
            this.body = new Laya.Sprite();
            this.body.loadImage("war/ball.png");
            this.body.pivot(12,12);
        }
        this.addChild(this.body);
        Laya.timer.frameLoop(1,this,this.animate);    
    }

    private animate(e):void{
		this.body.rotation += 10;
	}
}

通过贝塞尔曲线 获得一个投石车一样的效果

class Main{

    private ball:Ball;
    private targetX:number = 600;    
    private targetY:number = 300;  
    private centerX:number = 0;    
    private centerY:number = 0;  
    private angle:number = Math.PI;
    private angle2:number = 0;
    private radius:number = 150;  //半径
    private speed:number = .05;
    private points:Array<any> = [];
    private i:number = 0;

    constructor()
    {
			Laya.init(1100, 619, Laya.WebGL);
            Laya.loader.load("res/atlas/war.atlas",Laya.Handler.create(this,this.onLoaded),null,Laya.Loader.ATLAS);
    }

    private onLoaded():void{
            this.ball = new Ball();
            Laya.stage.addChild(this.ball);
		    this.ball.x = Laya.stage.width / 2;
		    this.ball.y = Laya.stage.height / 2;
            Laya.stage.on(Laya.Event.CLICK,this,this.onClick);
            Laya.timer.frameLoop(1,this,this.onEnterFrame);
    }

    private onEnterFrame():void{
        if(this.points.length>0){
            if(this.i<this.points.length){
                this.ball.x = this.points[this.i].x;
                this.ball.y = this.points[this.i].y;
                this.i++;
            }
        }        
    }

    private onClick():void{

        // //角度归位
        // this.angle = Math.PI;

        // //小球归位
         this.ball.x = Laya.stage.width / 2;
		 this.ball.y = Laya.stage.height / 2;

        // //获取鼠标位置
         this.targetX = Laya.stage.mouseX;
         this.targetY = Laya.stage.mouseY;

        // //获得偏移
        // let dx:number = this.targetX - this.ball.x;
        // let dy:number = this.targetY - this.ball.y;
        var ps = [{ x: 0, y: 200 }, { x: 300, y: 0 },{ x: 700, y: 300 }];
        this.points = CreateBezierPoints(ps,20);
        this.i = 0;


        // let distance:number = Math.sqrt(dx*dx+dy*dy)/2;  //中心点的距离 两点距离/2
        // this.angle2 = Math.atan2(dy,dx);  //中心点的角度 和目标点一直 在一条直线上

        // this.radius = distance;

        // //获取中心店的坐标
        // this.centerX = this.ball.x + Math.cos(this.angle2)*distance;
        // this.centerY = this.ball.y + Math.sin(this.angle2)*distance;
 
    }
}


function CreateBezierPoints(anchorpoints, pointsAmount) {
    var points = [];
    for (var i = 0; i < pointsAmount; i++) {
        var point = MultiPointBezier(anchorpoints, i / pointsAmount);
        points.push(point);
    }
    return points;
}

function MultiPointBezier(points, t) {
    var len = points.length;
    var x = 0, y = 0;
    var erxiangshi = function (start, end) {
        var cs = 1, bcs = 1;
        while (end > 0) {
            cs *= start;
            bcs *= end;
            start--;
            end--;
        }
        return (cs / bcs);
    };
    for (var i = 0; i < len; i++) {
        var point = points[i];
        x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
        y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
    }
    return { x: x, y: y };
}

new Main(); 

 

转载于:https://my.oschina.net/u/659068/blog/1564002