将动画重写为基于时间的(而不是基于平面速度的)【复制】

var cvs = document.querySelector('canvas'),
    ctx = cvs.getContext('2d'),
    w, h, cx, cy,
    resize = function () {
        w = cvs.width = window.innerWidth;
        cx = w / 2;
        h = cvs.height = window.innerHeight;
        cy = h / 2;
    },
    tools = {
        rnd: (min, max) => Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min),
        flt: (min, max, dec) => parseFloat((Math.random() * (min - max) + max).toFixed(dec)),
        distance: (p1, p2) => Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y)),
        rftv: (p1, p2) => Math.atan2(p2.y - p1.y, p2.x - p1.x)
    },
    globalStart = Date.now(),
    loop = function () {
        ctx.fillStyle = 'rgba(0, 0, 0, 1)';
        ctx.fillRect(0, 0, w, h);

        var globalElapsed = Date.now() - globalStart;
        ctx.font = '48px serif';
        ctx.fillStyle = 'hsl(50, 100%, 50%)';
        var text = (pool.length > 0) ? globalElapsed / 1000 : "End";
        ctx.fillText(text, 40, 50);

        for (var i = pool.length - 1; i >= 0; i--) {
            // move bullet
            pool[i].move();

            // bullet
            ctx.save();
            ctx.beginPath();
            ctx.arc(pool[i].x, pool[i].y, pool[i].r, Math.PI * 2, 0);
            ctx.fillStyle = 'hsl(100, 100%, 50%)';
            ctx.fill();
            ctx.closePath();
            ctx.restore();

            // start location
            ctx.save();
            ctx.beginPath();
            ctx.arc(pool[i].ix, pool[i].iy, pool[i].r, Math.PI * 2, 0);
            ctx.strokeStyle = 'hsl(100, 100%, 50%)';
            ctx.stroke();
            ctx.closePath();
            ctx.restore();

            // end location
            ctx.save();
            ctx.beginPath();
            ctx.arc(pool[i].dx, pool[i].dy, pool[i].r, Math.PI * 2, 0);
            ctx.strokeStyle = 'hsl(100, 100%, 50%)';
            ctx.stroke();
            ctx.closePath();
            ctx.restore();

            // remove bullet when it arrives
            if (pool[i].remaining <= 0) {
                pool.splice(i, 1);
            }
        }

        requestAnimationFrame(loop);
    },
    pool = [],
    last_spawn = 0,
    spawn_interval = 0,
    spawn_limit = 1,
    spawn = function () {
        if (Date.now() - last_spawn > spawn_interval) {
            last_spawn = Date.now();
            for (var i = 0; i < spawn_limit; i++) {
                pool.push(new particle());
            }
        }
    },
    particle = function () {
        var exvec = tools.rnd(20, w - 20),
            eyvec = tools.rnd(20, h - 20),
            svecs = {
                x: cx,
                y: cy
            },
            evecs = {
                x: exvec,
                y: eyvec
            },
            rad = tools.rftv(svecs, evecs),
            distance = tools.distance(svecs, evecs);
        this.time = 10 * 1000; // time in seconds for example 2 seconds === 2 * 1000 = 2000 ms
        this.elapsed = 0; // how much time passed since it started
        this.started = Date.now(); // time of departure

        this.ix = cx; // start x axis
        this.iy = cy; // start y axis
        this.dx = exvec; // end x axis
        this.dy = eyvec; // end y axis
        this.x = cx; // current x axis
        this.y = cy; // current y axis
        this.r = 10; // radius of bullet
        this.rad = rad; // needed for computation
        this.period = distance / 2; // how many axis changes
        this.distance = 0; // how much distance bullet travelled
        this.total = distance; // how much distance there is in total to be made
        this.remaining = distance; // difference between total and made
        this.amplitude = distance / 4; // how big hump
        // this.speed = 2; // flat speed increase
        this.move = function () { // this is function for to calculate move
            this.elapsed = Date.now() - this.started;
            // this.distance += this.speed;
            this.distance = distance * this.elapsed / this.time;
            this.remaining = this.total - this.distance;

            this.x = this.ix + Math.cos(this.rad) * this.distance;
            this.y = this.iy + Math.sin(this.rad) * this.distance;

            const deviation = Math.sin(this.distance * Math.PI / this.period) * this.amplitude;

            this.x += Math.sin(this.rad) * deviation;
            this.y -= Math.cos(this.rad) * deviation;
        };
    };

resize();
loop();

window.onresize = function () {
    resize();
};

spawn();

body {
	overflow:hidden;
}

canvas {
	position:absolute;
	top:0;
	left:0;
}

<canvas></canvas>