TweenMax基于html5svg实现鼠标滑动切水果游戏动画特效源码.zip资源-CSDN文库

共3个文件

js：2个

html：1个

版权申诉

20 浏览量 2022-11-01 00:09:28 上传评论收藏 70KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

TweenMax基于html5 svg实现鼠标滑动切水果游戏动画特效源码.zip （3个子文件）

132689837235289542

likecs.com_132689837242456417

index.html 19KB

Rx.min.js 138KB

TweenMax.min.js 105KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG鼠标跟随</title> <style> html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; background-color: black; } #app { width: 100%; height: 100%; } </style> </head> <body> <script src="js/TweenMax.min.js"></script> <script src="js/Rx.min.js"></script> <div id="app"> <svg id="stage" width="200" height="200" xmlns="http://www.w3.org/2000/svg"></svg> </div> <script> console.clear(); var App = /** @class */ (function () { function App(container) { var _this = this; 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', function () { return _this.onResize(); }); this.onResize(); this.colors.map(function (color) { return _this.followers.push(new Follower(_this.svg, color)); }); var input = new Input(this.container); input.starts.subscribe(function () { _this.recording = []; _this.record = true; }); input.ends.subscribe(function () { _this.record = false; console.clear(); console.log(JSON.stringify(_this.recording)); }); input.moves .distinctUntilChanged(function (a, b) { return a.x == b.x && a.y == b.y; }) .subscribe(function (position) { if (_this.autoMouse) _this.autoMouse.unsubscribe(); _this.followers.map(function (follower) { return follower.add(position); }); if (_this.record) { _this.recording.push({ x: (position.x / _this.width) * 100, y: (position.y / _this.height) * 100 }); } }); var 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.501529051

评论收藏

内容反馈

版权申诉