requestAnimationFrame

最新推荐文章于 2024-06-21 08:42:30 发布
最新推荐文章于 2024-06-21 08:42:30 发布
阅读量597 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35652217/article/details/79258542
版权

window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>requestAnimationFrame</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height:500px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <canvas></canvas>
    </div>
    <script>
        (function() {
            var oBox = document.querySelector(".box");
            var canvas = document.querySelector("canvas");
            canvas.width = oBox.offsetWidth;
            canvas.height = oBox.offsetHeight;
            ctx = canvas.getContext('2d');
            function Ball(x,y,r) {
                this.x = x;
                this.y = y;
                this.r = r;
                this.vx = random(-2,2);
                this.vy = random(-3,3);
                this.colors = ['#FF69B4','#C71585','#FF00FF','#800080','#9400D3','#90EE90'];
                this.color = this.colors[Math.floor(random(0,6))]
                this.a = 1;
            }
            var ball = new Ball();
            Ball.prototype = {
                drawBall:function() {
                    ctx.beginPath();
                    ctx.fillStyle = this.color;
                    ctx.globalAlpha = this.a;
                    ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
                    ctx.fill();
                    ctx.closePath();
                    this.updata();
                },
                updata: function() {
                    this.x += this.vx;
                    this.y += this.vy;
                    this.a -= 0.05;
                }
            }
            function random(min,max) {
                return min+(max-min)*Math.random();
            }
            var flag = false;
            var ballList = [];
            oBox.addEventListener("mousedown",function() {
                flag = true;
            })
            oBox.addEventListener("mousemove",function(e) {
                if(!flag) {
                    return;
                }
                var ball = new Ball(e.x,e.y,10);
                ballList.push(ball);
            })
            oBox.addEventListener("mouseup",function() {
                console.log(ballList)
                flag = false;
            })
            function render() {
                ctx.clearRect(0,0,oBox.offsetWidth,oBox.offsetWidth)
                ballList.forEach(function(item,index) {
                    console.log(item.a)
                    if(item.a<0) {
                        ballList.splice(index,1);
                        return;
                    }
                    item.drawBall();
                });
                if(ballList.length>10) {
                    var s = ballList.length-100
                    ballList.splice(0,s);
                }
                requestAnimationFrame(render);
            }
            render();
        })();
    </script>
</body>
</html>

Gkuankuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js初探：用requestAnimationFrame优化Web动画
weixin_42409321的博客
07-06 826
Web动画背景 在Web应用中，我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次，来让它动起来，从而形成动画的效果，Js中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 在JavaScript API(应用开发接口）出来之前一直是使用的setInterval(function,interval)方法去实现。但是这个方法有问题就是会占用较高的CPU使用率，降低系统的效率。 requestAnimationFrame 通过
JavaScript requestAnimationFrame动画详解
10-19
主要为大家详细介绍了JavaScript requestAnimationFrame动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
介绍一下requestAnimationFrame和requestIdleCallback
油墨香^-^的博客
04-11 476
和。
前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-21 3559
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval：与 setTimeout 类似，setInterval 也会将要执行的代码或函数放入事件循环队列中，但它在指定的时间间隔后会一直重复执行，直到 clearInterval 被调用或窗口被关闭。函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
collapse-requestAnimationFrame
04-08
在JavaScript编程中，`requestAnimationFrame` 是一个非常重要的性能优化工具，主要用于在浏览器下一次重绘之前执行动画或更新UI的任务。这个API的设计目的是让开发者能够更高效地控制页面的动画效果，避免不必要的...
BOM系列第二篇之定时器requestAnimationFrame
09-01
《深入理解BOM系列：定时器requestAnimationFrame》 在JavaScript世界中，动画的实现离不开定时器，而requestAnimationFrame则是现代浏览器提供的一种优化过的定时器，特别适用于创建高性能的动画效果。本文将详细...
html5新增的定时器requestAnimationFrame实现进度条功能
09-27
在`requestAnimationFrame`出现之前，开发者通常使用`setTimeout`或`setInterval`来创建动画，但这两个方法存在一些不足： 1. **性能问题**：`setTimeout`和`setInterval`不考虑浏览器的渲染机制，可能会在任意时刻...
requestAnimationFrame:window.requestAnimationFrame 的 polyfill
06-12
在JavaScript的世界里，`requestAnimationFrame`是一个至关重要的API，它被用来优化网页动画性能，确保浏览器在下一次重绘或回流之前执行指定的函数。`requestAnimationFrame`的工作原理是将绘制任务添加到浏览器的...
RequestAnimationFrame
12-27
requestAnimationFrame是一个用于执行动画的JavaScript方法。它使用浏览器的刷新率作为参考，确保动画帧的更新在每一帧之间的间隔是最佳的，从而实现更加流畅和自然的动画效果。 以下是使用requestAnimationFrame的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值