阿里云动图icon vue组件封装（juery）

类似这么一张长图，让设计做运动轨迹图，鼠标经过、离开背景图片移动位置，进行运动。

工作中使用vue 需要传入参数，可以自行传入大小，但是需要计算比例值：

子组件：（需要的可以直接复制）

<template>
  <div class="cd4 img" :data-max="max" :style="style"></div>
</template>
<script>
export default {
  data() {
    return {
      interval: null,
    };
  },
  props: {
    // 图片地址
    imgUrl: {
      type: String,
      default: "",
    },
    // 图片的个数
    max: {
      type: Number,
      default: 17,
    },
    // 图片的宽度
    width: {
      type: String,
      default: "140px",
    },
    // 单个图片的宽度
    height: {
      type: String,
      default: "140px",
    },
  },
  computed: {
    style() {
      return {
        backgroundImage: "url(" + this.imgUrl + ")",
        backgroundSize: "" + this.width + this.height * this.max + "",
        width: this.width,
        height: this.height,
      };
    },
  },
  created() {},
  mounted() {
    $(".img").each(function () {
      var $me = $(this);
      $me.data({
        nowStep: 0, //当前第几张图
        maxStep: $me.attr("data-max"), //图片的高度
        height: $me.height(), //图片的高度
        isOver: true, //鼠标是否移到上面
        active: false, //是否需要动起来
      });
    });
    $(".img")
      .on("mouseover", function () {
        window.clearInterval(this.interval);
        this.interval = setInterval(bgMove, 30);
        $(this).data("isOver", true);
        $(this).data("active", true);
      })
      .on("mouseout", function () {
        window.clearInterval(this.interval);
        this.interval = setInterval(bgMove, 30);
        $(this).data("isOver", false);
        $(this).data("active", true);
      });
    function bgMove() {
      let flag = true;
      $(".img").each(function () {
        let $me = $(this);
        let nowStep = $me.data("nowStep");
        let maxStep = $me.data("maxStep");
        let height = $me.data("height");
        let isOver = $me.data("isOver");
        let active = $me.data("active");
        // 有鼠标操作
        if (active) {
          flag = false;
          // 移入
          if (isOver) {
            if (nowStep < maxStep - 1) {
              nowStep++;
              $me.data("nowStep", nowStep);
              $me.css({ "background-position-y": nowStep * -height });
              // 最后一帧 动画要停住
            } else {
              $me.data("active", false);
            }
            // 移出
          } else {
            if (nowStep > 0) {
              nowStep--;
              $me.data("nowStep", nowStep);
              $me.css({ "background-position-y": nowStep * -height });
            } else {
              $me.data("active", false);
              window.clearInterval(this.interval);
            }
          }
        }
      });
      // 没有在动的 就清除掉定时器
      if (flag) {
        window.clearInterval(this.interval);
      }
    }
  },
  methods: {},
};
</script>

<style scoped>
.cd4 {
  cursor: pointer;
  background-size: 100%;
}
</style>

引用方式：

<template>
  <div>
    <url
      :imgUrl="apngData.imgUrl"
      :max="apngData.max"
      :width="apngData.width"
      :height="apngData.height"
    ></url>
    <url
      :imgUrl="apngData1.imgUrl"
      :width="apngData1.width"
      :height="apngData1.height"
      :max="apngData1.max"
    ></url>
    <url
      :imgUrl="apngData2.imgUrl"
      :width="apngData2.width"
      :height="apngData2.height"
      :max="apngData2.max"
    ></url>
  </div>
</template>
<script>
import url from "../../components/gif/index.vue";
export default {
  components: { url },
  data() {
    return {
      apngData: {
        imgUrl: require("../../assets/images/robit.png"),
        width: "80px",
        height: "80px",
        max: 29,
      },
      apngData1: {
        imgUrl: require("../../assets/images/222.png"),
        width: "200px",
        height: "200px",
        max: 21,
      },
      apngData2: {
        imgUrl: require("../../assets/images/111.png"),
        width: "30px",
        height: "30px",
        max: 21,
      },
    };
  },

  mounted() {},
  methods: {},
};
</script>

max：长图一共有多少个小图拼接而成；

width/height：图片宽高；

imgUrl：图片地址；

但是这个方法做出来的图，是行内样式，不适配，跟随屏幕大小改变而改变。