星际

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var _class2, _temp, _initialiseProps, _class8, _temp3, _initialiseProps2;

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

//*??????????????????????????????/
// Utils
//*?????????????????????????????*/

function cycle(value, total) {
    return (value % total + total) % total;
}

function scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max) {
    return (maxAllowed - minAllowed) * (unscaledNum - min) / (max - min) + minAllowed;
}

function movePointAtAngle(point, angle, distance) {
    return {
        x: point.x + Math.cos(angle) * distance,
        y: point.y + Math.sin(angle) * distance
    };
}

//*??????????????????????????????/
// Element
//*?????????????????????????????*/

var Element = function Element() {
    var _this = this;

_classCallCheck(this, Element);

this.dpr = window.devicePixelRatio || 1;

this.toValue = function (value) {
        return value * _this.dpr;
    };

this.draw = function () {};

this.update = function () {};
};

//*??????????????????????????????/
// Wave
//*?????????????????????????????*/

var Wave = (_temp = _class2 = function (_Element) {
    _inherits(Wave, _Element);

function Wave(pointAmount, p1, p2) {
        _classCallCheck(this, Wave);

var _this2 = _possibleConstructorReturn(this, (Wave.__proto__ || Object.getPrototypeOf(Wave)).call(this));

_initialiseProps.call(_this2);

_this2.p1 = p1;
        _this2.p2 = p2;

var dx = p2.x - p1.x;
        var dy = p2.y - p1.y;

var vx = dx / (pointAmount - 1);
        var vy = dy / (pointAmount - 1);

_this2.vertices = new Array(pointAmount).fill(null).map(function (p, i) {
            return {
                x: p1.x + vx * i,
                y: p1.y + vy * i
            };
        });
        return _this2;
    }

return Wave;
}(Element), _initialiseProps = function _initialiseProps() {
    var _this3 = this;

this.draw = function (_ref) {
        var ctx = _ref.ctx;

ctx.lineCap = 'round';
        ctx.lineWidth = _this3.toValue(2);
        ctx.strokeStyle = '#ccc';

ctx.beginPath();
        ctx.moveTo(_this3.vertices[0].x, _this3.vertices[0].y);

for (var k = 0; k < _this3.vertices.length - 1; k++) {
            var p1 = _this3.vertices[k];
            var p2 = _this3.vertices[k + 1];

var cpx = (p1.x + p2.x) / 2;
            var cpy = (p1.y + p2.y) / 2;

// ctx.fillStyle = 'white';
            // ctx.fillRect(p1.x, p1.y, 10, 10);

if (k === _this3.vertices.length - 2) {
                ctx.quadraticCurveTo(p1.x, p1.y, p2.x, p2.y);
            } else {
                ctx.quadraticCurveTo(p1.x, p1.y, cpx, cpy);
            }
        }

ctx.stroke();
    };

this.update = function (_ref2) {
        var tick = _ref2.tick;

var l = _this3.vertices.length;
        var r = 1 / l;
        _this3.vertices = _this3.vertices.map(function (p, i) {
            return {
                x: p.x,
                y: p.y + _this3.toValue(Math.sin(tick / 10 + i))
            };
        });
    };
}, _temp);

//*??????????????????????????????/
// Gate
//*?????????????????????????????*/

