t-animation

Animation 动画

组件介绍

t-animation 用于弥补 X 环境没有 uni.createAnimation 动画支持的问题，本组件支持 iOS、Android、小程序、Web、鸿蒙平台，使用简单。通过链式调用实现各种动画效果，包括旋转、缩放、平移、透明度、背景色、边距等。

平台兼容

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

基础用法

基础用法参考 demo/animationins/animationins.uvue，通过 ref 获取组件实例，调用 createAnimation 方法创建动画实例，然后链式调用动画方法，最后调用 exports 执行动画。

<template>
  <t-animation class="twh-200 bg-blue r-30" ref="animationRef" @transitionend="transitionend">
    <text>动画内容</text>
  </t-animation>
  
  <t-button @click="startAnimation">开始动画</t-button>
</template>

<script setup>
const animationRef = ref<ComponentPublicInstance | null>(null)

function startAnimation() {
  const ins = animationRef.value
  if (ins == null) return
  
  const ani = ins.$callMethod('createAnimation', {
    duration: 400,
    timingFunction: 'linear',
    delay: 0,
    transformOrigin: '50% 50% 0'
  })
  
  ani.scale(2, 2).rotate(45).step()
  ani.scale(1, 1).rotate(0).step()
  
  ins.$callMethod('exports')
}

function transitionend() {
  console.log('动画结束')
}
</script>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'

Events

事件名	说明	回调参数
click	点击时触发	UniPointerEvent
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	NodeInfo
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

Slots

插槽名	说明
default	动画内容区域，放置需要执行动画的元素

Methods

组件通过 defineExpose 暴露了以下实例方法：

方法名	说明	参数
createAnimation	创建动画实例	options: UTSJSONObject - 包含 duration、timingFunction、delay、transformOrigin
exports	执行动画，将动画应用到元素上	-
getInfo	获取组件节点信息	callback: (rect: NodeInfo) => void

动画方法

创建动画实例后，可以链式调用以下动画方法：

方法名	说明	参数
width	设置宽度	value: string
height	设置高度	value: string
margin	设置外边距	value: string
marginTop	设置上外边距	value: string
marginBottom	设置下外边距	value: string
marginLeft	设置左外边距	value: string
marginRight	设置右外边距	value: string
padding	设置内边距	value: string
right	设置右边距	value: string
left	设置左边距	value: string
top	设置上边距	value: string
bottom	设置下边距	value: string
opacity	设置透明度	value: number
backgroundColor	设置背景色	value: string
borderColor	设置边框颜色	value: string
rotate	旋转	angle: number
rotateX	X 轴旋转	angle: number
rotateY	Y 轴旋转	angle: number
rotateZ	Z 轴旋转	angle: number
scale	缩放	x: number, y?: number
scaleX	X 轴缩放	value: number
scaleY	Y 轴缩放	value: number
translate	平移	value: string
translateX	X 轴平移	value: string
translateY	Y 轴平移	value: string
step	结束一组动画，准备执行下一组动画	options?: UTSJSONObject