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)


相关推荐

  • c++视频转字符画_c++字符数组转化为字符串

    c++视频转字符画_c++字符数组转化为字符串运行此程序需要有graphics图形库#include <stdio.h>#include <graphics.h> // 图形库的头文件#define HEIGHT 8 // 转换后的高度#define WIDTH 8 // 转换后的宽度#define ASCII1 32 // 转换ASCII数量struct ASCII{ char as…

  • IntelliJ Idea 常用12款插件(提高开发效率),附优秀主题插件[通俗易懂]

    插件安装方式:新版本IDE安装方式略有不同,不一一赘述1、BackgroundImagePlus这款插件并不能直接提高你的开发效率,但是可以让你面对的IDE不再单调,当把背景设置成你自己心仪的的图片,是不是会感觉很赏心悦目,编码效率会不会因此间接的提高?!使用方法:2、MybatisLogPluginMybatis现在是j…

  • vue的render函数用法[通俗易懂]

    vue的render函数用法[通俗易懂]1.render简介前面我们的组件的模板都是在模板里写的(template),模板最后都会被vue编译成virtualdom(虚拟dom),在某些情况下模板可能不好用,例如需要实现一个动态的文章标题,根据父组件的level属性,动态的渲染成h1~hx标签,用模板写部分代码如下。<article-header:level=”1″>Helloworld</article-h…

    2022年10月31日
  • JAVA游戏开发-超炫酷贪吃蛇游戏源码及教程

    JAVA游戏开发-超炫酷贪吃蛇游戏源码及教程一.前言某日,看见隔壁家的小朋友在玩一款网络爆款贪吃蛇游戏,感觉很好玩。自己刚好正在学习JAVA编程,也想实现一个类似功能的游戏Demo练手,在网上查看了不少源码案例,全都是很古老的方块式贪吃蛇游戏案例,没有想要的实现,因此自己动手实现一个JAVA版的贪吃蛇游戏。我在这个Dome完成之后重写了这个游戏的Android版,并重新更名为《蛇王传说》。也欢迎大家下载试玩。游戏下载地址:https…

  • 程序员需知的 59 个网站

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 众所周知,程序员是一个需要不断学习的职业,而幸运的是,在这个互联网时代,知识就在那里,等着我们去获取。 作为一个&n…

  • Visual Studio 2017安装教程

    Visual Studio 2017安装教程下载VS2017组件选择及安装设置激活其它下载VS2017下载VS2017的安装器:http://msdn.itellyou.cn/我的安装版本为:VisualStudio2017(version15.7)VisualStudioProfessional2017(version15.7)(x86andx64)-(MultipleLanguages)下载此安…

发表回复

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

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