var Gate = function (_Element2) {
    _inherits(Gate, _Element2);

function Gate(_ref3) {
        var radius = _ref3.radius,
            amount = _ref3.amount;

_classCallCheck(this, Gate);

var _this4 = _possibleConstructorReturn(this, (Gate.__proto__ || Object.getPrototypeOf(Gate)).call(this));

_this4.reset = function () {
            _this4.setValues();
            _this4.setupWaves();
        };

_this4.draw = function (canvas) {
            _this4.drawBg(canvas);

canvas.ctx.save();
            canvas.ctx.beginPath();
            canvas.ctx.arc(_this4.hw, _this4.hh, _this4.radius, 0, 2 * Math.PI);
            canvas.ctx.clip();

_this4.waves.map(function (wave) {
                wave.draw(canvas);
                wave.update(canvas);
            });

canvas.ctx.restore();
        };

_this4.amount = amount;
        _this4.radius = _this4.toValue(radius);
        _this4.diameter = _this4.radius * 2;

_this4.setValues();
        _this4.setupWaves();
        return _this4;
    }

_createClass(Gate, [{
        key: 'setValues',
        value: function setValues() {
            this.w = this.toValue(window.innerWidth);
            this.h = this.toValue(window.innerHeight);
            this.hw = this.w / 2;
            this.hh = this.h / 2;
        }
    }, {
        key: 'setupWaves',
        value: function setupWaves() {
            // Gate dims
            this.px = this.hw - this.radius;
            this.py = this.hh - this.radius;
            this.pw = this.diameter;
            this.ph = this.diameter;
            this.waves = [];

var extend = 2;

for (var i = -extend; i < this.amount + extend; i++) {
                var dy = this.ph / this.amount * i;
                var p1 = {
                    x: this.px,
                    y: this.py + dy
                };
                var p2 = {
                    x: this.px + this.pw,
                    y: this.py + dy
                };
                this.waves.push(new Wave(10, p1, p2));
            }
        }
    }, {
        key: 'drawBg',
        value: function drawBg(canvas) {
            canvas.ctx.beginPath();

var gradient = canvas.ctx.createLinearGradient(this.px, this.py, this.px, this.py + this.diameter);
            gradient.addColorStop(0, '#2a5298');
            gradient.addColorStop(1, '#4298b7');

var wobble = this.toValue(Math.sin(canvas.tick / 20) * 10);
            var offset = this.toValue(5);

canvas.ctx.arc(this.hw, this.hh, this.radius + offset + wobble, 0, 2 * Math.PI);
            canvas.ctx.fillStyle = gradient;
            canvas.ctx.fill();
        }
    }]);

return Gate;
}(Element);

//*??????????????????????????????/
// Ring
//*?????????????????????????????*/

var Ring = function (_Element3) {
    _inherits(Ring, _Element3);

function Ring(_ref4) {
        var radius = _ref4.radius,
            pointAmount = _ref4.pointAmount,
            speed = _ref4.speed,
            decay = _ref4.decay,
            acceleration = _ref4.acceleration,
            wobble = _ref4.wobble,
            warp = _ref4.warp;

_classCallCheck(this, Ring);

var _this5 = _possibleConstructorReturn(this, (Ring.__proto__ || Object.getPrototypeOf(Ring)).call(this));

_this5.draw = function (_ref5) {
            var ctx = _ref5.ctx;
            var p = _this5.points,
                v = _this5.toValue;

ctx.lineWidth = _this5.lineWidth;
            ctx.strokeStyle = _this5.stroke;
            ctx.beginPath();
            ctx.moveTo((p[cycle(-1, p.length)].x + p[0].x) / 2, (p[cycle(-1, p.length)].y + p[0].y) / 2);

for (var i = 0; i < p.length; i++) {
                ctx.quadraticCurveTo(p[i].x, p[i].y, (p[i].x + p[cycle(i + 1, p.length)].x) / 2, (p[i].y + p[cycle(i + 1, p.length)].y) / 2);
            }

ctx.closePath();

ctx.globalCompositeOperation = 'lighter';
            ctx.stroke();
            ctx.globalCompositeOperation = 'source-over';
        };

_this5.update = function (_ref6) {
            var tick = _ref6.tick;

_this5.speed *= _this5.acceleration;
            _this5.lineWidth *= _this5.acceleration;

_this5.points = _this5.points.map(function (p, i) {
                var wobbleAmount = Math.sin(tick / 20 + i * _this5.radOff) * _this5.wobble;
                var warpAmount = Math.cos(tick / 100) * _this5.warp;

var _movePointAtAngle = movePointAtAngle(p, p.radian, _this5.speed),
                    x = _movePointAtAngle.x,
                    y = _movePointAtAngle.y;

return _extends({}, p, {
                    x: x + wobbleAmount - warpAmount,
                    y: y - wobbleAmount + warpAmount
                });
            });

if (!_this5.dead) {
                --_this5.decay;
                if (_this5.decay === 0) {
                    _this5.dead = true;
                }
            }
        };

_this5.points = [];

_this5.w = _this5.toValue(window.innerWidth);
        _this5.h = _this5.toValue(window.innerHeight);
        _this5.hw = _this5.w / 2;
        _this5.hh = _this5.h / 2;
        _this5.speed = _this5.toValue(speed);
        _this5.decay = decay;
        _this5.acceleration = acceleration;
        _this5.lineWidth = _this5.toValue(1);
        _this5.warp = _this5.toValue(warp);
        _this5.wobble = _this5.toValue(wobble);
        _this5.radOff = 2 * Math.PI / pointAmount;

_this5.opacityStroke = 1;
        _this5.opacityFill = 0;
        _this5.opacityDecay = 1 / _this5.decay;

_this5.center = {
            x: _this5.hw,
            y: _this5.hh
        };

for (var i = 0; i < pointAmount; i++) {
            var radian = Math.PI * 2 / pointAmount * i;
            var x = _this5.center.x + radius * Math.cos(radian);
            var y = _this5.center.y + radius * Math.sin(radian);

_this5.points.push({
                x: x,
                y: y,
                radian: radian
            });
        }
        return _this5;
    }

_createClass(Ring, [{
        key: 'stroke',
        get: function get() {
            this.opacityStroke -= this.opacityDecay;
            var r = Math.floor(170 + Math.sin(this.decay / 10) * 60);
            var g = Math.floor(130 + Math.sin(this.decay / 5) * 40);
            // const b = Math.floor(130 + (Math.sin(this.decay / 5) * 40));

return 'rgba(' + r + ', ' + g + ', 200, ' + this.opacityStroke + ')';
        }
    }]);

return Ring;
}(Element);

