zoukankan      html  css  js  c++  java
  • 利用window.requestAnimationFrame实现一组静态图转换gif动图

      我们平时实现js动画效果时离不开setInterval或者setTimeout函数,可是没有办法保证显示频率刷新的时候setInterval的操作正好被执行,制作动画的时候会出现丢帧和动画效果生硬不连贯等情况。

      经过一番研究发现requestAnimationFrame可以实现动画效果,改方法执行次数通常是每秒60次,但在大多数遵循W3C建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。具体可以查看api介绍!

    let count = 1, app = document.getElementById('app');        
    
     function render() {
       if (count > 20) { // 20张静态图片
          count = 1; //修改图像的值
        }
        app.style.backgroundImage = `url('./gif_bg/img(${count}).png')`;
        count ++;
        window.requestAnimationFrame(render);
     }
     //第一帧渲染
     window.requestAnimationFrame(render);
    

      

  • 相关阅读:
    匹配@之前面的部分
    把一个数字的字符串转换为千分符的标识方式?
    下标重置
    linux的time命令

    常用正则
    正则
    PHP 菠菜木马代码
    PHP 木马代码,
    一句话的木马
  • 原文地址:https://www.cnblogs.com/harlem/p/12153192.html
Copyright © 2011-2022 走看看