t-sprite

Sprite 序列帧动画

组件介绍

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

平台兼容

Harmony	H5	Android	iOS	小程�?	UTS
�?	�?	�?	�?	�?	�?

基础用法

基础用法参�?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>

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	''

Events

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

Methods

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