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. MySQL数据库的一些方法使用

    substring_index(windSpeed,)/3.6 as windSpeed 可将 .8公里.0m/s 进行拆分 嵌套使用replace方法 replace( replace( repla ...

  2. Docker从0开始之部署一套2048小游戏

    本文记录一下在docker部署一套2048小游戏的过程,在娱乐中熟悉docker的应用部署.docker 安装不在本文讲述之中,参考我的其它博客. 1.获取image镜像. 方法一:daocloud. ...

  3. ZOJ 2110 DFS

    狗要出门,且正好在T秒 就是DFS + 剪枝, 联系一下剪枝技巧 #include<iostream> #include<cstdio> #include<cstring ...

  4. Navicat系列产品激活教程

    准备 本教程可破解12.x版本,如果教程失效请联系我 # 19.1.11 破解暂时失效,请勿更新 (如已更新请卸载重新安装老版本,数据不会丢失 http://download.navicat.com/ ...

  5. Python-爬虫-租房Ziroom

    目标站点需求分析 涉及的库 import requestsimport timeimport pymongofrom lxml import etreefrom requests.exceptions ...

  6. 什么是orm思想?

    什么是orm思想? 1.hibernate使用orm思想对数据库进行crud操作 2.在web阶段学习javabean更正确的叫法是:实体类 3.orm: object   relational   ...

  7. js调用ajax案例2,使用ok

    XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject) ...

  8. EasyUI Layout 添加、删除、折叠、展开布局

    <!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title> <link rel=&qu ...

  9. Android 基础 二 四大组件 Activity

    Activity Intent IntentFilter 一理论概述 一. Activity 用来提供一个能让用户操作并与之交互的界面. 1.1 启动 startActivity(Intent int ...

  10. Java 8 中的 Lambda 表达式

    Lambda 表达式是 Java 8 最受欢迎的功能.人们将函数式编程的概念引入了 Java 这门完全面向对象的命令式编程语言. 关于函数式编程是如何运作的,这个话题超出了本文的范围,不过我们会提炼出 ...