)网站开发架构师,4G访问wordpress,创建网页文件,英文网站建设之后怎么推1、RAF介绍
requestAnimateFrame#xff08;RAF#xff09;动画帧#xff0c;是一个做动画的API。 如果想要一个动画流畅#xff0c;就需要以60帧/s来更新视图#xff0c;那么一次视图的更新就是16.67ms。 想要达到上述目标#xff0c;可以通过setTimeout定时器来手动控…1、RAF介绍
requestAnimateFrameRAF动画帧是一个做动画的API。 如果想要一个动画流畅就需要以60帧/s来更新视图那么一次视图的更新就是16.67ms。 想要达到上述目标可以通过setTimeout定时器来手动控制频率。 RAF可以自动实现60帧/s的更新并且在页面隐藏在后台时RAF会暂停动画而setTimeout依然会执行。
2、requestAnimationFrame特点
requestAnimationFrame的执行步伐跟着系统的绘制频率走。它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次这样就不会引起丢帧现象也不会导致动画出现卡顿的问题。如果系统绘制率是 60Hz那么回调函数就会16.7ms再 被执行一次如果绘制频率是75Hz那么这个间隔时间就变成了 1000/7513.3ms。在隐藏或不可见的元素中requestAnimationFrame将不会进行重绘或回流这当然就意味着更少的CPU、GPU和内存使用量。使用setTimeout实现的动画当页面被隐藏或最小化时setTimeout 仍然在后台执行动画任务
3、requestAnimationFrame缺点
RAF存在兼容性问题RAF是在主线程上完成如果主线程非常繁忙requestAnimationFrame的动画效果会大打折扣。
4、举个例子 在3s内把宽度从 100px 变为 640px即增加 540px。
要保持动画流畅就需在3s内实现180帧在180帧内完成540px那么每帧变化3px即每16.67ms增加3px。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js/scripttitleDocument/titlestyle#div1{width: 100px;height: 50px;background-color: palevioletred;}/style
/head
bodydiv iddiv1/divscriptlet curWidth 100const maxWidth 640const $div1 $(#div1)// 利用setTimeout定时器实现动画更新 从100到640pxfunction animate(){curWidth curWidth 3$div1.css(width, curWidth)if(curWidth maxWidth){setTimeout(animate, 16.7)}}// 使用 requestAnimationFrame()function animate(){curWidth curWidth 3$div1.css(width, curWidth)if(curWidth maxWidth){window.requestAnimationFrame(animate) // 时间不用自己控制}}animate()/script
/body
/html
