window.requestAnimationFrame 与window.onresize的区别

最新推荐文章于 2023-05-23 11:22:54 发布
原创 最新推荐文章于 2023-05-23 11:22:54 发布 · 357 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了 window.requestAnimationFrame 方法的使用，该方法用于实现平滑动画效果，通过在浏览器每次重绘前执行回调函数来更新动画帧。同时，文章还探讨了 window.onresize 事件的触发机制及其应用场景。

1. window.requestAnimationFrame
语法：

window.requestAnimationFrame( callback )

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。（在前端开发的 web页面嵌入C++开发的视频客户端，针对移动浏览器窗口计算客户端位置会用到）

需要注意的是：
1.电脑屏幕是1s更新60次（这是一个动画），所以这个回调函数是，1s执行60次，并且一直在执行
2.浏览器是以1s重绘60次的频率在重绘，而不是dom发生变化，或者窗口尺寸变化才会重绘

2. window.onresize
语法

window.onresize = resize;

function resize(){
 alert("检测到resize事件!");
}

onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数（在窗口关闭，窗口移动，并不会执行）

js跳出多重循环
11-05
js跳出多重循环 ，传统的break 和continue的意思，continue的意思是忽略此次循环，开始下次，着重说明break
从一道题浅说 JavaScript 的事件循环
weixin_34130269的博客
11-27 159
阮老师在其推特上放了一道题： newPromise(resolve=>{ resolve(1); Promise.resolve().then(()=>console.log(2)); console.log(4) }).then(t=>console.log(t)); console.log(3)...
深入理解 requestAnimationFrame
前端大全
03-08 5万+
（点击上方公众号，可快速关注）来源：一像素www.cnblogs.com/onepixel/p/7078617.html在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的
【Three.js基础】坐标轴辅助器、requestAnimationFrame处理动画、Clock时钟、resize页面尺寸（二）
热门推荐
编码世界
02-10 6万+
Three.js之坐标轴辅助器、requestAnimationFrame处理动画、Clock时钟、resize页面尺寸。
element js 包含字符_从零开始学前端 34. JS事件对象Event详解
weixin_39782394的博客
11-29 115
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正一、什么是事件对象 Event  每一个事件触发时，都会产生一个与之对应的事件对象event，其中包含了触发事件的元素、键盘鼠标的状态、位置等等内容。  每当用户触发一个事件后，JS 就会自动生成一个event对象，根据触发事件的不同，这个对象包含的内容也不同，比如通过鼠标触发点击事件，会产生一个MouseEvent对象，其中包含...
在JavaScript中如何利用`window.onresize`事件响应浏览器窗口大小的变化，并结合DOM操作实时更新页面元素的宽度和高度信息？
10-27
当需要在用户调整浏览器窗口大小时执行特定的JavaScript代码时，`window.onresize`事件处理器提供了这样的功能。它允许开发者捕获窗口尺寸变化的事件，并执行相应的代码以更新页面布局或其他元素。使用此事件时，...
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>💗</title> <style> html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; animation: anim 1.5s ease-in-out infinite; -webkit-animation: anim 1.5s ease-in-out infinite; -o-animation: anim 1.5s ease-in-out infinite; -moz-animation: anim 1.5s ease-in-out infinite; } #name { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -20px; font-size: 46px; color: #ea80b0; } @keyframes anim { 0% { transform: scale(0.8); } 25% { transform: scale(0.7); } 50% { transform: scale(1); } 75% { transform: scale(0.7); } 100% { transform: scale(0.8); } } @-webkit-keyframes anim { 0% { -webkit-transform: scale(0.8); } 25% { -webkit-transform: scale(0.7); } 50% { -webkit-transform: scale(1); } 75% { -webkit-transform: scale(0.7); } 100% { -webkit-transform: scale(0.8); } } @-o-keyframes anim { 0% { -o-transform: scale(0.8); } 25% { -o-transform: scale(0.7); } 50% { -o-transform: scale(1); } 75% { -o-transform: scale(0.7); } 100% { -o-transform: scale(0.8); } } @-moz-keyframes anim { 0% { -moz-transform: scale(0.8); } 25% { -moz-transform: scale(0.7); } 50% { -moz-transform: scale(1); } 75% { -moz-transform: scale(0.7); } 100% { -moz-transform: scale(0.8); } } </style> </head> <body> <canvas id="pinkboard"></canvas> <!-- 在下面加名字 --> <div id="name" style="color: pink;">啾啾</div> <script> var settings = { particles: { length: 500, duration: 2, velocity: 100, effect: -0.75, size: 30, }, }; (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"]; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f); }, f); b = d + f; return g; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d); }; } })(); var Point = (function () { function Point(x, y) { this.x = typeof x !== "undefined" ? x : 0; this.y = typeof y !== "undefined" ? y : 0; } Point.prototype.clone = function () { return new Point(this.x, this.y); }; Point.prototype.length = function (length) { if (typeof length == "undefined") return Math.sqrt(this.x * this.x + this.y * this.y); this.normalize(); this.x *= length; this.y *= length; return this; }; Point.prototype.normalize = function () { var length = this.length(); this.x /= length; this.y /= length; return this; }; return Point; })(); var Particle = (function () { function Particle() { this.position = new Point(); this.velocity = new Point(); this.acceleration = new Point(); this.age = 0; } Particle.prototype.initialize = function (x, y, dx, dy) { this.position.x = x; this.position.y = y; this.velocity.x = dx; this.velocity.y = dy; this.acceleration.x = dx * settings.particles.effect; this.acceleration.y = dy * settings.particles.effect; this.age = 0; }; Particle.prototype.update = function (deltaTime) { this.position.x += this.velocity.x * deltaTime; this.position.y += this.velocity.y * deltaTime; this.velocity.x += this.acceleration.x * deltaTime; this.velocity.y += this.acceleration.y * deltaTime; this.age += deltaTime; }; Particle.prototype.draw = function (context, image) { function ease(t) { return --t * t * t + 1; } var size = image.width * ease(this.age / settings.particles.duration); context.globalAlpha = 1 - this.age / settings.particles.duration; context.drawImage( image, this.position.x - size / 2, this.position.y - size / 2, size, size ); }; return Particle; })(); var ParticlePool = (function () { var particles, firstActive = 0, firstFree = 0, duration = settings.particles.duration; function ParticlePool(length) { particles = new Array(length); for (var i = 0; i < particles.length; i++) particles[i] = new Particle(); } ParticlePool.prototype.add = function (x, y, dx, dy) { particles[firstFree].initialize(x, y, dx, dy); firstFree++; if (firstFree == particles.length) firstFree = 0; if (firstActive == firstFree) firstActive++; if (firstActive == particles.length) firstActive = 0; }; ParticlePool.prototype.update = function (deltaTime) { var i; if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].update(deltaTime); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].update(deltaTime); for (i = 0; i < firstFree; i++) particles[i].update(deltaTime); } while ( particles[firstActive].age >= duration && firstActive != firstFree ) { firstActive++; if (firstActive == particles.length) firstActive = 0; } }; ParticlePool.prototype.draw = function (context, image) { if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].draw(context, image); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].draw(context, image); for (i = 0; i < firstFree; i++) particles[i].draw(context, image); } }; return ParticlePool; })(); (function (canvas) { var context = canvas.getContext("2d"), particles = new ParticlePool(settings.particles.length), particleRate = settings.particles.length / settings.particles.duration, time; function pointOnHeart(t) { return new Point( 160 * Math.pow(Math.sin(t), 3), 130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25 ); } var image = (function () { var canvas = document.createElement("canvas"), context = canvas.getContext("2d"); canvas.width = settings.particles.size; canvas.height = settings.particles.size; function to(t) { var point = pointOnHeart(t); point.x = settings.particles.size / 2 + (point.x * settings.particles.size) / 350; point.y = settings.particles.size / 2 - (point.y * settings.particles.size) / 350; return point; } context.beginPath(); var t = -Math.PI; var point = to(t); context.moveTo(point.x, point.y); while (t < Math.PI) { t += 0.01; point = to(t); context.lineTo(point.x, point.y); } context.closePath(); context.fillStyle = "#ea80b0"; context.fill(); var image = new Image(); image.src = canvas.toDataURL(); return image; })(); function render() { requestAnimationFrame(render); var newTime = new Date().getTime() / 1000, deltaTime = newTime - (time || newTime); time = newTime; context.clearRect(0, 0, canvas.width, canvas.height); var amount = particleRate * deltaTime; for (var i = 0; i < amount; i++) { var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random()); var dir = pos.clone().length(settings.particles.velocity); particles.add( canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y ); } particles.update(deltaTime); particles.draw(context, image); } function onResize() { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; } window.onresize = onResize; setTimeout(function () { onResize(); render(); }, 10); })(document.getElementById("pinkboard")); </script> </body> </html>
11-21
window.requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[i] + 'CancelAnimationFrame'] || window[vendors[i] + '...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; } </style> </HEAD> <BODY> <canvas id="c"></canvas> <script> var c=document.getElementById("c"); var ctx=c.getContext("2d"); c.width=window.innerWidth; c.height=window.innerHeight; // ctx.fillRect(0,0,100,100); // a,b,c,d分别代表x方向偏移,y方向偏移,宽，高 var string1 = "abcdefghijklmnopqrstuvwxyz"; string1.split(""); var fontsize=20; columns=c.width/fontsize; var drop = []; for(var x=0;x<columns;x++) { drop[x]=0; } function drap(){ ctx.fillStyle="rgba(0,0,0,0.07)"; ctx.fillRect(0,0,c.width,c.height); ctx.fillStyle="#ea80b0"; ctx.font=fontsize+"px arial"; for(var i=0;i<drop.length;i++){ var text1=string1[Math.floor(Math.random()*string1.length)]; ctx.fillText(text1,i*fontsize,drop[i]*fontsize); drop[i]++; if(drop[i]*fontsize>c.height&&Math.random()>0.9){//90%的几率掉落 drop[i]=0; } } } setInterval(drap,50); </script> <canvas id="pinkboard"></canvas> <script> /* * Settings */ var settings = { particles: { length: 500, // maximum amount of particles duration: 2, // particle duration in sec velocity: 100, // particle velocity in pixels/sec effect: -0.75, // play with this for a nice effect size: 30, // particle size in pixels }, }; /* * RequestAnimationFrame polyfill by Erik Möller */ (function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}()); /* * Point class */ var Point = (function() { function Point(x, y) { this.x = (typeof x !== 'undefined') ? x : 0; this.y = (typeof y !== 'undefined') ? y : 0; } Point.prototype.clone = function() { return new Point(this.x, this.y); }; Point.prototype.length = function(length) { if (typeof length == 'undefined') return Math.sqrt(this.x * this.x + this.y * this.y); this.normalize(); this.x *= length; this.y *= length; return this; }; Point.prototype.normalize = function() { var length = this.length(); this.x /= length; this.y /= length; return this; }; return Point; })(); /* * Particle class */ var Particle = (function() { function Particle() { this.position = new Point(); this.velocity = new Point(); this.acceleration = new Point(); this.age = 0; } Particle.prototype.initialize = function(x, y, dx, dy) { this.position.x = x; this.position.y = y; this.velocity.x = dx; this.velocity.y = dy; this.acceleration.x = dx * settings.particles.effect; this.acceleration.y = dy * settings.particles.effect; this.age = 0; }; Particle.prototype.update = function(deltaTime) { this.position.x += this.velocity.x * deltaTime; this.position.y += this.velocity.y * deltaTime; this.velocity.x += this.acceleration.x * deltaTime; this.velocity.y += this.acceleration.y * deltaTime; this.age += deltaTime; }; Particle.prototype.draw = function(context, image) { function ease(t) { return (--t) * t * t + 1; } var size = image.width * ease(this.age / settings.particles.duration); context.globalAlpha = 1 - this.age / settings.particles.duration; context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size); }; return Particle; })(); /* * ParticlePool class */ var ParticlePool = (function() { var particles, firstActive = 0, firstFree = 0, duration = settings.particles.duration; function ParticlePool(length) { // create and populate particle pool particles = new Array(length); for (var i = 0; i < particles.length; i++) particles[i] = new Particle(); } ParticlePool.prototype.add = function(x, y, dx, dy) { particles[firstFree].initialize(x, y, dx, dy); // handle circular queue firstFree++; if (firstFree == particles.length) firstFree = 0; if (firstActive == firstFree ) firstActive++; if (firstActive == particles.length) firstActive = 0; }; ParticlePool.prototype.update = function(deltaTime) { var i; // update active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].update(deltaTime); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].update(deltaTime); for (i = 0; i < firstFree; i++) particles[i].update(deltaTime); } // remove inactive particles while (particles[firstActive].age >= duration && firstActive != firstFree) { firstActive++; if (firstActive == particles.length) firstActive = 0; } }; ParticlePool.prototype.draw = function(context, image) { // draw active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].draw(context, image); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].draw(context, image); for (i = 0; i < firstFree; i++) particles[i].draw(context, image); } }; return ParticlePool; })(); /* * Putting it all together */ (function(canvas) { var context = canvas.getContext('2d'), particles = new ParticlePool(settings.particles.length), particleRate = settings.particles.length / settings.particles.duration, // particles/sec time; // get point on heart with -PI <= t <= PI function pointOnHeart(t) { return new Point( 160 * Math.pow(Math.sin(t), 3), 130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25 ); } // creating the particle image using a dummy canvas var image = (function() { var canvas = document.createElement('canvas'), context = canvas.getContext('2d'); canvas.width = settings.particles.size; canvas.height = settings.particles.size; // helper function to create the path function to(t) { var point = pointOnHeart(t); point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350; point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350; return point; } // create the path context.beginPath(); var t = -Math.PI; var point = to(t); context.moveTo(point.x, point.y); while (t < Math.PI) { t += 0.01; // baby steps! point = to(t); context.lineTo(point.x, point.y); } context.closePath(); // create the fill context.fillStyle = '#ea80b0'; context.fill(); // create the image var image = new Image(); image.src = canvas.toDataURL(); return image; })(); // render that thing! function render() { // next animation frame requestAnimationFrame(render); // update time var newTime = new Date().getTime() / 1000, deltaTime = newTime - (time || newTime); time = newTime; // clear canvas context.clearRect(0, 0, canvas.width, canvas.height); // create new particles var amount = particleRate * deltaTime; for (var i = 0; i < amount; i++) { var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random()); var dir = pos.clone().length(settings.particles.velocity); particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y); } // update and draw particles particles.update(deltaTime); particles.draw(context, image); } // handle (re-)sizing of the canvas function onResize() { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; } window.onresize = onResize; // delay rendering bootstrap setTimeout(function() { onResize(); render(); }, 10); })(document.getElementById('pinkboard')); </script> </BODY> </HTML> 在中心加上“生日快乐”
最新发布
12-07
烟花动画与生日祝福 <!-- 用于显示烟花动画的 canvas 元素 --> <canvas id="fireworks"></canvas> <!-- 用于显示字符下落动画的元素 --> <div class="falling-characters"></div> <!-- 用于显示“生日快乐...
iframe嵌套的其他页面，window.innerHeight获取高度不是iframe的高度
06-04
//监听父窗口的变化，因为父窗口大小改变也会影响iframe可用高度window.onresize=adjustHeight;```跨域情况：在跨域的情况下，由于安全限制，我们不能直接访问父窗口的DOM。但是，我们可以使用postMessage进行通信。...
async-await-事件循环
qq_23355915的博客
09-04 1008
async-await-事件循环及面试题解析
分析 HTTP 203 出的一个 JS 题目
weixin_33736649的博客
09-20 228
后续内容更新，请前往：个人博客，欢迎一起交流。 这是一道出自 HTTP 203 的 JS 题目。HTTP 203 是 Youtube 上的一个栏目，主要讲一些有趣的知识。 原题目是这样的： for( let i = (setTimeout(()=>console.log(i), 2333), 0); i < 2; ...
window.onresize——调整窗口大小事件
在热爱技术的路上一直前行。
05-08 1万+
1、语法规范 window.onresize = function(){} window.addEventListener('resize',function() {}); 2、作用 是调整窗口大小加载事件，当触发时就调用的处理函数。 3、注意 只要窗口大小发生像素变化，就会触发这个事件。 我们经常利用这个事件完成响应式布局。window.innerWidth为当前屏幕的宽度。 ...
window.onresize的详细使用
weixin_41886421的博客
03-10 8935
window.onresize的详细使用
window.onresize与$(window).resize()
淡定如斯的博客
11-29 6万+
window.onresize 是直接给window的onresize属性绑定事件，只能有一个。也就是说后面的会覆盖前面。例如：window.onresize = function(){ console.log("1") } window.onresize = function(){ console.log("2") }当浏览器窗口大小发生改变时，控制台只会打印 2。
Vue进阶（贰零零）：window.onresize事件在vue项目中的应用
IT全栈 华强工作室
08-26 4500
属性 window.onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数。 在窗口大小改变之后,就会触发resize事件. //vue页面 <template> <div id='echart'> 报表 </div> </template> <script> export default { data() { return { }; }, method
window.onresize与window.addEventListener(‘resize‘,...)来做浏览器窗口的缩放监听
weixin_44490109的博客
02-23 2万+
目录一、背景二、`window.onresize`为什么在重复使用过程中会被覆盖？三、`window.addEventListener`的运用 一、背景 在做浏览器窗口监听时我们该选用window.onresize还是window.addEventListener('resize',...)呢？之前遇到过这样一种情况，在一个vue项目的navBar部份使用了window.onresize做了监听控制，当窗口缩放到一定大小以下时菜单只显示图标隐藏文字，后面由于在做表格时也需要去做监听以实现自适应策略，在实现的
vue监听屏幕尺寸变化，window.onresize很简单
coldriversnow的专栏
05-23 2273
且做好定义为。
vue项目经验：window.onresize的使用
weixin_45031595的博客
05-25 3481
重点：window.onresize只能在一个组件中使用，如果多个组件调用则会出现覆盖情况，所以我的解决方案是在App.vue中使用，获取document.documentElement.clientWidth（即浏览器宽度）存放在vuex中，别的组件只需要用computed(计算属性)将vuex的clientWidth获取，然后通过watch监听clientWidth的值，即可触发组件事件 App.vue代码 <script> export default { name: 'app',
window.onresize无效
sha_1234的博客
03-15 1391
使用window.onresize时无效
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值