网站地图    收藏   

主页 > 前端 > js几何数学知识 >

js水波纹波动公式动画

来源:未知    时间:2022-07-10 13:23 作者:小飞侠 阅读:

[导读] js水波纹波动公式: angle+=0.01;varballScale=Math.sin(angle)*range; 效果如下: 全部代码如下: !DOCTYPEhtmlhtmlheadmetacharset=utf-8title波动/title/headbodyscripttype=text/javascriptvarball=document.createElement(div);ball.s...

js水波纹波动公式:

angle += 0.01;
var ballScale = Math.sin(angle) * range;

效果如下:

全部代码如下:

<!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:100px;height:100px;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 centX = 100;    
	var centY = 100;    
	var R = 60;    
	var range = 0.5;    
	function runing(){    
		// 1    
		angle += 0.01;    
		// var ballX = centX + moveX;    
		var ballScale = Math.sin(angle) * range;    
		// ball.style.left = ballX + 'px';    
		// ball.style.top = ballY + 'px';    
		//    
		ball.style.opacity =  ballScale > 0 ? ballScale : 1+ballScale;    
		ball.style.transform = 'scale('+ballScale+')';    
		// console.log(ballScale)    
		window.requestAnimationFrame(runing);    
	}    
	runing();    
</script>    
</body>    
</html>


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论