前端通过序列帧实现动画

最新推荐文章于 2024-04-12 17:09:49 发布

火星叁号

最新推荐文章于 2024-04-12 17:09:49 发布

阅读量1.5k

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_43969585/article/details/127320317

版权

实现思路

将多张图片并排放到一个盒子（上图红色区域），黑色区域为红色区域的父盒子(可视区域),黑色盒子超出部分隐藏，通过定时器，定时调整红色区域的top属性移动红色区域

具体代码（vue）

1. data()中定义全局变量存放图片地址

aniImgs: []

2.将所有帧动画图片添加到定义好的数组里面

    for (let i = 0; i < 151; i++) {
      this.aniImgs.push(`animalImgs/文字_00${119 + i}.png`);
    }

3.定义dom标签

通过遍历img标签直接在src中写相对路径可能图片显示不出来

 <div class="ani-box-par">
        <div class="ani-box">
          <img
            v-for="(item, inx) in aniImgs"
            :key="inx"
            :src="require('../../assets/' + item)"
            alt=""
          >
        </div>
      </div>

4. css样式

.ani-box-par {
  position: fixed;
  top: 45%;
  right: .8333rem;
  transform: translateY(-50%);
  width: 3.6458rem;
  height: 3.6458rem;
  overflow: hidden;
  .ani-box {
    position: absolute;
    top: 0px;
    right: 0;
    width: 3.6458rem;
    img {
      display:block;
      width: 100%;
    }
  }
}

5. js代码控制（定时器的触发次数是图片的个数）

const im = document.querySelector(".ani-box");
for (let i = 0; i < 151; i++) {
    setTimeout(() => {
        im.style.top = `-${i * 3.6458}rem`;
    }, (1000 * i) / 30);
}