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. jquery attr与prop的区别与联系

    最近开发中发现用attr无法设置checkbox的选中事件,在网上找了下说要用prop,所以总结下两者的区别. 1.操作的对象不同 attr:操作的是HTML文档节点属性 prop:操作的是js对象属 ...

  2. 012-对象——魔术常量__CLASS__ __METHOD__ __FUNCTION__ __DIR__ __FILE__

    <?php /** *魔术常量__CLASS__ __METHOD__ __FUNCTION__ __DIR__ __FILE__ */ //魔术常量:__CLASS__ 得到类名. /*cla ...

  3. win8 商店应用 设计风格原则

    共八条: 1,突出内容(数据). a,仅在屏幕上保留最相关的元素:移除线条.框和不必要的图形效果:限制屏幕上持久显示的导航框,如选项卡. b,交互尽量直接在内容上,直接控制内容来完成操作,而不是使用控 ...

  4. [Beego] 内置的模板函数（不同格式的字符串和html的互转）

    在使用beego框架的时候,常常需要把不同形式的字符串转化为html,有时候为了安全考虑会将html转义,而有时候希望能显示html标签.在存储到db中后,再取出来的显示是原本的,即html标签不会生 ...

  5. HSRP/VRRP/GLBP

    当网络足够大的时候,网络规划师要考虑的技光是网络本身的性能问题,冗余技术也是必不可少的. 常见的冗余网关技术有• 热备份路由协议(HSRP).• 虚拟路由器冗余协议(VRRP)• 网关负载均衡协议(G ...

  6. Metasploit的基本使用

    Metasploit可以在Linux.Windows和Mac OS X系统上运行.我假设你已安装了Metasploit,或者你使用的系统是Kali Linux.它有命令行接口也有GUI接口. 我使用的 ...

  7. HihoCoder 1097 kruscal

    最小生成树二·Kruscal算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 随着小Hi拥有城市数目的增加,在之间所使用的Prim算法已经无法继续使用了——但是幸运的 ...

  8. 关于altera的fft核使用问题记录

    altera的fft核使用比较特别,今天我做了一下仿真,发现一些问题,现做记录如下: 1,ip配置 parameters选项卡主要是fft变换的长度和数据长度,旋转因子长度,需要注意的是“Twiddl ...

  9. 洛谷 P2863 [USACO06JAN]牛的舞会The Cow Prom

    传送门 题目大意:形成一个环的牛可以跳舞,几个环连在一起是个小组,求几个小组. 题解:tarjian缩点后,求缩的点包含的原来的点数大于1的个数. 代码: #include<iostream&g ...

  10. 数据库中通过group by找出表中的重复数据

    有时候在做数据割接时会碰到数据插入失败的情况,大部分都是导出的数据中存在重复导致的.我们可以通过查询语句带分组条件来确认是否有重复数据.例如我现在有表 t_wlf_info,其中有个 username ...