用requestAnimationFrame替代setInterval制作匀速动画

代码之前的介绍来自于这里requestAnimation介绍
了解过事件循环机制的朋友应该知道，siteTimeout和setInterval并不是精准的时间间隔，他们要等待其他优先的执行队列执行完成以后才能继续执行。

于是就引入了一个新的动画执行方式-- window.requestAnimationFrame()。它告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

它采用的是系统时间间隔，以保证最佳的绘制效率，不会因为时间过短造成过度绘制，也不会因为时间间隔太长，产生动画卡顿的现象。让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

特点
requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

应用
requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行

let retID = requestAnimationFrame(callback);

取消的话可直接使用canceAnimationFrame来进行取消即可

cancelAnimationFrame(retID)

先来看个setInterval动画的例子

效果如图：

代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style>* {margin: 0;padding: 0;}#box {width: 100px;height: 100px;background-color: red;position: absolute;overflow: hidden;}.item-container {display: flex;flex-direction: column;justify-content: space-between;align-items: center;height: 500px;width: 100px;}.item {width: 50px;height: 50px;background-color: blue;border-radius: 50%;margin-top: 10px;z-index: 100;}.open {width: 100px;height: 100px;line-height: 100px;text-align: center;}</style></head><body><button id="btn1">改变高度</button><div id="box"><div class="open">展开</div><div class="item-container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></div><script>window.addEventListener("load", function (ev) {var box = document.getElementById("box");var flag = true;// 执行动画，改变盒子高度document.getElementById("btn1").addEventListener("click", function (ev) {if (flag) {buffer(box, "height", 500);flag = false;} else {buffer(box, "height", 100);flag = true;}});});// 获取当前元素样式function getStyleAttr(obj, attr) {if (obj.currentStyle) {// IE 和 operareturn obj.currentStyle[attr];} else {return window.getComputedStyle(obj, null)[attr];}}// 迅速动画函数function buffer(eleObj, attr, target) {//1.1先清后设clearInterval(eleObj.timer);var speed = 0,begin = 0;//1.2设置定时器eleObj.timer = setInterval(function () {//获取动画属性的初始值begin = parseInt(getStyleAttr(eleObj, attr));speed = (target - begin) * 0.2;speed = target > begin ? Math.ceil(speed) : Math.floor(speed);eleObj.style[attr] = begin + speed + "px";if (begin === target) {clearInterval(eleObj.timer);}}, 20);}</script></body>
</html>

用requestAnimationFrame代替setInterval重写buffer函数

 // 动画函数buffer(eleObj, attr, target) {// 先清后设cancelAnimationFrame(eleObj.timer)let speed = 0let begin = 0let _this = thiseleObj.timer = requestAnimationFrame(function fn() {begin = parseInt(_this.getStyleAttr(eleObj, attr))// 动画速度speed = (target - begin) * 0.9speed = target > begin ? Math.ceil(speed) : Math.floor(speed)eleObj.style[attr] = begin + speed + "px"eleObj.timer = requestAnimationFrame(fn)if (begin === target) {cancelAnimationFrame(eleObj.timer);}})},getStyleAttr(obj, attr) {if (obj.currentStyle) {// IE 和 operareturn obj.currentStyle[attr];} else {return window.getComputedStyle(obj, null)[attr];}}

用requestAnimationFrame替代setInterval制作匀速动画相关推荐

vue使用优化后的动画级别的定时器 requestAnimationFrame 比setInterval, setTimeout效果要高很多
vue使用优化后的动画级别的定时器 requestAnimationFrame 比setInterval, setTimeout效果要高很多概述默认情况下,requestAnimationFram ...
html制作图片动画效果代码,HTML5 Canvas：制作动画特效
编辑推荐: 本文来自于jquery之家 ,html5制作canvas动画的基本步骤,控制canvas动画和实例代码. 要在 HTML5 canvas 中绘制图像动画效果,你需要绘制出每一帧的图像,然后 ...
JavaScript动画：offset和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介我们知道,三大家族包括:offset/scroll/c ...
js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
html5快速制作,html5动画制作（教你如何快速绘制HTML5动画）
html5动画制作(教你如何快速绘制HTML5动画) 本周在给学生讲授JavaScript课程中setInterval方法时,想到了我们在网上看到的各类GIF动图比较有意思,就将其引入到教学中,教学内 ...
原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
如何制作 3D 动画短片?
制作3D动画短片真的很有挑战性,特别是如果您是从头开始的话.你需要一堆软件和一群艺术家来将你的想法变为现实,这可能非常昂贵且耗时. 如何制作一部3D动画短片? 在这篇文章中,我们将分解制作 3D 动画 ...
python中利用turtle（海龟）绘图制作龟兔赛跑动画——仅供学习
python中利用turtle(海龟)绘图制作龟兔赛跑动画--仅供学习哦首先,欢迎大家来我的博客当中浏览,由于我和我的可爱现在还都个初学者,所作的东西还不够完善,之前在学习计算机的各种语言的过程中, ...
AE制作Json动画教程
本文将从为什么要做动画,到动画实现方式,再到用AE+Bodymovin制作动画,结合实际案例行分享,希望给新手带来一些启发. 首先我们来聊聊,我们为什么要做动效? 1.突出产品某项功能在APP中,我 ...

用requestAnimationFrame替代setInterval制作匀速动画

先来看个setInterval动画的例子

用requestAnimationFrame替代setInterval制作匀速动画相关推荐

最新文章

热门文章