//*??????????????????????????????/
// Portal
//*?????????????????????????????*/

var Portal = function () {
    function Portal(time, ringConfig) {
        var _this6 = this;

_classCallCheck(this, Portal);

this.reset = function () {
            _this6.rings = [];
        };

this.draw = function () {};

this.update = function (_ref7) {
            var ctx = _ref7.ctx,
                tick = _ref7.tick;

if (tick % _this6.time === 0) {
                _this6.addRing();
            }
            // filter dead while drawing and updating
            _this6.rings = _this6.rings.filter(function (ring) {
                ring.draw({ ctx: ctx, tick: tick });
                ring.update({ ctx: ctx, tick: tick });
                return ring.dead !== true;
            });
        };

this.time = time;
        this.ringConfig = ringConfig;
        this.rings = [new Ring(this.ringConfig)];
    }

_createClass(Portal, [{
        key: 'addRing',
        value: function addRing() {
            this.rings.push(new Ring(this.ringConfig));
        }
    }]);

return Portal;
}();

//*??????????????????????????????/
// Background
//*?????????????????????????????*/

var Background = function (_Element4) {
    _inherits(Background, _Element4);

function Background() {
        var _ref8;

var _temp2, _this7, _ret;

_classCallCheck(this, Background);

for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

return _ret = (_temp2 = (_this7 = _possibleConstructorReturn(this, (_ref8 = Background.__proto__ || Object.getPrototypeOf(Background)).call.apply(_ref8, [this].concat(args))), _this7), _this7.draw = function (_ref9) {
            var ctx = _ref9.ctx,
                canvas = _ref9.canvas;

var gradient2 = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient2.addColorStop(0, '#481f7a');
            gradient2.addColorStop(1, '#2a5298');
            ctx.fillStyle = gradient2;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

var gradient1 = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, canvas.width / 2, canvas.width / 2, canvas.height / 2, 0);
            gradient1.addColorStop(0, 'transparent');
            gradient1.addColorStop(1, 'rgba(0, 255, 153, 0.3)');

ctx.fillStyle = gradient1;
            ctx.globalCompositeOperation = 'screen';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.globalCompositeOperation = 'source-over';
        }, _temp2), _possibleConstructorReturn(_this7, _ret);
    }

