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. mysql数据库(一)：建表与新增数据

    一. 学习目标 理解什么是数据库,什么是表 怎样创建数据库和表(create) 怎样往表里插入数据(insert) 怎样修改表里的数据(update) 怎样删除数据库,表以及数据(delete) 二. ...

  2. 四十四 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询

    1.elasticsearch(搜索引擎)的查询 elasticsearch是功能非常强大的搜索引擎,使用它的目的就是为了快速的查询到需要的数据 查询分类: 基本查询:使用elasticsearch内 ...

  3. cin关闭流同步加速

    习惯了用cin 很多人会说cin的速度比scanf慢很多, 其实不然. cin慢的原因主要在于默认cin与stdin总是保持同步, 这一步是消耗时间大户. 只需要加上std::iOS::sync_wi ...

  4. sql语言分类与整理：DQL\DML\DDL

    整体分为三类: 数据库查询语言(DQL,data QUERY LANGUAGE):对表的查询语句,select 数据库定义语言(DDL,data defined LANGUAGE):create da ...

  5. LeetCode OJ：Binary Tree Maximum Path Sum（二叉树最大路径和）

    Given a binary tree, find the maximum path sum. For this problem, a path is defined as any sequence ...

  6. pg_rewind 源端时间线发生改变 同步失败

    master-standby情况下,发生如下行为: 1.master停掉后,standby做为新的master(可能存在部分事物没有同步到standby中). 2.新master运行过程中出错,进行恢 ...

  7. Spring-Kafka 2.0.0发送API翻译

    Kafka Template–2.2.0 api KafkaTemplate KafkaTemplate这个类包装了个生产者,来提供方便的发送数据到kafka的topic里面. 同步和异步的方法都有, ...

  8. 抽象类，接口类，封装，property，classmetod，statimethod

    抽象类,接口类,封装,property,classmetod,statimethod(类方法,静态方法) 一丶抽象类和接口类 接口类(不崇尚用) 接口类:是规范子类的一个模板,只要接口类中定义的,就应 ...

  9. （十二）break,continue

    class Break { //break,continue public static void main(String[] args) { //break for(int i =0;i<=5 ...

  10. 数据库需要支持emoji表情

    由于需要实现emoji表情评论的功能,所以数据库需要支持emoji表情的存储,根据查询的资料最终实现了该功能,现将实现的过程以及过程遇到的一些问题记录下来,供大家参考和交流. mysql的utf8编码 ...