js中的requestAnimationFrame

requestAnimationFrame的作用就是重绘

一个简单的demo如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #box{

            background-color: rebeccapurple;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <script>

        var duration = 4000.0;

        var startTime = -1.0;

        function render(currentTime) {

            var h1 = document.getElementById("box");

            var opacity = currentTime/duration;

            h1.style.opacity = opacity;

        }

        function eachFrame() {

            var timeElapse = (new Date()).getTime()-startTime;

            if(startTime < 0) {

                startTime = (new Date()).getTime();

                render(0.0);

            }else if(timeElapse < duration) {

                render(timeElapse);

            }else {

                return;

            }

            window.requestAnimationFrame(eachFrame);

        }

        window.requestAnimationFrame(eachFrame);

    </script>

</body>

</html>

js中的requestAnimationFrame的更多相关文章

  1. 【面试篇】寒冬求职季之你必须要懂的原生JS(中)

    互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...

  2. 关于three.js中添加文字的方式[转]

    https://blog.csdn.net/qq563969790/article/details/76584976 网上资料大部分是通过引入外部font库进行文字效果的载入,但是在实际运行的时候发现 ...

  3. 30 行代码实现 JS 中的 MVC

    一连串的名字走马观花式的出现和更迭,它们中一些已经渐渐淡出了大家的视野,一些还在迅速茁壮成长,一些则已经在特定的生态环境中独当一面舍我其谁.但不论如何,MVC已经并将持续深刻地影响前端工程师们的思维方 ...

  4. 深入理解Three.js中正交摄像机OrthographicCamera

    前言 在深入理解Three.js中透视投影照相机PerspectiveCamera那篇文章中讲解了透视投影摄像机的工作原理以及对应一些参数的解答,那篇文章中也说了会单独讲解Three.js中另一种常用 ...

  5. js中的宏任务与微任务

    如果你已经知道了js中存在宏任务和微任务,那么你一定已经了解过promise了.因为在js中promise是微任务的一个入口. 先来看一道题: setTimeout(function(){ conso ...

  6. Three.js中的div标签跟随(模型弹框)

    目录 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 用法 注意事项 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 three.js-master ...

  7. Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]

    不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值.在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求. 通过该库,我们就不需要通过手动修 ...

  8. three.js中的矩阵变换(模型视图投影变换)

    目录 1. 概述 2. 基本变换 2.1. 矩阵运算 2.2. 模型变换矩阵 2.2.1. 平移矩阵 2.2.2. 旋转矩阵 2.2.2.1. 绕X轴旋转矩阵 2.2.2.2. 绕Y轴旋转矩阵 2.2 ...

  9. JS中EventLoop、宏任务与微任务的个人理解

    为什么要EventLoop? JS 作为浏览器脚本语言,为了避免复杂的同步问题(例如用户操作事件以及操作DOM),这就决定了被设计成单线程语言,而且也将会一直保持是单线程的.而在单线程中若是遇到了耗时 ...

随机推荐

  1. poj2478欧拉函数

    打表欧拉函数,求2到n的欧拉函数和 #include<map> #include<set> #include<cmath> #include<queue> ...

  2. bash遍历目录压缩文件

    #!/bin/bash function dir(){ ` do "/"$file ] then "/"$file else "/"$fil ...

  3. cassandra框架模型之二——存储机制 CommitLog MemTable SSTable

    四.副本存储 Cassandra不像HBase是基于HDFS的分布式存储,它的数据是存在每个节点的本地文件系统中. Cassandra有三种副本配置策略: 1) SimpleStrategy (Rac ...

  4. 【scala】IO

    1.读文件 可以使用Scala的Source类及其对象来读取文件. Source 类 需要导入 scala.io.Source 然后调用fromFile()方法来读取文件内容 import scala ...

  5. WCF基础:绑定(二)

    在WCF的绑定体系中,经常会碰到ICommunicationObject接口,无论是IChannel接口还是IChannelListener/IChannelFactory接口都继承了ICommuni ...

  6. C#学习历程（二）[基础知识]

    c#中类型的转换 1.Convert.ToInt32(string s) 这个方法的返回值是int类型,要用int类型的变量接收 如: string strNum=Console.ReadLine() ...

  7. ROS机器人星火计划公开课总结

    非常荣幸参加了两次星火计划公开课(上海站), 感谢NXROBO.EXBOT以及所有支持ROS机器人星火计划的小伙伴们. ----废话开始,与课程总结无关,可跳过---- 在国内20多年的求学生涯以及2 ...

  8. ng 依赖注入

    将依赖的对象注入到当前对象,直接去使用依赖的对象即可. 降低耦合度.提高开发速度.. 文件压缩:yui-compressor有两种方案:①CLI(command line interface)java ...

  9. RIP 知识要点

    RIP知识要点: UDP:520 版本:v1(广播包更新) / v2(组播更新 224.0.0.9  ) 度量值:跳数(最多跳15跳,路由为16跳时路由不可达) =================== ...

  10. 11.求二元查找树的镜像[MirrorOfBST]

    [题目] 输入一颗二元查找树,将该树转换为它的镜像,即在转换后的二元查找树中,左子树的结点都大于右子树的结点.用递归和循环两种方法完成树的镜像转换. 例如输入: 8    /  \  6      1 ...