缓冲运动就是运动的速度与时间或者距离有关联，不是一般的匀速运动

<!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"),

    	    timer = null ,

            WINDOW_WIDTH = window.innerWidth - 100,

            target = WINDOW_WIDTH;

    	ele.onmouseover = function(){

    		startAnimation();

    	}

    	function startAnimation(){

    		clearInterval(timer);

    		var _ele = document.getElementById("test");

    		timer = setInterval(function(){

                var _left = _ele.offsetLeft,

                    _speed = (target - _left)>0?Math.ceil((target - _left)/200):Math.floor((target - _left)/200);

    			if (_ele.offsetLeft == target){

                    if(WINDOW_WIDTH == target){

                        target = 0;

                    }else{

                        target = WINDOW_WIDTH;

                    }

    				clearInterval(timer);

    			};

    			_ele.style.left = _ele.offsetLeft+ _speed +'px';

    		},1)

    	}

    }

 </script>

</html>

　　

　　大家可以看见

_speed = Math.ceil((target - _left)/200);

这里的速度除以了一个整数200，那么我们就要往上取整，因为不往上，可能_speed当为0的时候，其实运动物体还没有到达最终的目的，如果200-199 = 1 还差1像素，1像素/200 = 0.005 那么只有往上取值(Math.ceil())，如果往下取值(Math.floor)，那么物体悠久不可能到达200像素这个距离。

那什么情况使用floor呢？当_speed相减的时候就用_speed = Math.floor((target - _left)/200),因为可能这个物体网往回走了，那么就用Math.floor(), 比如 0-1 = -1, -1/200 = -0.005 ,那么我们只能取-1，不然物体永久回不到原点。

js动画之缓冲运动的更多相关文章

  1. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  2. js动画之简单运动一

    虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...

  3. js动画之链式运动

    链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...

  4. js动画之同时运动

    一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...

  5. js动画之简单运动二

    透明度的变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. js动画--链式运动

    前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...

  7. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  8. js动画学习（二）

    四.简单动画之缓冲运动 实现速度的缓冲,即不同位置的速度不同,越靠近目标值速度越小,所以速度值与目标值与当前值之差成正比.这里要注意一个问题就是物体在运动中速度是连续变化的,不是按照整数变化的,当物体 ...

  9. js实现缓冲运动，和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

随机推荐

  1. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  2. Qt qmake 使用（含遗留问题）

    网上在介绍编译Qt的教程中,大多数都是这样提到编译的: 1, 运行 VS2012 x86 Native Tools Command Prompt 批处理 2, cd <install qt5.0 ...

  3. XAF视频教程来啦,已出15课

    第一到第七课在这里: http://www.cnblogs.com/foreachlife/p/xafvideo_1_6.html 视频地址:http://i.youku.com/i/UMTI5OTE ...

  4. ReportDesigner中实现保存，保存所有，注册ICommandHandler方式实现

    示例: https://www.devexpress.com/Support/Center/Example/Details/E4354

  5. http协议 幂等性的理解

    HTTP GET.DELETE.PUT.POST四种主要方法的幂等性的理解 GET: GET请求是幂等的,多次的GET请求,不应该修改数据状态,只是查询. DELETE Delete请求也具有幂等性, ...

  6. java简单计算器

    写的一个小计算器,留着以后看吧. import java.awt.BorderLayout; import java.awt.Button; import java.awt.Color; import ...

  7. AngularJS小知识点一

    AngularJS是由谷歌公司及一个由开发者组成的个人社区共同打造.其主要优势在于帮助使用者在web应用程序中实现必要的动态视图.它是通过原生的MVC(模型-视图-控制器)功能来增强HTML. PS: ...

  8. TCP/IP协议学习(六) 链路层详解

    学习知识很简单,但坚持不懈却又是如此的困难,即使一直对自己说"努力,不能停下"的我也慢慢懈怠了... 闲话不多说,本篇将讲述TCP/IP协议栈的链路层.在本系列第一篇我讲到,TCP ...

  9. MFC编程入门之二十七（常用控件：图片控件PictureControl）

    上一节讲的是滚动条控件,本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示图片以美化界面. 图片控件简介 图片控件和前面讲到的静态文本框都是 ...

  10. 规则“Windows Server 2003 FILESTREAM 修补程序检查” 失败。

    近期在客户环境搭建SQL故障转移群集,操作系统为SQL Server 2012R2,数据库版本为SQL Server2008 R2,在安装过程中遇到问题:没有安装Windows Server 2003 ...