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. 51nod1241 lis变形

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1241 1241 特殊的排序 题目来源: 摩根斯坦利的比赛题 基准时间限制 ...

  2. 【deep learning精华部分】稀疏自编码提取高阶特征、多层微调完全解释及代码逐行详解

    我们前面已经讲了如何训练稀疏自编码神经网络,当我们训练好这个神经网络后,当有新的样本输入到这个训练好的稀疏自编码器中后,那么隐藏层各单元的激活值组成的向量就可以代表(因为根据稀疏自编码,我们可以用来恢 ...

  3. 一个html+js+ashx+easyui+ado.net权限管理系统

    http://www.cnblogs.com/oppoic/p/html_js_ashx_easyui_authorize.html

  4. [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置

    [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置 https://github.com/dotnet-architecture/eShopOnContain ...

  5. L136

    Newly formed blood vessels may contribute to eye disease: studyA study of Northwestern University (N ...

  6. 2017.11.23 display fun --STM8

    unsigned char disp_mode;unsigned char disp_last_mode;unsigned char disp_sub_mode;unsigned char disp_ ...

  7. 关于iframe和div窗口中ajax请求200状态时执行的回调问题

    上一篇说了在ajax回调里面处理iframe窗口的刷新问题,这一篇记录一下遇到的一个分别在iframe和div窗口中ajax请求200状态时执行的回调问题. 我们先来看一下ajax请求的写法(这里使用 ...

  8. 原生JavaScript获取css样式

    访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...

  9. 从无到有开发自己的Wordpress博客主题---主页模板

    在只做完成了header和footer的模板之后,我们首先在之前Hello World的基础上做一个最简单的调用测试 //修改index.php内容如下 <?php get_header(); ...

  10. linux中的vim编辑器的使用

    vim的三种模式: 常规模式(命令模式)也是默认模式,从其它模式进行命令模式按esc i 在光标前插入文本 o 命令是指在当前行下方插入新行 dd 是删除光标所在的整个一行 yy 是在光标所在整个放入 ...