3种方式模拟百度的logo移动

水深无声 2022-05-30 09:37 207阅读 0赞

效果图：![这里写图片描述][70]  
原理很简单，就是背景移动。上代码之前先来点理论。

计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化  
　　大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms

而setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行  
　　requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果  
　　特点  
　　【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量

【3】requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

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

requestID = requestAnimationFrame(callback);

效果代码

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="jquery-2.1.4.js"></script>
        <style> .container { width: 270px; height: 129px; margin: 300px auto; background: url("desk.png") no-repeat; } </style>
    </head>
    <body>
        <div class="container"></div>
        <script> let pos = 0; let timer; let ftp = 20; //方式一:利用循环定时器 setInterval(function () { pos -= 270; $(".container").css("backgroundPosition",pos+"px"); if(pos ==-38880 ) { pos = 0; $(".container").css("backgroundPosition",pos+"px"); //这里需要手动设置container位置，否则每个轮回图片都会抖动一下，可以试一下。 } },50); //方式二：利用h5新的api timer = requestAnimationFrame(function move() { pos -= 270; $(".container").css("backgroundPosition",pos+"px"); if(pos == -38880){ pos = 0; $(".container").css("backgroundPosition",pos+"px"); } requestAnimationFrame(move) }) // 方式三:可控的requestAnimationFrame，利用ftp调节刷新频率 render(); function render() { window.setTimeout(function () { requestAnimationFrame(render); },1000/ftp); move(); } function move() { pos -= 270; $(".container").css("backgroundPosition",pos+"px"); if(pos == -38880){ pos = 0; $(".container").css("backgroundPosition",pos+"px"); } } </script>
    </body>
    </html>

[参考网站：https://www.cnblogs.com/xiaohuochai/p/5777186.html][https_www.cnblogs.com_xiaohuochai_p_5777186.html]

[70]: /images/20220530/6f8b74d8a576470e8591bc01e1b0297e.png
[https_www.cnblogs.com_xiaohuochai_p_5777186.html]: https://www.cnblogs.com/xiaohuochai/p/5777186.html