js动画之简单运动一

虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客，但是先开始我们的基础动画的学习。

1.制作动画常用的属性就是left,right,height,width,opacity等属性

2.因为每个动画不一定都是匀速的，可能是加速或者更加复杂的，所以就会有缓存动画

3.运动的物体，可能不只有一个，可能是多个，或者一个物体多个属性同事改变做出复杂的运动

4.运动可以连续起来，形成一个动画，这个运动叫做链式运动

开始动手

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style>
		.animation{
			background-color: green;
			height: 100px;
			width: 100px;
			left: 0px;
			top: 0px;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="test" class="animation">animation</div>
</body>
 <script type="text/javascript">
    window.onload = function(){
    	var ele = document.getElementById("test");
    	var timer = null ;
    	ele.onmouseover = function(){
    		startAnimation();
    	}

    	function startAnimation(){
    		clearInterval(timer);
    		var _ele = document.getElementById("test");
    		timer = setInterval(function(){
    			if (_ele.offsetLeft == (window.innerWidth-100)){
    				clearInterval(timer);
    			};
    			_ele.style.left = _ele.offsetLeft+ 1 +'px';
    		},10)
    	}

    }
 </script>
</html>

　

　1.这个是一个简单的动画效果，在鼠标移动到div上的时候，div就开始往右移动，不过移动的物体的定位最好是绝对定位比较好，因为脱离文档流。

2.每次鼠标进入div的时候，要清除定时器，不要给物体运动的过程中，鼠标再次移入div上，导致生成多个定时，那么速度就会变快。