css requestAnimationFrame

2024-01-04 10:48

本文主要是介绍css requestAnimationFrame,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

绘制动画,一般有两个选择:

  1. js脚本 setTimeout和setInterval
  2. css3 transition和animation属性

这两个方法有各自的局限性:

  • js脚本实现动画的局限性:
  1. 即使向 setTimeout和setInterval 传递ms级的参数,由于js单线程的关系,可能会引发堵塞,不能达到高精度的准确性
  2. 没有对动画的循环机制进行优化,只是以一个大致的时间间隔循环,而且“最优帧速率”和“选择绘制下一帧的最优时机”都需要开发者自己来控制;ms设置过小,比如小于16.67ms(60帧)那么就会引起掉帧(一般显示器显示最高频率是60帧);设置过大,帧数小,动画效果不流畅
  • css3实现动画的局限性
  1. 兼容性问题,对于PC浏览器,IE8, IE9之流,你想兼容实现某些动画效果,比如说淡入淡出,就无能为力了
  2. 不能应用所有属性问题,CSS3动画可以改变高宽,方位,角度,透明度等等,但是对于scrollTop,就无能无力了
  3. CSS3支持的动画效果有限

于是,我们引入requestAnimationFrame

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

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

timerID = requestAnimationFrame(callback); 
//控制台输出1和0
var timer = requestAnimationFrame(function(){console.log(0);
}); 
console.log(timer);//1

cancelAnimationFrame方法用于取消定时器

//控制台什么都不输出
var timer = requestAnimationFrame(function(){console.log(0);
}); 
cancelAnimationFrame(timer);

也可以直接使用返回值进行取消

var timer = requestAnimationFrame(function(){console.log(0);
}); 
cancelAnimationFrame(1);

其实我们在《vue 页面加载进度条组件》中使用了setInterval作为动画脚本,现在我们可以用requestAnimationFrame重写(主要是一个递归调用,看mounted和watch中的代码就可以了)

<template><transition name="fade"><div class="progress-bar" v-if="isShow"></div></transition>
</template><script type="text/babel">export default {data() {return {isShow: true, // 是否显示进度条val: 0, // 进度}},props: {/*** 每10毫秒自增幅度*/step: {type: Number,default: 5,},/*** 初始值*/initVal: {type: Number,default: 0,},/*** 到一定进度停止*/stopVal: {type: Number,default: 80,},/*** 进度条继续到成功*/isOk: {type: Boolean,default: false,},},mounted() {this.val = this.initVallet step =  this.steplet loop = () => {this.val = this.val + stepthis.$el.style.width = this.val + '%'if (this.val >= this.stopVal) {cancelAnimationFrame(timer)return}requestAnimationFrame(loop)}let timer = requestAnimationFrame(loop)},watch: {isOk() {let val = this.vallet step =  this.steplet loop = () => {val = val + stepthis.$el.style.width = val + '%'if (val >= 100) {cancelAnimationFrame(timer)this.isShow = falsethis.$emit('callback', 'load success')return}requestAnimationFrame(loop)}let timer = requestAnimationFrame(loop)},},}
</script><style lang="stylus" rel="stylesheet/stylus">.progress-bar {position fixedtop 0height 6pxwidth 0background-color #999}.fade {&-enter-active, &-leave-active {transition: all .3s}&-enter, &-leave-active {opacity: 0}}
</style>

这篇关于css requestAnimationFrame的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/569087

相关文章

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...