使用序列帧实现动画

序列帧图片：https://lk-webfont.oss-cn-beijing.aliyuncs.com/web/play-qx/LKW/识别动效61张600\*600.png

这个链接有元素的宽高+张数

vue项目

动画组件 test.vue

复制代码

<template>
    <div class="frame_wrap" :style="{'--width': width+'px','--height': height+'px','--count': count, '--duration': duration+'s', '--bgSize': bgSize+'px', '--bgSize1': -bgSize+'px' }"> </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
const props:any = defineProps({
    count: {
        type: Number,
        vlaue: 0
    },
    width: {
        type: Number,
        value: 0
    },
    height: {
        type: Number,
        value: 0
    },
    duration: {
        type: Number,
        value: 0
    }
})
const bgSize = computed(() => props.width * props.count)
</script>
<style lang="scss">
.frame_wrap {
    width: var(--width);
    height: var(--height);
    position: absolute;
    background: pink;
    -webkit-animation: frames var(--duration) steps(var(--count)) infinite;
    animation: frames var(--duration) steps(var(--count)) infinite;
    background-position: 0 0;
    background-size:  var(--bgSize) var(--height);
    background-repeat: no-repeat;
    background-image: url(https://lk-webfont.oss-cn-beijing.aliyuncs.com/web/play-qx/LKW/%E8%AF%86%E5%88%AB%E5%8A%A8%E6%95%8861%E5%BC%A0600*600.png);
}

@keyframes frames {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: var(--bgSize1);
    }
}

@-webkit-keyframes frames {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: var(--bgSize1);
    }
}
</style>

父组件调用：

微信小程序开发

子组件：

复制代码

子组件：
wxml:
<view class="frame_wrap" style="background-image: url({{url}});--width:{{width}}rpx;--height:{{height}}rpx;--count:{{count}};--duration:{{duration}};"></view>

js:
Component({
  properties: {
    url: {
      type: String,
      value: ""
    },
    count: {
      type: String,
      value: 3
    },
    width:{
      type:String,
      value:360
    },
    height:{
      type:String,
      value:300
    },
    duration:{
      type: String,
      value: 0.3
    },
  },
  data: {

  },
  methods: {

  }
})
wxss:
.frame_wrap {
    width: var(--width);
    height: var(--height);
    animation: frames calc(var(--duration) * 1s) steps(var(--count)) infinite;
    background-position: 0 0;
    background-size: calc(var(--width) * var(--count)) var(--height);
  }
  
  @keyframes frames {
    from {
      background-position-x: 0;
    }
  
    to {
      background-position-x: calc(var(--width) *-1 *var(--count));
    }
  }

父组件调用:

复制代码

<css-animation wx:if="{{hasUnreadMsg == false}}" class="animation-qi" width="300" height="300" count="61" duration="6"
      url="https://lk-webfont.oss-cn-beijing.aliyuncs.com/web/play-qx/LKW/%E8%AF%86%E5%88%AB%E5%8A%A8%E6%95%8861%E5%BC%A0600*600.png"></css-animation>