JavaScript之动画原理解析

javascript——动画原理

首先给“动画”进行定义：随时间的变化而改变某个元素在窗口中里的显示位置。

当物体在快速运动时,?当人眼所看到的影像消失后，人眼仍能继续保留其影像1/24秒左右的图像，这种现象被称为视觉暂留现象。是人眼具有的一种性质。人眼观看物体时，成像于视网膜上，并由视神经输入人脑，感觉到物体的像。但当物体移去时，视神经对物体的印象不会立即消失，而要延续1/24秒左右的时间，人眼的这种性质被称为“眼睛的视觉暂留”。

人眼不能分辨超过每秒30帧的画面。

从技术上讲，实现动画并不难，问题是在开发中应不应该使用动画。但是这些四处移动的元素一定要对用户有帮助，而不是让用户反感，这才是在网页中使用动画的最终目的。

比如，在一个页面中有一个小球，只要不断扩大左边距的值，就能实现移动的效果，如果这种效果时间间隔够小，使人眼不能察觉这个小球的抖动，这是就形成了一个动画。

下面就使一个小球向右移动的小例子：

停止开始

 

<script type="text/javascript"> // var box = document.getelementbyid("box").style.width;//这种方法只能取出样式表中的样式， //不能取出样式表中的样式，要想取出样式表中的样式，就要使用window.getcomputedstyle方法。 // console.log(box); var start = document.getelementbyid("start"); var speed = 5; var stop = document.getelementbyid("stop"); var wall = document.getelementbyid("wall"); var box = document.getelementbyid("box"); // var wallwidth = parseint(window.getcomputedstyle(wall, null).left); // console.log(wallwidth); // console.log(stop); var t;//定时器标号 var boxwidth = window.getcomputedstyle(box, null).width;//使用window.getcomputedstyle(,null) //才能取出样式表中的样式。 // console.log(boxwidth); boxwidth = parseint(boxwidth);//把60px 转化成为数字60. console.log(boxwidth);//60 // var leftmax = wallwidth - boxwidth; // console.log(leftmax);//到达这个距离时停止移动。就是取消定时器。 start.onclick = function () { clearinterval(t); t = setinterval(moveright, 20); } function moveright() { //不断的扩大左边距left的值就能实现动画 。 //left 撞墙时停止动画 box.style.left = speed + "px";// speed += 5; } stop.onclick = function stopmove() { clearinterval(t); }; </script>

动画原理到此结束。