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/post/7035.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
评论