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. js的onclick字符串参数的解决办法

    <a href='#' onclick='onedit(\""+ name + "\")';>编辑</a>" 一些写法实例~~ ...

  2. 2017.2.9日总结--外网IP和内网IP

    Linux自己不能通过自己的外网访问自己必须通过内网访问自己

  3. 前端之CSS续集

    CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: 一.css 语法形式: 二.使用步骤   1.引入css规则 2.使用cs ...

  4. [Git]Git指南一　查看创建删除标签

    1. 查看标签 列出现有标签,使用如下命令: xiaosi@yoona:~/code/learningnotes$ git tag r-000000-000000-cm.cm v1.0.0 v1.0. ...

  5. keras&tensorflow+分布式训练︱实现简易视频内容问答框架

    内容来源:Keras 之父讲解 Keras:几行代码就能在分布式环境训练模型 把 Keras API 直接整合入 TensorFlow 项目中,这样能与你的已有工作流无缝结合.至此,Keras 成为了 ...

  6. iOS开发之Documentation.build/Script-BC552B3A15.sh:

    /Users/hbbhao/Library/Developer/Xcode/DerivedData/AWLive-dmbegyhgamayzudqqdentwngdpkr/Build/Intermed ...

  7. Android 进阶11：进程通信之 ContentProvider 内容提供者

    学习启舰大神,每篇文章写一句励志的话,与大家共勉. When you are content to be simply yourself and don't compare or compete, e ...

  8. Leetcode 1013. Partition Array Into Three Parts With Equal Sum

    简单题,暴力找出来就行. class Solution: def canThreePartsEqualSum(self, A: List[int]) -> bool: s = sum(A) if ...

  9. UVALive 6163(暴力枚举)

    这道题我的做法就是枚举这四个数的所有排列所有运算所有计算顺序. 略有考验代码能力,不能漏掉情况,注意模块化的思想,一些功能写成函数调试的时候结构清晰好分析. 比赛时没有AC是对next_permuta ...

  10. Developing on Windows Phone 8 Devices

    Developing on Windows Phone 8 Deviceshttp://docs.madewithmarmalade.com/native/platformguides/wp8guid ...