在数据大屏开发中，会需要动画点缀，今天实现的动画效果，环绕运动，gsap补间动画插件参数有很多，今天使用gsap的帧动画keyframes来实现一个环绕运行的效果。

沿着div盒子的四个边上一直运动，形成一个环绕动画的效果。

效果演示

效果代码

<template>
  <div class="cardBody" ref="body">
    <div class="info" ref="info">
    </div>
  </div>
</template>

<script>
import gsap from 'gsap'

export default {
  name: "title",
  data() {
    return {}
  },
  components: {},
  watch: {},
  mounted() {
    var that = this;
    var base = 150
    var durationWidth = (this.$refs.body.offsetWidth / base)
    var durationHeight = (this.$refs.body.offsetHeight / (base / 2))
    var bodyWidth = this.$refs.body.offsetWidth
    var bodyHeight = this.$refs.body.offsetHeight
    var innerWidth = this.$refs.info.offsetWidth
    var innerHeight = this.$refs.info.offsetHeight
    gsap.to(this.$refs.info, {
      keyframes: [

        // 转换方向
        {
          left: -innerWidth / 2,
          duration: 0.01,
          top: 0
        },
        // 上部分向右动画

        {
          left: '100%',
          duration: durationWidth,
        },
        // 转换方向
        {
          left: bodyWidth - innerWidth / 2,
          duration: 0.01,
          transform: 'rotate(90deg)',
          top: -innerWidth / 2
        },
// 向下移动
        {
          delay: 0,
          left: bodyWidth - innerWidth / 2,
          duration: durationHeight,
          top: (bodyHeight + innerWidth / 2)
        },
        // 向左转换方向
        {
          left: bodyWidth - innerWidth / 2,
          top: (bodyHeight - innerHeight),
          duration: 0.01,
          transform: 'rotate(180deg)'
        },
        {
          // 向左移动
          delay: 0,
          left: -innerWidth,
          duration: durationWidth,
          top: (bodyHeight - innerHeight / 2),
        },
        {
          // 向上转换方向
          left: -innerWidth / 2 + 1,
          duration: 0.01,
          top: (bodyHeight + innerWidth / 2),
          transform: 'rotate(90deg)'
        },
        {
          // 向上移动
          delay: 0,
          left: -innerWidth / 2 + 1,
          duration: durationHeight,
          top: 0
        }
      ],
      repeat: -1,
    });
  },
}
</script>

<style lang="scss" scoped>
.cardBody {
  position: relative;
  width: 300px;
  overflow: hidden;
  margin: 0 auto;
  height: calc(100% - 10px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  background: black;

  .info {
    width: 94px;
    height: 2px;
    position: absolute;
    top: 0;
    background: url("./assets/xian.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>