标签：动画
以下为源码：
----------------------------------------------
<!doctype html>
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
<title>关于点绕圆环运动轨迹未重合的理解</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<title>Process Bar</title>
<style>
*{margin:0;padding:0;}
h1,h3,p{text-align:center;}
h1{padding:20px;}
img{display:block;margin:0 auto;}
#box{width:200px;height:200px;margin:20px auto;position:relative;}
#cycle{width:180px;height:180px;border-radius:50%;border:10px solid red;}
.movediv{position:absolute;width:10px;height:10px;background:#fff;border-radius:50%;}
</style>
</head>
<body>
<h1>关于点绕圆环运动轨迹未重合的理解</h1>
<h3>1.为什么未重合</h3>
<img src="2.png" width="800" height="600" />
<h3>2.怎样解决</h3>
<img src="1.png" width="800" height="600" />
<h3>3.另一种理解</h3>
<img src="3.png" width="800" height="600" />
<h3>4.最终实现（为了看上去协调，给动画div加了border-radius属性）</h3>
<div id="box">
<div id="cycle"></div>
</div>
</body>
<script>
window.onload = function(){
var moveDom = document.createElement("div");
moveDom.className = "movediv";
var cycleDom = document.getElementById("cycle");
cycleDom.appendChild(moveDom);
var speed = 0.2;
var start = 0;
var r = 96;
var timer = setInterval(function(){
start += speed;
var left = 100+parseInt(r*Math.cos(start))-5;//减去动画div的宽的一半，使div在X轴上处于中心位置
var top = 100+parseInt(r*Math.sin(start))-5;//减去动画div的高的一半，使div在Y轴上处于中心位置
//var left = 100-5+parseInt(r*Math.cos(start));//圆心X轴减去动画div的宽的一半，使圆心水平方向与圆环圆心重合
//var top = 100-5+parseInt(r*Math.sin(start));//圆心Y轴减去动画div的高的一半，使圆心垂直方向与圆环圆心重合
moveDom.style.top = top+"px";
moveDom.style.left = left+"px";
},50);
};
</script>
</html>
本文出自 “wennuanyiran” 博客，请务必保留此出处http://dingzhaoqiang.blog.51cto.com/5601059/1697115
标签：动画
原文地址：http://dingzhaoqiang.blog.51cto.com/5601059/1697115
