function moveDivTimeBasedImprove(div, fps) {
var left = 0;
var current = +new Date;
var previous = +new Date;
var dt = 1000 / 60;
var acc = 0;
var param = 1;

function loop() {
var current = +new Date;
var passed = current - previous;
previous = current;
acc += passed;
while(acc >= dt) {
update(dt);
acc -= dt;
}
draw();
}

function update (dt) {
left += param * (dt * 0.12);
if (left > 300) {
left = 300;
param = -1;
} else if (left < 0) {
left = 0;
param = 1;
}
}

function draw() {
div.style.left = left + "px";
}

setInterval(loop, 1000 / fps);
}

moveDivTimeBasedImprove(document.getElementById("div7"), 60);
moveDivTimeBasedImprove(document.getElementById("div8"), 30);
moveDivTimeBasedImprove(document.getElementById("div9"), 10);

js 时间动画优化的更多相关文章

  1. JS实现动画的四条优化方法

    JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...

  2. JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...

  3. Babylon.js官方性能优化文档中文翻译

    在这里列出Babylon.js官方性能优化文档的中英文对照,并在CardSimulate项目里对其中的一些优化方法进行实践. How To 如何 Optimize your scene 优化你的场景 ...

  4. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  5. js加载优化三

    Javascript性能优化之异步加载和执行 Author:小欧2013-09-17 随着科技的发展,如今的网站和五六年前相比,现在的人们对web的要求越来越高了,用户体验,交互效果,视觉效果等等都有 ...

  6. 多个JS文件性能优化

    页面中引入的JS文件是阻塞式加载的,这样会影响页面性能.以下是JS文件性能优化方法: 一:将所有的<script>标签放到页面底部,也就是</body>闭合标签之前,这能确保在 ...

  7. css3动画和JS+DOM动画和JS+canvas动画比较

    css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...

  8. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  9. HTML5之动画优化(requestAnimationFrame)

    定时器setInterval实现的匀速动画为什么不是匀速? window.requestAnimationFrame() 一.定时器setInterval实现的匀速动画为什么不是匀速? 以上提问并非通 ...

随机推荐

  1. T-SQL GROUP BY子句 分组查询

    SQL Server GROUP BY子句与SELECT语句协作使用,以将相同的数据分组. GROUP BY子句位于SELECT语句中的WHERE子句之后,位于ORDER BY子句之前. 语法 以下是 ...

  2. layui框架--关闭当前页面并刷新父页面

    //关闭当前页面 并刷新父页面 var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index) windo ...

  3. grep,find

    grep是强大的文本搜索工具,他可以对文件逐行查看,如果找到匹配的模式,就可以打印出包含次模式的所有行,并且支持正则表达式 find查找文件的grep是来查找字符串的,文件的内容 grep 文件的内容 ...

  4. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  5. restful中的分页

    普通分页 普通分页类似于Django中的分页 源码 class PageNumberPagination(BasePagination): """ A simple pa ...

  6. STM32应用实例十五:STM32的ADC通道间干扰的问题

    最近我们在开发一个项目时,用到了MCU自带的ADC,在调试过程中发现通道之间村在相互干扰的问题.以前其实也用过好几次,但要求都不高所以没有太关注,此次因为物理量的量程较大,所以看到了变化. 首先来说明 ...

  7. Confluence 6 修改日志文件的目标位置

    在 log4j 中,一个输出被定义为 'appender'.希望修改 log 文件的目标,你需要停止 Confluence 然后修改设置 log4j.properties 日志配置文件的  'Logg ...

  8. Confluence 6 后台中的选择站点首页

    后台中的选择站点首页选择项. https://www.cwiki.us/display/CONFLUENCEWIKI/Configuring+the+Site+Home+Page

  9. Confluence 6 配置默认语言界面

    Confluence 6 配置默认语言使用的界面. https://www.cwiki.us/display/CONFLUENCEWIKI/Choosing+a+Default+Language

  10. AFN 请求报 415错误解决方案

    使用 AFHTTPSessionManager  发起请求时 设置下面两句代码 manager.requestSerializer = [AFJSONRequestSerializer seriali ...