沿曲线移动

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";
function getFullScreenParams(ctx) {
    const { width, height } = ctx.canvas;
    return [0, 0, width, height];
}
function getCtxUtils(ctx) {
    function clear() {
        const params = getFullScreenParams(ctx);
        ctx.clearRect(...params);
    }
    function save(callback) {
        ctx.save();
        callback();
        ctx.restore();
    }
    function drawPath(callback) {
        ctx.beginPath();
        callback();
        ctx.closePath();
    }
    return {
        clear,
        save,
        drawPath
    };
}
function initCanvas(resizeCallback, parent = document.body) {
    function create() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        return [canvas, ctx];
    }
    function resize() {
        const { clientHeight, clientWidth } = parent;
        canvas.height = clientHeight;
        canvas.width = clientWidth;
        resizeCallback();
    }
    function append() {
        parent.innerHTML = '';
        parent.appendChild(canvas);
    }
    const [canvas, ctx] = create();
    resize();
    append();
    window.addEventListener('resize', resize);
    return ctx;
}
class Curve {
    constructor(origin, angle, length = 400) {
        this.angle = angle;
        this.length = length;
        this._angleOffset = 40;
        this.percentage = 0;
        this.speed = (Math.random() * 0.005) + 0.0005;
        this.randColor = () => {
            const { floor, random } = Math;
            return ['cyan', 'magenta', 'yellow'][floor(random() * 3)];
        };
        this.getEndPoint = () => {
            const { cos, sin } = Math;
            const x = cos(this.angle) * this.length;
            const y = sin(this.angle) * this.length;
            return [x, y];
        };
        this.getStartControlPoint = () => {
            const { cos, sin } = Math;
            const angle = this.angle - (this._angleOffset / 60);
            const length = this.length / 3;
            const x = cos(angle) * length;
            const y = sin(angle) * length;
            return [x, y];
        };
        this.getEndControlPoint = () => {
            const { cos, sin } = Math;
            const angle = this.angle + (this._angleOffset / 60);
            const length = (this.length / 3) * 2;
            const x = cos(angle) * length;
            const y = sin(angle) * length;
            return [x, y];
        };
        this.animate = () => {
            function getXY() {
                const x = cubicN(percentage, 0, startControlPoint[0], endControlPoint[0], end[0]);
                const y = cubicN(percentage, 0, startControlPoint[1], endControlPoint[1], end[1]);
                return [x, y];
            }
            // cubic helper formula
            function cubicN(T, a, b, c, d) {
                const t2 = T * T;
                const t3 = t2 * T;
                return a + (-a * 3 + T * (3 * a - a * T)) * T + (3 * b + T * (-6 * b + b * 3 * T)) * T + (c * 3 - c * 3 * T) * t2 + d * t3;
            }
            const { startControlPoint, endControlPoint, end, percentage } = this;
            if (!this.isComplete) {
                this.percentage += this.speed;
                this.currentPoint = getXY();
            }
        };
        this.start = origin;
        this.currentPoint = [0, 0];
        this.end = this.getEndPoint();
        this.startControlPoint = this.getStartControlPoint();
        this.endControlPoint = this.getEndControlPoint();
        this.color = this.randColor();
    }
    get isComplete() {
        return this.percentage >= 1;
    }
}
class Burst {
    constructor(x, y) {
        this.curves = [];
        this.render = (ctx) => {
            function renderCurve(curve) {
                const { currentPoint, endControlPoint, startControlPoint, end } = curve;
                save(() => {
                    drawPath(() => {
                        ctx.moveTo(0, 0);
                        ctx.strokeStyle = 'rgba(80,80,80,0.4)';
                        ctx.bezierCurveTo(...startControlPoint, ...endControlPoint, ...end);
                        ctx.stroke();
                    });
                });
                save(() => {
                    ctx.translate(x, y);
                    drawPath(() => {
                        let [xi, yi] = currentPoint;
                        xi -= x;
                        yi -= y;
                        ctx.fillStyle = curve.color;
                        ctx.moveTo(0, 0);
                        ctx.arc(xi, yi, 4, 0, Math.PI * 2);
                        ctx.fill();
                    });
                });
            }
            function renderCurves() {
                save(() => {
                    ctx.translate(x, y);
                    curves.forEach(renderCurve);
                });
            }
            function renderBackground() {
                save(() => {
                    ctx.translate(0, 0);
                    ctx.fillStyle = '#101219';
                    drawPath(() => ctx.fillRect(...getFullScreenParams(ctx)));
                });
            }
            const { clear, save, drawPath } = getCtxUtils(ctx);
            const { curves, x, y } = this;
            clear();
            renderBackground();
            renderCurves();
        };
        this._x = x;
        this._y = y;
        this.create();
    }
    get x() { return this._x; }
    set x(value) {
        this._x = value;
        if (this.onPositionChange)
            this.onPositionChange();
    }
    get y() { return this._y; }
    set y(value) {
        this._y = value;
        if (this.onPositionChange)
            this.onPositionChange();
    }
    create() {
        const chunkSize = 6 / 32;
        for (let i = 0; i <= 6; i += chunkSize) {
            this.curves.push(new Curve([this.x, this.y], i, 1300));
        }
    }
}
window.onload = init;
function init() {
    function animate() {
        burst.curves.forEach((curve, i) => {
            if (curve.isComplete) {
                const chunkSize = 6 / 32;
                const newCurve = new Curve([burst.x, burst.y], i * chunkSize, 1300);
                burst.curves.splice(i, 1, newCurve);
            }
            else {
                curve.animate();
            }
        });
        burst.render(ctx);
        requestAnimationFrame(animate);
    }
    let [cx, cy] = [window.innerWidth / 2, window.innerHeight / 2];
    const burst = new Burst(cx, cy);
    const ctx = initCanvas(() => {
        [cx, cy] = [window.innerWidth / 2, window.innerHeight / 2];
        burst.x = cx;
        burst.y = cy;
    });
    burst.render(ctx);
    requestAnimationFrame(animate);
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg