TweenMa实现鼠标跟随彩带飘动动画效果代码
代码语言：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": 15.208333333333332, "y": 64.6788990825688
}, {
"x": 12.291666666666666, "y": 60.85626911314985
}, {
"x": 10, "y": 55.5045871559633
}, {
"x": 8.194444444444445, "y": 48.47094801223242
}, {
"x": 7.222222222222221, "y": 42.354740061162076
}, {
"x": 6.805555555555555, "y": 34.25076452599388
}, {
"x": 6.805555555555555, "y": 27.82874617737003
}, {
"x": 7.569444444444444, "y": 22.32415902140673
}, {
"x": 8.055555555555555, "y": 21.100917431192663
}, {
"x": 11.597222222222223, "y": 16.819571865443425
}, {
"x": 14.86111111111111, "y": 15.29051987767584
}, {
"x": 19.65277777777778, "y": 14.220183486238533
}, {
"x": 23.26388888888889, "y": 14.220183486238533
}, {
"x": 27.083333333333332, "y": 15.443425076452598
}, {
"x": 29.72222222222222, "y": 18.04281345565749
}, {
"x": 31.944444444444443, "y": 21.55963302752294
}, {
"x": 34.375, "y": 27.981651376146786
}, {
"x": 35.97222222222222, "y": 32.87461773700306
}, {
"x": 37.708333333333336, "y": 38.99082568807339
}, {
"x": 39.44444444444444, "y": 44.64831804281346
}, {
"x": 41.11111111111111, "y": 49.08256880733945
}, {
"x": 42.77777777777778, "y": 52.293577981651374
}, {
"x": 45, "y": 54.74006116207951
}, {
"x": 47.291666666666664, "y": 56.574923547400616
}, {
"x": 50.27777777777778, "y": 57.49235474006116
}, {
"x": 54.93055555555556, "y": 58.103975535168196
}, {
"x": 57.08333333333333, "y": 58.103975535168196
}, {
"x": 60.34722222222222, "y": 56.42201834862385
}, {
"x": 63.125, "y": 53.669724770642205
}, {
"x": 66.11111111111111, "y": 50.764525993883794
}, {
"x": 68.61111111111111, "y": 48.62385321100918
}, {
"x": 70.90277777777779, "y": 47.24770642201835 }, { "x": 73.125, "y": 46.788990825688074 }, { "x": 75.20833333333333, "y": 46.788990825688074 }, { "x": 77.22222222222223, "y": 46.788990825688074 }, { "x": 79.09722222222221, "y": 47.55351681957187 }, { "x": 80.83333333333333, "y": 48.62385321100918 }, { "x": 83.61111111111111, "y": 49.84709480122324 }, { "x": 84.44444444444444, "y": 50 }, { "x": 86.875, "y": 50 }, { "x": 88.33333333333333, "y": 48.1651376146789 }, { "x": 89.44444444444444, "y": 45.718654434250766 }, { "x": 90.13888888888889, "y": 43.27217125382263 }, { "x": 90.34722222222223, "y": 39.908256880733944 }, { "x": 90.34722222222223, "y": 34.09785932721712 }, { "x": 89.58333333333334, "y": 30.275229357798167 }, { "x": 87.63888888888889, "y": 25.382262996941897 }, { "x": 85.41666666666666, "y": 21.712538226299692 }, { "x": 83.19444444444444, "y": 19.418960244648318 }, { "x": 80.83333333333333, "y": 18.04281345565749 }, { "x": 78.68055555555556, "y": 17.584097859327215 }, { "x": 77.01388888888889, "y": 17.584097859327215 }, { "x": 75.34722222222221, "y": 17.584097859327215 }, { "x": 74.02777777777779, "y": 18.501529051987767 }, { "x": 72.63888888888889, "y": 20.642201834862387 }, { "x": 71.04166666666667, "y": 24.159021406727827 }, { "x": 69.375, "y": 28.440366972477065 }, { "x": 67.56944444444444, "y": 33.63914373088685 }, { &q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0