js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联，不是一般的匀速运动
<!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动画之缓冲运动的更多相关文章
- js动画---多物体运动
对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...
- js动画之简单运动一
虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...
- js动画之链式运动
链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...
- js动画之同时运动
一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...
- js动画之简单运动二
透明度的变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- js动画--链式运动
前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...
- js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- js动画学习（二）
四.简单动画之缓冲运动 实现速度的缓冲,即不同位置的速度不同,越靠近目标值速度越小,所以速度值与目标值与当前值之差成正比.这里要注意一个问题就是物体在运动中速度是连续变化的,不是按照整数变化的,当物体 ...
- js实现缓冲运动，和匀速运动有点不相同
缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...
随机推荐
- Spring和EJB3的技术对比
随着EJB3规范以及支持EJB3的Java EE应用服务器的即将发布,全新Java EE体系架构的新战争将拉开帷幕,在过去3年中如火如荼的Spring占据了Java EE应用开发基础平台的大半江山,面 ...
- C#知识点总结系列：4、C#中Monitor和Lock以及区别
Monitor对象 1.Monitor.Enter(object)方法是获取锁,Monitor.Exit(object)方法是释放锁,这就是Monitor最常用的两个方法,当然在使用过程中为了避免获取 ...
- javascript字符转直接量和转义字符
直接量: 你可以用单引号或者双引号来表示字符串的直接量.但是js的字符串必须是Unicode 字符序列. 转义字符: 主要用在字符串中,包涵控制字符,以及当前操作系统余元所不允许直接输入的字符. 转义 ...
- sublime text2 换主题
网上看到一款喜欢的主题,换掉初始的主题,感觉颜色浅一点会比较好看,看中了下面这款. 后来看到有在 github 上的人做的 ,这是地址 ,上面也有详细的如何更改的步骤,下面是我自己这里做个备份. 1. ...
- asp.net mvc4 过滤器的简单应用：登录验证
直接上代码,不要说话. ASP.NET MVC4过滤器的简单应用:验证登录 [AcceptVerbs(HttpVerbs.Post)] public ActionResult login(FormCo ...
- asp.net 获取汉字字符串的拼音首字母，含多音字
需求:在很多时候数据查询的时候,我们希望输入某个人姓名的拼音首字母进行查询,例如“潘长江”,输入“pcj”,就能搜索潘长江相关信息. 实现: #region 获取汉字转换拼音 首字母 public s ...
- C# 文件类型
C# 中一些常用文件类型: designer.cs 是窗体设计器生成的代码文件,作用是对窗体上的控件做初始化工作(在函数InitializeComponent()中).VS2003以前都把这部分代码放 ...
- mac 工具集
1.brew brew 全名叫homebrew,引用官网的一句话就是 "The missing package manager for macOS",意思brew是mac os上不 ...
- 用到的一些python包，记录下
Requests beautifulsoup lxml logging gevent django Bottle numpy pandas sklearn pyopencv opencv_python ...
- JDBC总结（含DbUtils组件）
jdbc1. jdbc:使用java代码(程序)发送sql语句的技术2. jdbc的核心接口(查看API): java.sql Driver,DriverManger,Statement,Result ...