js 时间动画优化
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 时间动画优化的更多相关文章
- JS实现动画的四条优化方法
JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...
- JavaScript之JS实现动画效果
在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...
- Babylon.js官方性能优化文档中文翻译
在这里列出Babylon.js官方性能优化文档的中英文对照,并在CardSimulate项目里对其中的一些优化方法进行实践. How To 如何 Optimize your scene 优化你的场景 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js加载优化三
Javascript性能优化之异步加载和执行 Author:小欧2013-09-17 随着科技的发展,如今的网站和五六年前相比,现在的人们对web的要求越来越高了,用户体验,交互效果,视觉效果等等都有 ...
- 多个JS文件性能优化
页面中引入的JS文件是阻塞式加载的,这样会影响页面性能.以下是JS文件性能优化方法: 一:将所有的<script>标签放到页面底部,也就是</body>闭合标签之前,这能确保在 ...
- css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
- 使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
- HTML5之动画优化(requestAnimationFrame)
定时器setInterval实现的匀速动画为什么不是匀速? window.requestAnimationFrame() 一.定时器setInterval实现的匀速动画为什么不是匀速? 以上提问并非通 ...
随机推荐
- [WebRTC/JsSIP] AUDIO RTP REPORTS ERROR: [Remote Address Error!]
问题描述: 在使用FreeSWITCH WebRTC 测试时,FS回复 502 Bad Gateway.查看FS日志 [DEBUG] switch_core_media.c:5147 AUDIO R ...
- Light OJ 1007
求区间欧拉函数平方和... 最后因为longlong 范围爆了WA 了, 0.0 #include<bits/stdc++.h> using namespace std; const in ...
- python学习第2天
03 pycharm使用04 格式化输出05 while循环 why: 吃饭睡觉上课, 地球绕着太阳公转,单曲循环,列表循环. what: while how: while 条件: 循环体 where ...
- 【原创】大叔经验分享(36)CM部署kafka
1 下载kafka parcel http://archive.cloudera.com/kafka/parcels/latest/KAFKA-3.1.1-1.3.1.1.p0.2-el7.parce ...
- 连接mysql(建表和删表)
from sqlalchemy.ext.declarative import declarative_base##拿到父类from sqlalchemy import Column##拿到字段from ...
- Java插入排序算法
直接插入排序算法 基本思想: 把n个待排序的元素看成一个有序表和一个无序表,开始时有序表中只有一个元素,无序表中有n-1个元素:排序过程即每次从无序表中取出第一个元素,将它插入到有序表中,使之成为新的 ...
- 使用 Jira 和 Confluence 6 在一起
这个过程是有趣的过程.请参考 Use Jira applications and Confluence together 文档来找到有关整合的相关内容,能够在后续的开发中更多的节省时间,以及你需要安装 ...
- pytorch:修改预训练模型
torchvision中提供了很多训练好的模型,这些模型是在1000类,224*224的imagenet中训练得到的,很多时候不适合我们自己的数据,可以根据需要进行修改. 1.类别不同 # codin ...
- ubuntu 调整分辨率
修改 /etc/X11/xorg.conf配置文件即可
- Winhex数据恢复学习笔记(三)
上次对文件系统进行简单的分析,这次就文件的镜像功能做一介绍 1.首先镜像的概念:镜像就是数据的副本,是原来数据在相同位置上以相同的排列模式生成的拷贝,所以镜像可以用来还原原始数据,代替原始数据工作,镜 ...