js实现流体运动效果
流体运动实际上就是三角函数曲线运动，以sin为例，y = asin(b*x)，当a和b取不同的值时，就可以得到不同的曲线形式
在这里要注意的是，sin里面的参数一定要写成弧度的形式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .track{width: 2px;height: 2px;background-color:#000;position:absolute;} </style> </head> <body> <label for="a" id="labelA">参数a：100</label> <input id="a" type="range" min="50" max="100" step="10" value="100" /> <label for="b" id="labelB">参数b：1</label> <input id="b" type="range" min="1" max="5" step="1" value="1" /> <button id="reset">还原</button> <span>三角函数的公式为: y = a*sin(b*x)</span> <span id="result">所以，实际公式为:y = 100*sin(1*x)</span> <div id="test" style="height: 50px;width: 50px;background-color: pink;border-radius:50%;position: absolute;left: 30px;top:50px;"></div> <script> reset.onclick = function(){ history.go(); } function createTracks(x,y){ var ele = document.createElement('div'); ele.className = 'track'; ele.style.left = x + 'px'; ele.style.top = y + 'px'; document.body.appendChild(ele); } function deleteTracks(){ var eles = document.getElementsByTagName('div'); for(var i = 0 ;i < eles.length; i++){ if(eles[i].className == 'track'){ document.body.removeChild(eles[i]); i--; } } } function getResult(){ result.innerHTML = '所以，实际公式为: y=' + a.value + '*sin(' + b.value + '*x)'; } show(); function show(){ clearInterval(test.timer); //重置left、top值 test.style.left = 30 + 'px'; test.style.top = 50 + 'px'; //声明定时器运行次数 var n = 0; //声明拓展倍数 var value = 100; //清除轨迹 deleteTracks(); test.timer = setInterval(function(){ var A = Number(a.value); var B = Number(b.value); n++; var x = (B*n)*Math.PI/180; var y = A*Math.sin(x); test.style.left = x*value + 'px'; test.style.top = 2*A+y + 'px'; createTracks(x*value,2*A+y); if(x*value >= document.documentElement.clientWidth - 2*test.offsetWidth){ clearInterval(test.timer) } },20) } a.oninput = function(){ labelA.innerHTML = '参数a：' + this.value; getResult(); show(); } b.oninput = function(){ labelB.innerHTML = '参数b：' + this.value; getResult(); show(); } </script> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知