JS 引入序列帧动画 两种方法

JS 引入序列帧动画 两种方法

那 什么是序列帧呢？

序列帧是把某些类似或者是视频 用一帧一帧的图像文件来表示 并且循环展示 当然一般的序列帧都是首尾相连的那种 这样才能保证动画看起来相对流畅

1.使用requestAnimationFrame方法进行回调

<img src="" id="player">

img {
  width: 100px; // 必须设置定宽高
  height: 100px;
}

const imgArr = [];
let frameId = 0;
let index = 0

function changeImg() {
  document.getElementById('player').src = imgArr[index];
  index = (index + 1) % imgArr.length;
  frameId = requestAnimationFrame(changeImg)
}

// 在页面初始化时
frameId = requestAnimationFrame(changeImg)

当然 建议在离开页面后清楚frameId

2.使用settimeout

<img src="" id="player">

img {
  width: 100px; // 必须设置定宽高
  height: 100px;
}

const imgArr = [];
let frameId = 0;
let index = 0

function changeImg() {
  document.getElementById('player').src = imgArr[index];
  index = (index + 1) % imgArr.length;
  frameId = setTimeout(changeImg, 50);
}

// 在页面初始化时
frameId = setTimeout(changeImg, 50);

第二种方法的好处就是可以控制每一帧的时间 相对于第一张种方法来讲要好很多
当然 clearTimeout别忘了

最后 讲一下requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操作的一个api 它跟settimeout类似 主要的用途就是按帧对网页进行重绘 它的刷新频率只有60Hz-75Hz左右 requestAnimationFrame的基本思想就是与这个刷新频率保持同步 利用这个刷新频率进行页面重绘 它还有一个好处就是当你的页面不处于当前标签的话 它会自动停止刷新 节省你的cpu性能 它接收的是一个回调作为参数 在浏览器重绘前进行调用 最后 可以用cancelAnimationFrame(callback)对它进行取消重构