js动画之速度

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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上，导致生成多个定时，那么速度就会变快。

以上是关于js动画之速度的主要内容，如果未能解决你的问题，请参考以下文章

js动画学习

AEJoy —— 表达式之速度和频率控制JS

JS动画之缓冲动画与多物体动画即获取样式的方法

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画