zoukankan      html  css  js  c++  java
  • requestAnimationFrame 定时器

    这个方法是通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。

    基本语法:

    requestAnimationFrame(callback)//callback为回调函数
    案例:

    模拟一个进度条动画,初始div宽度为1px,在step函数中将进度加1然后再更新到div宽度上,在进度达到100之前,一直重复这一过程。

    为了演示方便加了一个运行按钮。

    效果:

    代码:

    <div id="test" style="1px;height:17px;background:#0f0;">0%</div>
    <input type="button" value="Run" id="run"/>
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    var start = null;
    var ele = document.getElementById("test");
    var progress = 0;
    
    function step(timestamp) {
        progress += 1;
        ele.style.width = progress + "%";
        ele.innerHTML=progress + "%";
        if (progress < 100) {
            requestAnimationFrame(step);
        }
    }
    requestAnimationFrame(step);
    document.getElementById("run").addEventListener("click", function() {
        ele.style.width = "1px";
        progress = 0;
        requestAnimationFrame(step);
    }, false);
    做好每一件小事。
  • 相关阅读:
    我的收藏
    VS2019错误:CS8370 的处理方法
    Win7设置远程访问(免密码)---- Cuba
    【收藏】关于AsposeDLL的使用
    VS Code 离线安装插件(中文包)
    WinCE在启动界面无法进入系统
    WinCE 清除远程连接缓存
    MySQL 创建远程访问用户
    MySQL 命令行(常用)操作数据库
    C# 制作关键字醒目显示控件
  • 原文地址:https://www.cnblogs.com/peachGirl/p/5971033.html
Copyright © 2011-2022 走看看