JavaScript版的简单动画

最新推荐文章于 2022-03-28 20:42:26 发布

原创最新推荐文章于 2022-03-28 20:42:26 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

2017前-开发整理同时被 2 个专栏收录

38 篇文章

订阅专栏

前端_JavaScript

29 篇文章

订阅专栏

本文介绍了一个简单的JavaScript动画示例，演示如何在Google+中通过拖拽用户头像至分组内，使其呈现出围绕圆圈旋转的特效。通过编写相应的代码，实现了动态的视觉效果，为用户交互提供了趣味性的增强。

Google+中有一个特效：拖拽用户头像至分组内，用户头像会有一个特效（绕着圆圈转一圈）。写了个简单的示例，效果如下图所示：

javaScript 动画代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>~ ~</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv='content-type' content='text/html; charset=utf-8' />
  <style type='text/css'>
   * {margin:0; padding:0;}
   .m {position:absolute; width:1px; height:1px; z-index:1; background-color:#3399cc}
   .move {width:30px; height:30px; position:absolute; background-color:#da4936; z-index:999; border-radius:25px;}
   .h {width:800px; position:absolute; border-top:1px solid #323232; top:300px; left:0px; z-index:9;}
   .v {height:800px; border-left:1px solid #323232; left:300px; top:0; z-index:10; position:absolute;}

   #btn {margin:100px;}
  </style>
 </head>

 <body>

<button id="btn">开始运动</button>
<div class="move" id="modelEl"></div>

<div class="h"></div>
<div class="v"></div>

<div>
	步长：<select id='sel'>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="5">5</option>
		<option value="8">8</option>
		<option value="10">10</option>
		<option value="15">15</option>
		<option value="20">20</option>
		<option value="30">30</option>
	</select>
</div>

<script type="text/javascript">
//1度＝π/180 弧度 ( ≈0.017453弧度 ) 

!(function() {
	for (var i = 0; i < 360; i+=1) {
		var r = 200;
		var x0 = 300;
		var y0 = 300;

		var angle = Math.PI * i / 180;
		var x = Math.cos(angle) * r + x0;
		var y = Math.sin(angle) * r + y0;

		document.write('<div class="m" style="left:'+x+'px; top:'+y+'px;"></div>');

		r = 170;
		x = Math.cos(angle) * r + x0;
		y = Math.sin(angle) * r + y0;
		document.write('<div class="m" style="left:'+x+'px; top:'+y+'px;"></div>');
	}
})();

function getEl(id) {
	return typeof id === 'string' ? document.getElementById(id) : id;
}

getEl("btn").onclick = moveHandler;

function movePos(n) {
	var el = getEl("modelEl");

	var r = 185;
	var x0 = 300;
	var y0 = 300;

	var angle = Math.PI * n / 180;
	var x = Math.cos(angle) * r + x0 - el.offsetWidth/2;
	var y = Math.sin(angle) * r + y0 - el.offsetHeight/2;

	el.style.left = x + 'px';
	el.style.top = y + 'px';
}

movePos(270);

function transform(A) {
	return 1 - Math.pow(1 - A, 3);
}

function moveHandler() {
	var base = 270;
	var step = getEl('sel').value | 0;
	var start = 360;
	var end = 0;

	getEl("btn").disabled = true;
	
	var timer = setInterval(function() {		
		if (start >= end) {
			movePos(base + start);
			start -= step;

			step += transform((start - end)/360) / 100;
		} else {
			movePos(base + end);
			
			clearInterval(timer);

			if (moveHandler.count < 10) {
				moveHandler.count++;
				
				setTimeout(function() {
					getEl("sel").selectedIndex = Math.random() * getEl("sel").options.length | 0;

					moveHandler();
				}, 100);
			} else {
				moveHandler.count = 0;
				getEl("btn").disabled = false;
			}
			
		}
	}, 1);
}

moveHandler.count = 0;

</script>
 </body>
</html>