vue + laya+二次贝赛尔曲线 实现含有动画背景的登录页面

1.在layabox上下载demo源码  修改得到自己想要的背景动画(也可以自己开发)

https://github.com/layabox/layaair-demo/tree/master/h5/2d/js/Sprite_DisplayImage.js

2.下载保存laya库

3.在vue项目中引用laya库

4.运行代码

运用二次贝赛尔曲线实现蝌蚪的曲线缓动

 

let 
    texturePath = "http://img.mockuai.com/tms/2020/5/11/upload_0500ab563772084a159a256f2080fca9.png",

    padding = 100,
    maggotAmount = 800,

    tick = 0,
    maggots = [],
    wrapBounds,
    maggotTexture;

//  "http://img.mockuai.com/tms/2020/5/8/upload_ab877a1cc7ee8558bd70cd1c96ec6fad.png",

class PerformanceTest_Maggots {
    constructor() {
        const 
            Browser = Laya.Browser,
            WebGL = Laya.WebGL,
            Stage = Laya.Stage,
            Stat = Laya.Stat,
            Handler = Laya.Handler,
            Rectangle = Laya.Rectangle;

        // 不支持WebGL时自动切换至Canvas
        Laya.init(Browser.width, Browser.height, WebGL);

        Laya.stage.alignV = Stage.ALIGN_MIDDLE;
        Laya.stage.alignH = Stage.ALIGN_CENTER;

        Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#232628";

        Stat.show();

        wrapBounds = new Rectangle(-padding, -padding, Laya.stage.width + padding * 2, Laya.stage.height + padding * 2);

        Laya.loader.load(texturePath, Handler.create(this, this.onTextureLoaded));
    }

    onTextureLoaded() {
        maggotTexture = Laya.loader.getRes(texturePath);
        maggotTexture.width = 50;
 		maggotTexture.height = 150;
        this.initMaggots();
        Laya.timer.frameLoop(1, this, this.animate);
    }

    initMaggots() {
        let maggotContainer;
        for (let i = 0; i < maggotAmount; i++) {
            if (i % 16000 == 0)
                maggotContainer = this.createNewContainer();

            let maggot = this.newMaggot();
            maggotContainer.addChild(maggot);
            maggots.push(maggot);
        }
    }

    createNewContainer() {
        const 
            Sprite = Laya.Sprite,
            Browser = Laya.Browser;

        let container = new Sprite();
        container.size(Browser.clientWidth, Browser.clientHeight);

        // container.cacheAsBitmap = true;
        Laya.stage.addChild(container);
        return container;
    }

    newMaggot() {
        const Sprite = Laya.Sprite;

        let maggot = new Sprite();
        maggot.graphics.drawTexture(maggotTexture, 0, 0);
        maggot.pivot(16.5, 35);

        let rndScale = 0.8 + Math.random() * 0.3;
        maggot.scale(rndScale, rndScale);
        maggot.rotation = 0.1;
        maggot.x = Math.random() * Laya.stage.width;
        maggot.y =Math.random() * Laya.stage.width;
		
		maggot.startpos={x:0,y:0}
        maggot.startpos.x =  Math.random() * Laya.stage.width;
        maggot.startpos.y = Math.random() * Laya.stage.width;

        maggot.endpos={x:0,y:0}
        maggot.endpos.x =  Math.random() * Laya.stage.width;
        maggot.endpos.y =  Math.random() * Laya.stage.width;

        maggot.nextpos={x:0,y:0}
        maggot.nextpos.x = Math.random() * Laya.stage.width;
        maggot.nextpos.y = Math.random() * Laya.stage.height;
        maggot.t1 = 0


        maggot.direction = Math.random() * Math.PI;
        maggot.turningSpeed = Math.random() - 0.8;
        maggot.speed = (2 + Math.random() * 2) * 0.2;
        maggot.offset = Math.random() * 100;

        return maggot;
    }

       animate() {
	        let maggot;
	        let wb = wrapBounds;
	        let angleUnit = 180 / Math.PI;
	        let dir, x = 0.0, y = 0.0;
	        for (let i = 0; i < maggotAmount; i++)
	        {
	            maggot = maggots[i];
	
	            maggot.scaleY = 0.90 + Math.sin(tick + maggot.offset) * 0.1;
	


				let p = this.PointOnCubicBezier2([maggot,maggot.nextpos,maggot.endpos],maggot.t1/200)
				if (maggot.t1 > 200) {
					maggot.t1 = 1;
					p.x =  maggot.startpos.x;
					p.y =  maggot.startpos.y;
				}
				maggot.t1 ++



	            x = maggot.x;
	            y = maggot.y;
	
	           let x1 = p.x,
	            y1 = p.y,
				x2 = Math.abs(x1-x),
				y2 = Math.abs(y1-y),
				z=Math.sqrt(x*x+y*y),
				jiaodu = Math.round((Math.asin(y/z)/Math.PI*180));
	            maggot.rotation = jiaodu -90;



	            maggot.pos(p.x, p.y);
	        }
	
	        tick += 0.1;
	    }

	/**二次贝塞尔曲线 
		cp 在此是三个元素的数组: 
		cp[0] 为起点
		cp[1] 为第一控制点
		cp[2] 为结束点
		t 为参数值，0 <= t <= 1 
	out tPos 为 t 所在的位置*/
    PointOnCubicBezier2(cp,t){
        var tPos = {x:0,y:0};

		// tPos.x = (1 - t)*cp[0].x + t*cp[2].x;
		// tPos.y = (1 - t)*cp[0].y + t*cp[2].y;

		tPos.x = Math.pow((1-t),2)*cp[0].x+2*t*(1-t)*cp[1].x + Math.pow(t,2)*cp[2].x;
		tPos.y = Math.pow((1-t),2)*cp[0].y+2*t*(1-t)*cp[1].y + Math.pow(t,2)*cp[2].y;
        return tPos;
    }
}

new PerformanceTest_Maggots();