Vue3 实现图片的帧动画方案分享

一、纯 JS (有性能问题会卡顿)

html 复制代码
      <div class="robot-box">
        <img ref="robotImgRef" src="/Greet/Greet_00000.png" alt="" />
      </div>
ts 复制代码
const delay = 30;
const imgCount = 109;
let i = 0;
const robotImgRef = ref<HTMLImageElement | null>(null);
const animation = (i) => {
  if (i === imgCount) {
    i = 0;
    animation(i);
    return;
  }

  let path;
  if (Number(i) < 10) {
    path = '0000' + i;
  } else if (Number(i) < 100) {
    path = '000' + i;
  } else if (Number(i) < 1000) {
    path = '00' + i;
  }

  robotImgRef.value.src = `/Greet/Greet_${path}.png`;

  robotImgRef.value.onload = () => {
    setTimeout(() => {
      animation(i + 1);
    }, delay);
  };
};

onMounted(() => {
  nextTick(() => {
    animation(0);
  });
});

二、window.requestAnimationFrame()

window.requestAnimationFrame------MDN

window.requestAnimationFrame() 告诉浏览器------你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。

ts 复制代码
onMounted(() => {
  nextTick(() => {
    rAF(animation, 60);
  });
});
ts 复制代码
const imgCount = 109;
let i = 0;
const robotImgRef = ref<HTMLImageElement | null>(null);
const animation = () => {
  if (i === imgCount) {
    // 重新开始
    i = 0;
    return;
  }
  let path;
  if (Number(i) < 10) {
    path = '0000' + i;
  } else if (Number(i) < 100) {
    path = '000' + i;
  } else if (Number(i) < 1000) {
    path = '00' + i;
  }
  if (robotImgRef.value) {
    robotImgRef.value.src = `/Greet/Greet_${path}.png`;
  }
  i++;
};
/**
 * @param {number} [fps] - 帧率
 * @param {function} callback - 动画逻辑
 * @return {function} cancelRFA  - 取消播放
 */

function rAF(callback, fps = 24) {
  let last = Date.now();
  let delta = last;
  const interval = 1000 / fps;
  let cancel = false;
  function draw() {
    if (cancel) return;
    requestAnimationFrame(draw);
    let now = Date.now();
    delta = now - last;
    if (delta > interval) {
      /* 这里不能简单last = now,否则出现细微时间差问题。例如fps= 10,每帧100ms,
        而现在每16ms(60fps)执行一次draw。16*7=112>100,需要7次才实际绘制一帧。这个情况下,
        实际10帧需要 112*10=1120ms>1000ms 才绘制完成。
        当 now - (delta % interval) 时,会将时间修正 delta % interval = 12ms,
        实际10帧需要 112+(112-12)*9=1012ms 绘制完成。
     */
      last = now - (delta % interval);
      callback();
    }
  }
  draw();

  return function cancelRAF() {
    cancel = true;
  };
}

三、CSS 实现

请看这篇博客:实现序列帧图片动画的3种方式

四、叫 UI 换 GIF 图片

我最后采用的是叫 UI 换 GIF 了😁

只有麻烦下 UI 了哈哈哈哈

感谢

实现序列帧图片动画的3种方式
利用 requestAnimationFrame API 流畅播放序列帧动画并控制帧率FPS

相关推荐
supermapsupport2 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
m0_748254882 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
苹果醋33 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计
关你西红柿子4 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根4 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
m0_748256565 小时前
Vue - axios的使用
前端·javascript·vue.js
慢知行5 小时前
Vite 构建 Vue3 组件库之路:工程基础搭建与目录结构优化
前端·vue.js
阿克苏的滚滚馕6 小时前
alioss 批量断点续传 开箱即用
javascript·vue.js
Simaoya6 小时前
【vue】圆环呼吸灯闪烁效果(模拟扭蛋机出口处灯光)
javascript·css·vue.js
m0_748244967 小时前
VUE前端实现天爱滑块验证码--详细教程
前端·javascript·vue.js