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 sqwigC.........完整代码请登录后点击上方下载按钮下载查看