1
npm install animejs

在 main.js 中

1
2
3
4
5
// 引入animejs
import anime from "animejs";
//注册全局方法
const app = createApp(App);
app.config.globalProperties.$anime = anime;

vue 文件模板

1
2
3
4
5
6
7
8
9
<div class="wrapper" @mousemove="handlePause()" @mouseleave="handlePlay">
  <div class="boxes">
    <div
      class="box"
      v-for="(item,index) in overdueCompanyList"
      :key="item.id"
    ></div>
  </div>
</div>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 初始化走马灯
/*
*  overdueCompanyList 元素列表
*  40 元素高度
*  proxy vue实例 getCurrentInstance()
*/
initAnime: () => {
  // DATA.yTrans = [];
  proxy.$anime.set('.box', {
    translateY: function (el: any, i: number, l: any) {
    DATA.yTrans[i] = { y: i * 40 };
      return i * 40;
    },
  });
  DATA.animation = proxy.$anime({
    targets: DATA.yTrans,
    duration: ((DATA.overdueCompanyList.length * 40) / 20.8) * 1000, //走一周持续时间
    easing: 'linear',
    y: `-=${40 * DATA.overdueCompanyList.length}`,
    loop: true,
    update: function (anim: any) {
    proxy.$anime.set('.box', {
    translateY: function (el: any, i: number, l: any) {
      // 计算元素总高度与yTrans当前值取余 判断 >0? 从而计算 偏移距离
      return DATA.yTrans[i]?.y % (40 * DATA.overdueCompanyList.length) > 0
            ? DATA.yTrans[i]?.y % (40 * DATA.overdueCompanyList.length)
            : (DATA.yTrans[i]?.y % (40 * DATA.overdueCompanyList.length)) + 40 * DATA.overdueCompanyList.length;
          },
        });
      },
    });
  // animation.pause();
},
handlePlay: () => {
  // 鼠标移出 动画播放
  DATA.animation && DATA.animation.play();
},
handlePause: () => {
  // 鼠标移入 动画暂停
  DATA.animation && DATA.animation.pause();
}
  //移除动画
onUnmounted(() => {
  DATA.animation && DATA.animation.remove(DATA.yTrans);
});

style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 走马灯
.wrapper {
  width: 350px;
  height: 200px;
  position: absolute;
  // margin: 40px auto 0;
  background: #fff;
  overflow: hidden;
  // margin-bottom: 40px;
  right: 50px;
  bottom: 50px;
}
.box {
  width: 350px;
  height: 40px;
  position: absolute;
  cursor: pointer;
  background-color: #fff;
  font-size: 12px;
  color: #989898;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.boxes {
  // position: relative;
  top: -40px;
}