更新记录

1.0.0（2025-07-01） 下载此版本

1.0.0

(2025-07-01)- 初始版本

平台兼容性

uni-app x(4.05)

其他

y-sprite

参数介绍

src: {
    type: String,
    required: true,
    description: "图片地址 or 图片链接"
},
width: {
    type: Number,
    required: true,
    description: "一帧的宽度"
},
height: {
    type: Number,
    required: true,
    description: "一帧的高度"
},
totalFrames: {
    type: Number,
    required: true,
    description: "一共有多少帧",
},
speed: {
    type: Number,
    default: 100,
    description: "切换下一帧的速度，默认100"
},
startFrame: {
    type: Number,
    default: 0,
    description: "从第几帧开始 从0开始，0为第一帧"
},
unit: {
    type: String,
    default: 'rpx',
    description: "像素单位"
},
run: {
    type: Boolean,
    default: false,
    description: "是否开始跑帧"
},
swingBackAndForth: {
    type: Boolean,
    default: false,
    description: "是否来回切换帧"
}

基本使用

<template>
    <ySprite src="本地图片&图片链接" :width="44" :height="68" :totalFrames="160" :run="run">
    </ySprite>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import ySprite from '@/uni_modules/y-sprite/components/y-sprite/y-sprite.vue';
    const run = ref(true);
</script>

组件事件

<template>
    <ySprite src="本地图片&图片链接" :width="44" :height="68" :totalFrames="160" :run="true"
        @updateFrame="updateFrame" @load="load">
    </ySprite>
</template>

<script lang="ts" setup>
    import { ISpriteFrame, TLoadStatus } from '@/uni_modules/y-sprite/components/y-sprite/types';
    import ySprite from '@/uni_modules/y-sprite/components/y-sprite/y-sprite.vue';

    function load(state : TLoadStatus) {  // 加载状态
        console.log('load', state);
    }
    function updateFrame(params : ISpriteFrame) { // 每一帧的更新状态
        console.log(params);
    }
</script>