TweenMa实现鼠标跟随彩带飘动动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：TweenMa实现鼠标跟随彩带飘动动画效果代码，结合了rxjs
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">
<head>

    <meta charset="UTF-8">






    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background-color: black;
        }

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




    <style>
        .sg {
            width: 35px;
            height: 35px;
            position: fixed;
            bottom: 10px;
            right: 10px;
        }

        .sg .eye {
            -webkit-transform: translateX(0px);
            transform: translateX(0px);
        }

        .sg:hover .eye {
            -webkit-transition: -webkit-transform 0.3s ease;
            transition: -webkit-transform 0.3s ease;
            transition: transform 0.3s ease;
            transition: transform 0.3s ease, -webkit-transform 0.3s ease;
            -webkit-transform: translateX(12px);
            transform: translateX(12px);
        }
    </style>
</head>

<body>
    <div id="app">
        <svg id="stage" width="367" height="756" xmlns="http://www.w3.org/2000/svg"><path d="" style="fill: red;"></path><path d="" style="fill: blue;"></path><path d="" style="fill: green;"></path><path d="" style="fill: yellow;"></path><path d="" style="fill: white;"></path></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 id="rendered-js">
        "use strict";
       
        console.clear();
        class App {
            constructor(container) {
                this.width = 600;
                this.height = 600;
                this.followers = [];
                this.colors = ['red',
                    'blue',
                    'green',
                    'yellow',
                    'white'];
                this.previewMode = false;
                this.record = false;
                this.recording = [];
                console.log('APP STARTED');
                this.previewMode = location.pathname.match(/fullcpgrid/i);
                this.container = container;
                this.svg = document.getElementById('stage');
                window.addEventListener('resize', () => this.onResize());
                this.onResize();
                this.colors.map(color => this.followers.push(new Follower(this.svg, color)));
                let input = new Input(this.container);
                input.starts.subscribe(() => {
                    this.recording = [];
                    this.record = true;
                });
                input.ends.subscribe(() => {
                    this.record = false;
                    console.clear();
                    console.log(JSON.stringify(this.recording));
                });
                input.moves
                .distinctUntilChanged((a, b) => a.x == b.x && a.y == b.y)
                .subscribe((position) => {
                    if (this.autoMouse)
                        this.autoMouse.unsubscribe();
                    this.followers.map(follower => follower.add(position));
                    if (this.record) {
                        this.recording.push({
                            x: (position.x / this.width) * 100,
                            y: (position.y / this.height) * 100
                        });
                    }
                });
                let path = [{
                    "x": 48.47222222222222, "y": 50.30581039755352
                }, {
                    "x": 48.19444444444444, "y": 51.52905198776758
                }, {
                    "x": 47.5, "y": 53.36391437308868
                }, {
                    "x": 46.111111111111114, "y": 55.35168195718655
                }, {
                    "x": 44.375, "y": 56.574923547400616
                }, {
                    "x": 42.36111111111111, "y": 57.3394495412844
                }, {
                    "x": 40.13888888888889, "y": 57.3394495412844
                }, {
                    "x": 38.54166666666667, "y": 57.3394495412844
                }, {
                    "x": 36.52777777777778, "y": 53.97553516819572
                }, {
                    "x": 36.18055555555556, "y": 52.90519877675841
                }, {
                    "x": 35.34722222222222, "y": 47.55351681957187
                }, {
                    "x": 35.27777777777778, "y": 42.813455657492355
                }, {
                    "x": 35.27777777777778, "y": 38.379204892966364
                }, {
                    "x": 35.97222222222222, "y": 34.25076452599388
                }, {
                    "x": 37.15277777777778, "y": 30.886850152905197
                }, {
                    "x": 38.47222222222222, "y": 27.981651376146786
                }, {
                    "x": 40, "y": 26.452599388379205
                }, {
                    "x": 41.388888888888886, "y": 25.840978593272173
                }, {
                    "x": 42.77777777777778, "y": 25.840978593272173
                }, {
                    "x": 43.81944444444444, "y": 25.993883792048926
                }, {
                    "x": 44.79166666666667, "y": 27.675840978593275
                }, {
                    "x": 45.69444444444444, "y": 29.66360856269113
                }, {
                    "x": 46.736111111111114, "y": 32.56880733944954
                }, {
                    "x": 47.77777777777778, "y": 36.23853211009174
                }, {
                    "x": 48.95833333333333, "y": 40.36697247706422
                }, {
                    "x": 50.416666666666664, "y": 44.64831804281346
                }, {
                    "x": 52.361111111111114, "y": 48.62385321100918
                }, {
                    "x": 54.37499999999999, "y": 51.52905198776758
                }, {
                    "x": 56.52777777777778, "y": 53.36391437308868
                }, {
                    "x": 59.02777777777778, "y": 53.97553516819572
                }, {
                    "x": 61.458333333333336, "y": 53.97553516819572
                }, {
                    "x": 63.61111111111111, "y": 53.21100917431193
                }, {
                    "x": 65.76388888888889, "y": 51.52905198776758
                }, {
                    "x": 67.84722222222223, "y": 49.38837920489297
                }, {
                    "x": 69.51388888888889, "y": 47.24770642201835
                }, {
                    "x": 70.625, "y": 45.412844036697244
                }, {
                    "x": 71.38888888888889, "y": 42.96636085626911
                }, {
                    "x": 71.66666666666667, "y": 39.908256880733944
                }, {
                    "x": 71.66666666666667, "y": 36.54434250764526
                }, {
                    "x": 70.90277777777779, "y": 32.87461773700306
                }, {
                    "x": 68.54166666666667, "y": 26.605504587155966
                }, {
                    "x": 66.52777777777777, "y": 23.24159021406728
                }, {
                    "x": 64.86111111111111, "y": 21.253822629969417
                }, {
                    "x": 63.19444444444444, "y": 20.18348623853211
                }, {
                    "x": 61.38888888888889, "y": 20.03058103975535
                }, {
                    "x": 59.72222222222222, "y": 20.03058103975535
                }, {
                    "x": 58.54166666666667, "y": 20.948012232415902
                }, {
                    "x": 57.291666666666664, "y": 23.08868501529052
                }, {
                    "x": 55.90277777777778, "y": 25.993883792048926
                }, {
                    "x": 54.23611111111111, "y": 29.81651376146789
                }, {
                    "x": 51.24999999999999, "y": 36.391437308868504
                }, {
                    "x": 48.26388888888889, "y": 42.04892966360856
                }, {
                    "x": 44.30555555555556, "y": 48.62385321100918
                }, {
                    "x": 39.58333333333333, "y": 54.58715596330275
                }, {
                    "x": 34.236111111111114, "y": 59.63302752293578
                }, {
                    "x": 28.888888888888886, "y": 62.99694189602446
                }, {
                    "x": 25.27777777777778, "y": 64.83180428134557
                }, {
                    "x": 21.041666666666668, "y": 65.29051987767585
                }, {
                    "x": 17.77777777777778, "y": 65.29051987767585
                }, {
                    "x".........完整代码请登录后点击上方下载按钮下载查看