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

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

代码语言：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}`;
                });
     .........完整代码请登录后点击上方下载按钮下载查看