来源：未知 时间：2022-07-10 13:21 作者：小飞侠 阅读:次
[导读] js波动公式动画 主要利用数学公式: Y = Math.sin(角度) js核心算法如下 angle+=0.05;varballX=centX+moveX;varballY=centY+Math.sin(angle)*40;...
|
js波动公式动画 主要利用数学公式: Y = Math.sin(角度) js核心算法如下 angle += 0.05; var ballX = centX + moveX; var ballY = centY + Math.sin(angle) * 40; 全局源码: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>波动</title>
</head>
<body>
<script type="text/javascript">
var ball = document.createElement('div');
ball.setAttribute('style', 'width:10px;height:10px;background:red;border-radius:50%;position:absolute;');
document.body.appendChild(ball);
var ball2 = document.createElement('div');
ball2.setAttribute('style', 'width:10px;height:10px;background:blue;border-radius:50%;position:absolute;');
document.body.appendChild(ball2);
var ball3 = document.createElement('div');
ball3.setAttribute('style', 'width:10px;height:10px;background:green;border-radius:50%;position:absolute;');
document.body.appendChild(ball3);
// 圆形
var ball4 = document.createElement('div');
ball4.setAttribute('style', 'width:15px;height:15px;background:red;border-radius:50%;position:absolute;');
document.body.appendChild(ball4);
var angle = 0;
var angle2 = 0;
var angle3 = 0;
var angle4 = 0;
var centX = 10;
var centY = 100;
var R = 60;
var moveX = 0;
var moveX2 = 0;
var moveX3 = 0;
var moveX4 = 0;
function runing(){
moveX += 1;
moveX2 += 1.2;
moveX3 += 0.8;
moveX4 += 0.5;
// 1
angle += 0.05;
var ballX = centX + moveX;
var ballY = centY + Math.sin(angle) * 40;
ball.style.left = ballX + 'px';
ball.style.top = ballY + 'px';
// 2
angle2 += 0.01;
var ballX2 = centX + moveX2;
var ballY2 = centY + Math.sin(angle2) * 40;
ball2.style.left = ballX2 + 'px';
ball2.style.top = ballY2 + 'px';
// // 3
angle3 += 0.35;
var ballX3 = centX + moveX3;
var ballY3 = centY + Math.sin(angle3) * 40;
ball3.style.left = ballX3 + 'px';
ball3.style.top = ballY3 + 'px';
// 4
angle4 += 0.1;
var ballX4 = centX + moveX4;
var ballY4 = centY + Math.sin(angle4) * R;
ball4.style.left = ballX4 + 'px';
ball4.style.top = ballY4 + 'px';
window.requestAnimationFrame(runing);
}
runing();
</script>
</body>
</html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
