湫requestAnimationFrame基本用法

湫夨兮

2024-04-22 帮助1人

提到动画效果，很多人会想到transition、animation、canvas，亦或者用js实现动画效果

那么requestanimationframe和他们有什么不一样的呢？

transition：过渡，只能控制开始和结束时的动画效果，过程中间是无法干预的，transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。

animation：真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。

canvas：作为H5新增元素，是借助Web API来实现动画的。主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。

js：setInterval、setTimeout实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。而且大部分时候我们都是设置16ms作为动画循环，因为人眼对于即时渲染的画面要达到60hz才觉得流畅，电影的25hz是有动态模糊的，页面是没有的。

requestAnimationFrame是另一种Web API，原理与setTimeout和setInterval类似，都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi，在性能上比另两者要好。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="vue"></div>
    <script type="text/javascript">
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;

    let elem = document.getElementById("vue");
    let left = 0;
    //自动执行持续性回调
    requestAnimationFrame(step);
    //持续该改变元素位置
    function step() {
        if(left<window.innerWidth-200){
            left =1;
            elem.style.marginLeft = left "px";
            requestAnimationFrame(step);
        }
    }
    </script>
</body>
</html>

requestAnimationFrame只是将回调的方法传入到自身的参数中执行，而不是通过setInterval调用。

1、requestAnimationFrame 会同步屏幕刷新率，所以会在一帧内将动画刷新完成，会看上去更流畅
2、requestAnimationFrame对于显隐的元素不会造成回流重绘，减少重新渲染，所以更高效，对机器压力也低

这是我半年前遇到的问题，现在正好有空，可以回顾一下，直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="canvas">
        <canvas id="box" width="1096" height="1093"></canvas>
    </div>
</body>
<script>
    function Stage(ctx) {
        this.ctx = ctx;
        this.displayObjects = [];
    }

    Stage.prototype.add = function(displayObject) {
        this.displayObjects.push(displayObject);
    };
    // 渲染循环
    Stage.prototype.render = function() {
        var displayObjects = this.displayObjects;
        var ctx = this.ctx;

        function loop() {
            // 清空画布
            ctx.clearRect(0, 0, 1092, 1093);

            // 重绘每一个displayObject
            displayObjects.forEach(function(displayObject) {
                displayObject.update(ctx);
            });
            requestAnimationFrame(loop);
        }
        loop();
    };

    // 一个简单的display object
    function Rectangle(x, y, w, h) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }

    // display object主要是根据自己的属性知道如何绘制自己
    Rectangle.prototype.update = function(ctx) {
        ctx.beginPath();
        ctx.rect(this.x, this.y, this.w, this.h);
        ctx.stroke();
        ctx.closePath();
    };

    function newImage(data) {
        this.img = new Image();
        this.img.src = data.characterImg;
        this.alarmStatus = data.alarmStatus;
        this.x = data.x;
        this.y = data.y;
        this.gameId = data.gameId;
        this.isVip = data.isVip;
        this.devId = data.devId;
        this.mobile = data.mobile;
        this.uid = data.uid;
    }

    newImage.prototype.update = function(ctx) {
        if (this.alarmStatus == 0) {
        } else if (this.alarmStatus == 1) {
            ctx.drawImage(this.img, 0, 0, 125, 125, this.x - 10, this.y - 10, 20, 20);
        } else if (this.isVip) {
            ctx.drawImage(this.img, 0, 0, 125, 125, this.x - 10, this.y - 10, 20, 20);
        }
    }


    var stage;

    function init() {
        var canvas = document.getElementById('box');
        var ctx = canvas.getContext('2d');
        stage = new Stage(ctx);
        // 创建两个display object
        // var rect = new Rectangle(10, 10, 20, 40);
        // var sqr = new Rectangle(50, 50, 30, 30);
        for (var i = 0; i < 200; i  ) {
            var image = new newImage({
                characterImg: "https://gimg2.百度.com/image_search/src=http://img.jj20.com/up/allimg/1114/0G020114924/200G0114924-15-1200.jpg&refer=http://img.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658993654&t=9dc8bb47a84d18856607af209b0c4133",
                alarmStatus: 0,
                x: 10   i,
                y: 10   i,
                gameId: "0000096",
                isVip: false,
                devId: '040FED',
                mobile: '11011011095',
                uid: '749015967',
            })
            stage.add(image)
        }



        // 放入stage并开始渲染循环
        // stage.add(rect);
        // stage.add(sqr);

        stage.render();
        console.log(stage.displayObjects);
        // 这里不断改变一个display object的显示属性
        setInterval(function() {
            for (var i = 0; i < stage.displayObjects.length; i  ) {
                var image = stage.displayObjects[i];
                var c = parseInt(Math.random() * 2   1);
                var d = parseInt(Math.random() * 2   1);
                if (c == 1) {
                    var a = Math.random()   4;
                } else {
                    var a = Math.random() - 4;
                }
                if (d = 1) {
                    var b = Math.random()   4;
                } else {
                    var b = Math.random() - 4;
                }

                image.x = (image.x   a < 1072 ? image.x   a : 0) % 1072;
                image.y = (image.y   b < 1053 ? image.y   b : 0) % 1053;
            }
            if (stage.displayObjects.length < 800) {
                var image = new newImage({
                    characterImg: "https://gimg2.百度.com/image_search/src=http://img.jj20.com/up/allimg/1114/0G020114924/200G0114924-15-1200.jpg&refer=http://img.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658993654&t=9dc8bb47a84d18856607af209b0c4133",
                    alarmStatus: 0,
                    x: 10   i,
                    y: 10   i,
                    gameId: "0000096",
                    isVip: false,
                    devId: '040FED',
                    mobile: '11011011095',
                    uid: '749015967',
                })
                stage.add(image)
            }
        }, 25)
    }

    init();
</script>

</html>

和其他的一样，它也是有停止api的，cancelAnimationFrame（）

//我们可以创建的时候就给一个ID
const animationID=window.requestAnimationFrame(loop);//loop就是我们的渲染循环，可以看上面的render那块的函数
//比如我想10秒之后停止动画
setTimeout(()=>{
    window.cancelAnimationFrame(animationID)
},10000)

这篇好文章是转载于：学新通技术网

湫requestAnimationFrame基本用法

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