requestAnimationFrame实现动画

一、requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。
由系统来决定回调函数的执行时机 如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次
它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次,这样就不会引起丢帧现象,也不会导致动画出现卡顿的问题。
优点:
1.浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。
2.在一个浏览器标签页里运行一个动画,当这个标签页不可见时(页面被tab切换,或者最小化之后),浏览器会暂停它,这会减少CPU,内存的压力,节省电池电量。

二、setTimeout
利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象,这种现象的产生有两个原因:
1.setTimeout的执行时间并不是确定的。在Javascript中, setTimeout 任务被放进了异步队列中,只有当主线程上的任务执行完以后,才会去检查该队列里的任务是否需要开始执行,因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。
2.刷新频率受屏幕分辨率和屏幕尺寸的影响,因此不同设备的屏幕刷新频率可能会不同,而 setTimeout只能设置一个固定的时间间隔,这个时间不一定和屏幕的刷新时间相同。
 
//动画持续转动
let obox=document.getElementsByClassName('box1')[0];
let deg=0;
function test(){
    if(deg==360){
        deg=0;
    }
    deg+=5;
    console.log(deg);
    obox.style.transform=`rotate(${deg}deg)`;
    window.requestAnimationFrame(test);
}
window.requestAnimationFrame(test);
三、mousemove, scroll 这类事件,requestAnimationFrame 会在一帧内被多次调用,
  需要管理回调函数,防止重复绘制动画。
 
let flag=true;
const onScroll = e => {
    if (!flag) return;
    flag = false;
    window.requestAnimationFrame(timestamp => {
        flag = true;
        console.log(1111111)
        // animation(timestamp);
    })
}
window.addEventListener('scroll', onScroll);

 

转载于:https://www.cnblogs.com/yuesu/p/9830386.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue项目中使用requestAnimationFrame实现动画效果的步骤如下: 1. 在Vue组件中,创建一个方法来处理动画效果。例如,我们可以创建一个名为`animate`的方法。 2. 在`animate`方法中,使用`requestAnimationFrame`函数来循环执行动画效果。在每一帧中,你可以更新组件中的数据或者操作DOM元素来实现动画效果。 3. 在`animate`方法中,使用`this.$refs`来获取需要操作的DOM元素。例如,如果你想旋转一个3D模型,你可以使用`this.$refs`来获取模型的引用。 4. 在`animate`方法中,使用`this.$nextTick`来确保DOM元素已经更新完毕。这样可以避免在更新DOM元素之前执行动画效果。 5. 在`animate`方法中,使用`this.$refs`来更新DOM元素的样式或属性。例如,你可以使用`this.$refs.element.style.transform`来旋转一个元素。 6. 在`animate`方法中,使用`requestAnimationFrame`函数来递归调用`animate`方法,以实现动画的连续播放。 下面是一个示例代码,演示了如何在Vue项目中使用requestAnimationFrame实现动画效果: ```javascript <template> <div ref="element" class="box"></div> </template> <script> export default { mounted() { this.animate(); }, methods: { animate() { // 更新动画效果 // this.$refs.element.style.transform = 'rotate(45deg)'; // 更新数据 // this.data = 'new data'; // 执行其他操作 // 确保DOM元素已经更新完毕 this.$nextTick(() => { // 更新DOM元素的样式或属性 // this.$refs.element.style.transform = 'rotate(90deg)'; // 执行其他操作 // 递归调用animate方法,实现动画的连续播放 requestAnimationFrame(this.animate); }); } } } </script> <style> .box { width: 100px; height: 100px; background-color: red; } </style> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值