超炫酷鼠标跟随

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";
console.clear();
var SquiggleState;
(function (SquiggleState) {
    SquiggleState[SquiggleState["ready"] = 0] = "ready";
    SquiggleState[SquiggleState["animating"] = 1] = "animating";
    SquiggleState[SquiggleState["ended"] = 2] = "ended";
})(SquiggleState || (SquiggleState = {}));
var Squiggle = /** @class */ (function () {
    function Squiggle(stage, settings, grid) {
        this.sqwigs = [];
        this.state = SquiggleState.ready;
        this.grid = grid;
        this.stage = stage;
        settings.width = 0;
        settings.opacity = 1;
        this.state = SquiggleState.animating;
        var path = this.createLine(settings);
        var sqwigCount = 3;
        for (var i = 0; i < sqwigCount; i++) {
            this.createSqwig(i, sqwigCount, path, JSON.parse(JSON.stringify(settings)), i == sqwigCount - 1);
        }
    }
    Squiggle.prototype.createSqwig = function (index, total, path, settings, forceWhite) {
        var _this = this;
        var sqwig = document.createElementNS("http://www.w3.org/2000/svg", 'path');
        sqwig.setAttribute('d', path);
        sqwig.style.fill = 'none';
        sqwig.style.stroke = forceWhite ? '#303030' : this.getColor();
        sqwig.style.strokeLinecap = "round";
        settings.length = sqwig.getTotalLength();
        settings.chunkLength = settings.length / 6; //(settings.sections * 2) + (Math.random() * 40);
        settings.progress = settings.chunkLength;
        sqwig.style.strokeDasharray = settings.chunkLength + ", " + (settings.length + settings.chunkLength);
        sqwig.style.strokeDashoffset = "" + settings.progress;
        this.stage.appendChild(sqwig);
        this.sqwigs.unshift({ path: sqwig, settings: settings });
        TweenLite.to(settings, settings.sections * 0.1, {
            progress: -settings.length,
            width: settings.sections * 0.9,
            ease: Power1.easeOut,
            delay: index * (settings.sections * 0.01),
            onComplete: function () {
                if (index = total - 1)
                    _this.state = SquiggleState.ended;
                sqwig.remove();
            }
        });
    };
    Squiggle.prototype.update = function () {
        this.sqwigs.map(function (set) {
            set.path.style.strokeDashoffset = "" + set.settings.progress;
            set.path.style.strokeWidth = set.settings.width + "px";
            set.path.style.opacity = "" + set.settings.opacity;
        });
    };
    Squiggle.prototype.createLine = function (settings) {
        var x = settings.x;
        var y = settings.y;
        var dx = settings.directionX;
        var dy = settings.directionY;
        var path = [
            'M',
            '' + x,
            '' + y,
            "Q"
        ];
        var steps = settings.sections;
        var step = 0;
        var getNewDirection = function (direction, goAnywhere) {
            if (!goAnywhere && settings['direction' + direction.toUpperCase()] != 0)
                return settings['direction' + direction.toUpperCase()];
            return Math.random() < 0.5 ? -1 : 1;
        };
        while (step < steps * 2) {
            step++;
            x += (dx * (step / 30)) * this.grid;
            y += (dy * (step / 30)) * this.grid;
            if (step != 1)
                path.push(',');
            path.push('' + x);
            path.push('' + y);
            if (step % 2 != 0) {
                dx = dx == 0 ? getNewDirection('x', step > 8) : 0;
                dy = dy == 0 ? getNewDirection('y', step > 8) : 0;
            }
        }
        return path.join(' ');
    };
    Squiggle.prototype.getColor = function () {
        var offset = Math.round(Math.random() * 100);
        var r = Math.sin(0.3 * offset) * 100 + 155;
        var g = Math.sin(0.3 * offset + 2) * 100 + 155;
        var b = Math.sin(0.3 * offset + 4) * 100 + 155;
        return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
    };
    Squiggle.prototype.componentToHex = function (c) {
        var hex = Math.round(c).toString(16);
        return hex.length == 1 ? "0" + hex : hex;
    };
    return Squiggle;
}());
var App = /** @class */ (function () {
    function App(container) {
        var _this = this;
        this.squiggles = [];
        this.width = 600;
        this.height = 600;
        this.grid = 40;
        this.container = container;
        this.svg = document.getElementById('stage');
        this.onResize();
        this.tick();
        var input = new Input(this.container);
        input.moves.subscribe(function (position) {
            for (var i = 0; i < 3; i++)
                _this.createSqwigFromMouse(position);
        });
        input.starts.subscribe(function (position) { return _this.lastMousePosition = position; });
        input.ends.subscribe(function (position) { return _this.burst(true); });
        if (location.pathname.match(/fullcpgrid/i))
            setInterval(function () { return _this.burst(false); }, 1000);
        Rx.Observable.fromEvent(window, "resize").subscribe(function () { return _this.onResize(); });
    }
    App.prototype.burst = function (fromMouse) {
        if (fromMouse === void 0) { fromMouse = false; }
        for (var i = 0; i < 5; i++)
            this.createRandomSqwig(fromMouse);
    };
    App.prototype.createSqwigFromMouse = function (position) {
        var sections = 4;
        if (this.lastMousePosition) {
            var newDirection = { x: 0, y: 0 };
            var xAmount = Math.abs(this.lastMousePosition.x - position.x);
            var yAmount = Math.abs(this.lastMousePosition.y - position.y);
            if (xAmount > yAmount) {
                newDirection.x = this.lastMousePosition.x - position.x < 0 ? 1 : -1;
                sections += Math.round(xAmount / 4);
            }
            else {
                newDirection.y = this.lastMousePosition.y - position.y < 0 ? 1 : -1;
                sections += Math.round(yAmount / 4);
            }
            this.direction = newDirection;
        }
        if (this.direction) {
            var settings = {
                x: this.lastMousePosition.x,
                y: this.lastMousePosition.y,
                directionX: this.direction.x,
                directionY: this.direction.y,
                sections: sections > 20 ? 20 : sections
            };
            var newSqwig = new Squiggle(this.svg, settings, 10 + Math.random() * (sections * 1.5));
            this.squiggles.push(newSqwig);
        }
        this.lastMousePosition = position;
    };
    App.prototype.createRandomSqwig = function (fromMouse) {
        if (fromMouse === void 0) { fromMouse = false; }
        var dx = Math.random();
        if (dx > 0.5)
            dx = dx > 0.75 ? 1 : -1;
        else
            dx = 0;
        var dy = 0;
        if (dx == 0)
            dx = Math.random() > 0.5 ? 1 : -1;
        var settings = {
            x: fromMouse ? this.lastMousePosition.x : this.width / 2,
            y: fromMouse ? this.lastMousePosition.y : this.height / 2,
            directionX: dx,
            directionY: dy,
            sections: 5 + Math.round(Math.random() * 15)
        };
        var newSqwig = new Squiggle(this.svg, settings, this.grid / 2 + Math.random() * this.grid / 2);
        this.squiggles.push(newSqwig);
    };
    App.prototype.onResize = function () {
        this.width = this.container.offsetWidth;
        this.height = this.container.offsetHeight;
        this.svg.setAttribute('width', String(this.width));
        this.svg.setAttribute('height', String(this.height));
    };
    App.prototype.tick = function () {
        var _this = this;
        var step = this.squiggles.length - 1;
        while (step >= 0) {
            if (this.squiggles[step].state != SquiggleState.ended) {
                this.squiggles[step].update();
            }
            else {
                this.squiggles[step] = null;
                this.squiggles.splice(step, 1);
            }
            --step;
        }
        requestAnimationFrame(function () { return _this.tick(); });
    };
    return App;
}());
var Input = /** @class */ (function () {
    function Input(element) {
        this.mouseEventToCoordinate = function (mouseEvent) {
            mouseEvent.preventDefault();
            return {
                x: mouseEvent.clientX,
                y: mouseEvent.clientY
            };
        };
        this.touchEventToCoordinate = function (touchEvent) {
            touchEvent.preventDefault();
            return {
                x: touchEvent.changedTouches[0].clientX,
                y: touchEvent.changedTouches[0].clientY
            };
        };
        this.mouseDowns = Rx.Observable.fromEvent(element, "mousedown").map(this.mouseEventToCoordinate);
        this.mouseMoves = Rx.Observable.fromEvent(window, "mousemove").map(this.mouseEventToCoordinate);
        this.mouseUps = Rx.Observable.fromEvent(window, "mouseup").map(this.mouseEventToCoordinate);
        this.touchStarts = Rx.Observable.fromEvent(element, "touchstart").map(this.touchEventToCoordinate);
        this.touchMoves = Rx.Observable.fromEvent(element, "touchmove").map(this.touchEventToCoordinate);
        this.touchEnds = Rx.Observable.fromEvent(window, "touchend").map(this.touchEventToCoordinate);
        this.starts = this.mouseDowns.merge(this.touchStarts);
        this.moves = this.mouseMoves.merge(this.touchMoves);
        this.ends = this.mouseUps.merge(this.touchEnds);
    }
    return Input;
}());
var container = document.getElementById('app');
var app = new App(container);

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