# t-sprite

Sprite 序列帧动画

t-sprite 组件介绍

t-sprite 是基于 Canvas 绘制的序列帧动画组件，支持播放、暂停、停止等控制功能，实现动画交互展示。

t-sprite 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-sprite 基础用法

基础用法参考 demo/animationins/animationins.uvue，通过 frames 属性传入序列帧图片数组。

<template>
  <t-sprite 
    ref="spriteRef"
    :frames="frameImages"
    :speed="20"
    :loop="true"
    :autoplay="true">
  </t-sprite>
</template>

<script setup>
const spriteRef = ref(null)

const frameImages = ref([
  '/static/frame1.png',
  '/static/frame2.png',
  '/static/frame3.png',
  '/static/frame4.png'
])

function play() {
  spriteRef.value?.play()
}

function pause() {
  spriteRef.value?.pause()
}

function stop() {
  spriteRef.value?.stop()
}
</script>

t-sprite Props

属性名	说明	类型	默认值
frames	序列帧图片数组	string[]	[]
interval	间隔时间（毫秒）	number	3000
speed	播放速度	number	20
loop	是否循环播放	boolean	false
autoplay	是否自动播放	boolean	false
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	''
size	组件尺寸	string	''

t-sprite Events

事件名	说明	回调参数
play	播放时触发	-
pause	暂停时触发	-
resume	继续播放时触发	-
stop	停止时触发	-

Methods

方法名	说明	参数
play	开始播放	-
pause	暂停播放	-
resume	继续播放	-
stop	停止播放	-