TweenMax+rx实现彩色线条流动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：TweenMax+rx实现彩色线条流动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">
<head>

    <meta charset="UTF-8">



    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            color: #111;
        }

        body {
            background-color: #303030;
        }

        #app {
            width: 100%;
            height: 100%;
        }
    </style>


</head>

<body>
    <div id="app">
        <svg id="stage" width="497" height="418" xmlns="http://www.w3.org/2000/svg"></svg>
    </div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Rx.5.0.1.js"></script>
    <script>
        "use strict";
        // Tidier code with webpack and better Typescript in Github
        // https://github.com/ste-vg/svg-squiggles
        console.clear();
        var SquiggleState;
        (function (SquiggleState) {
            SquiggleState[SquiggleState["ready"] = 0] = "ready";
            SquiggleState[SquiggleState["animating"] = 1] = "animating";
            SquiggleState[SquiggleState["ended"] = 2] = "ended";
        })(SquiggleState || (SquiggleState = {}));
        class Squiggle {
            constructor(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;
                let path = this.createLine(settings);
                let sqwigCount = 3;
                for (let i = 0; i < sqwigCount; i++) {
                    this.createSqwig(i, sqwigCount, path, JSON.parse(JSON.stringify(settings)), i == sqwigCount - 1);
                }
            }
            createSqwig(index, total, path, settings, forceWhite) {
                let 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: () => {
                        if (index = total - 1)
                            this.state = SquiggleState.ended;
                        sqwig.remove();
                    }
                });
            }
            update() {
                this.sqwigs.map((set) => {
                    set.path.style.strokeDashoffset = `${set.settings.progress}`;
                    set.path.style.strokeWidth = `${set.settings.width}px`;
                    set.path.style.opacity = `${set.settings.opacity}`;
                });
            }
            createLine(settings) {
                let x = settings.x;
                let y = settings.y;
                let dx = settings.directionX;
                let dy = settings.directionY;
                let path = [
                    'M',
                    '' + x,
                    '' + y,
                    "Q"
                ];
                let steps = settings.sections;
                let step = 0;
                let getNewDirection = (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(' ');
            }
            getColor() {
                let 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);
            }
            componentToHex(c) {
                var hex = Math.round(c).toString(16);
                return hex.length == 1 ? "0&.........完整代码请登录后点击上方下载按钮下载查看