return Background;
}(Element);

//*??????????????????????????????/
// Canvas
//*?????????????????????????????*/

var Canvas = function () {
    function Canvas() {
        var _this8 = this;

var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

_classCallCheck(this, Canvas);

this.setPointer = function (_ref10) {
            var clientX = _ref10.clientX,
                clientY = _ref10.clientY;

var x = clientX;
            var y = clientY;
            _this8.mouse = { x: x, y: y };
        };

this.setCanvasSize = function () {
            _this8.canvas.width = window.innerWidth * _this8.dpr;
            _this8.canvas.height = window.innerHeight * _this8.dpr;
            _this8.canvas.style.width = window.innerWidth + 'px';
            _this8.canvas.style.height = window.innerHeight + 'px';
        };

this.render = function () {
            _this8.draw();
            _this8.update();
            ++_this8.tick;
            window.requestAnimationFrame(_this8.render);
        };

// setup a canvas
        this.canvas = document.getElementById('canvas');
        this.dpr = window.devicePixelRatio || 1;
        this.ctx = this.canvas.getContext('2d');
        this.ctx.scale(this.dpr, this.dpr);
        // stores
        this.elements = elements;
        this.tick = 0;
        this.mouse = { x: 0, y: 0 };
        // run
        this.setCanvasSize();
        this.setupListeners();
    }

_createClass(Canvas, [{
        key: 'setupListeners',
        value: function setupListeners() {
            window.addEventListener('resize', this.setCanvasSize);
            window.addEventListener('mousemove', this.setPointer);
        }
    }, {
        key: 'addElement',
        value: function addElement(newElement) {
            this.elements = [].concat(_toConsumableArray(this.elements), [newElement]);
            return this.elements.length - 1;
        }
    }, {
        key: 'removeElement',
        value: function removeElement(deleteIndex) {
            this.elements = this.elements.filter(function (el, i) {
                return i !== deleteIndex;
            });
            return this.elements;
        }
    }, {
        key: 'update',
        value: function update() {
            var _this9 = this;

this.elements.map(function (_ref11) {
                var update = _ref11.update;
                return update(_this9);
            });
        }
    }, {
        key: 'draw',
        value: function draw() {
            var _this10 = this;

this.elements.map(function (_ref12) {
                var draw = _ref12.draw;
                return draw(_this10);
            });
        }
    }]);

return Canvas;
}();

//*??????????????????????????????/
// GateController
//*?????????????????????????????*/

var GateController = (_temp3 = _class8 = function (_Element5) {
    _inherits(GateController, _Element5);

function GateController(canvas) {
        _classCallCheck(this, GateController);

var _this11 = _possibleConstructorReturn(this, (GateController.__proto__ || Object.getPrototypeOf(GateController)).call(this));

_initialiseProps2.call(_this11);

_this11.isOpen = false;
        window.addEventListener('click', _this11.togglePortal);
        _this11.startPortal();
        _this11.startGate();
        return _this11;
    }

_createClass(GateController, [{
        key: 'startPortal',
        value: function startPortal() {
            this.portal = new Portal(6, {
                radius: 0,
                pointAmount: 3,
                speed: 4,
                decay: 75,
                acceleration: 1.05,
                wobble: 2,
                warp: 4
            });
        }
    }, {
        key: 'startGate',
        value: function startGate() {
            this.gate = new Gate({
                radius: 100,
                amount: 12
            });
        }
    }]);

return GateController;
}(Element), _initialiseProps2 = function _initialiseProps2() {
    var _this12 = this;

this.togglePortal = function () {
        _this12.isOpen = !_this12.isOpen;
        _this12.portal.reset();
        _this12.gate.reset();
    };

this.update = function (canvas) {
        if (_this12.isOpen) {
            _this12.portal.draw(canvas);
            _this12.portal.update(canvas);
        } else {
            _this12.gate.draw(canvas);
            _this12.gate.update(canvas);
        }
    };
}, _temp3);

var canvas = new Canvas([new Background(), new GateController()]);

canvas.render();

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