js动画效果_js动画函数

js动画效果_js动画函数一、setTimeoutVS.requestAnimationFrame传统js动画实现一般使用setTimeout/setInterval等定时方式执行一个动画更新操作,但这种方式在使用中存在一些问题。动画帧间隔interval问题大部分显示器的刷新频率是16.7ms,如果setTimeout的interval小于这个值,就会出现绘制的帧无法在显示器上展现的问题,好像被吞掉了一样。另

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

一、setTimeout VS. requestAnimationFrame

传统js动画实现一般使用setTimeout/setInterval等定时方式执行一个动画更新操作,但这种方式在使用中存在一些问题。

  1. 动画帧间隔interval问题
    大部分显示器的刷新频率是16.7ms,如果setTimeout的interval小于这个值,就会出现绘制的帧无法在显示器上展现的问题,好像被吞掉了一样。
    另外,各个显示器的刷新频率不同,也使得一套代码无法自适应不同频率,难以对动画效果最优化。

  2. 页面不可见时继续执行,浪费资源、电量

而requestAnimationFrame则可以解决这些问题:

  1. 浏览器自动根据当前显示器刷新频率来设置动画每帧的间隔时间interval。例如,显示器是10ms,则interval就是10ms;如果是16.7ms,则interval自动是16.7ms

  2. 浏览器优化动画绘制
    浏览器可以合并requestAnimationFrame的动画操作、CSS动画、CSS变换等各种动画效果到一次渲染周期中完成。并且在页面不可见时,可以选择不进行动画渲染的执行(似乎是暂停动画),节约资源、电量。

二、使用requestAnimationFrame

代码使用上,requestAnimationFrame和setTimeout很相似。

    function renderFrame() { 
   
        // do something
    }

    // setTimeout / setInterval
    var handler = setTimeout(renderFrame, 100);

    // requestAnimationFrame
    var hanlder = requestAnimationFrame(renderFrame);

从上面可以看出,两者的差别在于是否指定interval的值。

三、浏览器兼容性

目前,有些低版本浏览器不支持requestAnimationFrame,这种情况下为了进行兼容,还是需要使用setTimeout/setInterval来实现动画。另外,各厂商浏览器中requestFrameAnimation的名称也有差别,所以可以使用下面的最简单的方法,来进行兼容。

window.requestAnimFrame = (function() {
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

如果想更保险,可以参考Opera浏览器的技术师Erik Möller的封装

(function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }());

在这里,代码判断了是使用4ms还是16ms的延迟,来最佳匹配60fps。同时还支持cancel方法。

参考资料

  1. https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
  2. http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/181811.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Spug – 轻量级自动化运维平台

    Spug – 轻量级自动化运维平台Spug-轻量级自动化运维平台对于中小型企业而言,进行主机和应用的管理是比较麻烦的,应用部署往往需要直接连接服务器,再进行手动的环境配置、代码拉取、应用构建和部署发布等工作,容易出错,且耗时费力。一个好的自动化运维平台,往往能大大节省人力物力,提高开发部署效率。Spug,正是一个面向中小型企业设计的轻量级自动化运维平台。Spug自动化运维平台简介Spug,是openspug在Github上开源的自动化运维平台,项目位于https://github.com/openspug/spug,

  • 序列化和反序列化的底层实现原理是什么?

    序列化和反序列化的底层实现原理是什么?序列化和反序列化作为Java里一个较为基础的知识点,大家心里也有那么几句要说的,但我相信很多小伙伴掌握的也就是那么几句而已,如果再深究问一下Java如何实现序列化和反序列化的,就可能不知所措了!遥记当年也被问了这一个问题,自信满满的说了一大堆,什么是序列化、什么是反序列化、什么场景的时候才会用到等,然后面试官说:那你能说一下序列化和反序列化底层是如何实现的吗?一脸懵逼,然后回家等通知!一、…

  • golang 激活码 不对【在线破解激活】

    golang 激活码 不对【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 新东方官网老师_杭州新东方老师排名

    新东方官网老师_杭州新东方老师排名http://blog.sina.com.cn/m/xdfzhangxia   

  • PyTorch学习笔记(6)——DataLoader源代码剖析

    PyTorch学习笔记(6)——DataLoader源代码剖析这两天把DataLoader的源代码的主要内容进行了一些分析,基于版本0.4.1。当然,因为内容比较多,没有全部展开,这里的主要内容是DataLoader关于数据加载以及分析PyTorch是如何通过Python本身的multiprocessing和Threading等库来保证batch是顺序取出的。额外的内容都会给出链接,在这里不会详细展开。0.前言(楔子)本篇关于DataLoad…

  • 美国公司海外囤积现金总额达2.5万亿美元「建议收藏」

    美国公司海外囤积现金总额达2.5万亿美元

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号