Tui Plus Vapor

Appearance

# t-animation

Animation 动画

t-animation 组件介绍 ​

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

t-animation 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-animation 基础用法 ​

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

vue
<template>
	<view class="p-15 ov">
		<t-card title="Animation" sub-title="弥补X环境没有uni.createAnimation动画支持，本组件，支持IOS，安卓 小程序 WEB 鸿蒙，使用简单"
			class="mb-15"></t-card>

		<view class="fc ptb-25 ov z-2">
			<t-animation class="twhr-100 bg-red b-10,s,red fc" ref="animationins1" @transitionend="transitionend1">
				<text class="c-#fff">循环示例</text>
			</t-animation>
		</view>

		<view class="fc ptb-25 ov">
			<t-animation class="twh-100 bg-blue r-15 b-10,s,#2979ff ov" ref="animationins"
				@transitionend="transitionend">
			</t-animation>
		</view>
		<button type="p" class="mt-15" @click="whAni1">宽高</button>
		<!-- #ifndef MP-WEIXIN -->
		<button type="primary" class="mt-15" @click="whAni2">margin</button>
		<button type="primary" class="mt-15" @click="whAni4">padding</button>
		<button type="primary" class="mt-15" @click="whAni7">border-color</button>
		<!-- #endif -->
		<button type="primary" class="mt-15" @click="whAni3">left,top,bottom,right</button>
		<button type="primary" class="mt-15" @click="whAni5">opacity</button>
		<button type="primary" class="mt-15" @click="whAni6">background-color</button>
		<button type="primary" class="mt-15" @click="whAni8">rotate</button>
		<button type="primary" class="mt-15" @click="whAni9">scale</button>
		<button type="primary" class="mt-15" @click="whAni10">translate</button>
	</view>

</template>

<script setup lang="ts">
	import { ref, shallowRef, onMounted, nextTick } from 'vue';
	import { getRandomInt } from '@/uni_modules/tui-common'

	// 使用 shallowRef 来引用组件实例，避免深层响应式
	const animationins1 = shallowRef<TAnimationComponentPublicInstance | null>(null)
	const animationins = shallowRef<TAnimationComponentPublicInstance | null>(null)
	// 获取动画实例的辅助函数
	function getRandRpx() : string {
		return `${getRandomInt(100, 200)}`
	}
	function whAni() {
		const ins = animationins1.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.translateY('25px').step()
		ani.translateY('0rpx').step()
		ani.rotateX(360).translateY('75px').step()
		ani.rotateX(0).step()
		ani.rotateY(360).step()
		ani.rotateY(0).step()
		ani.rotateZ(360).step()
		ani.rotateZ(0).step()
		ani.scale(1).translate('-75px').step()
		ani.scale(0.5).translate('0px').step()
		ani.scale(0.8).translateY('-75px').step()
		ani.scale(1).translateY('0px').step()
		ins.exports()
	}

	function whAni1() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.width(getRandRpx() + 'px').height(getRandRpx() + 'px').step()
		ani.width(100 + 'px').height(100 + 'px').step()
		ani.width(getRandRpx() + 'px').height(getRandRpx() + 'px').step()
		ani.width(100 + 'px').height(100 + 'px').step()
		ins.exports()
	}

	function whAni2() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.margin(getRandRpx() + 'px').step()
		ani.margin('0').step()
		ani.marginTop(getRandRpx() + 'px').step()
		ani.marginTop('0').step()
		ani.marginBottom(getRandRpx() + 'px').step()
		ani.marginBottom('0').step()
		ani.marginLeft(getRandRpx() + 'px').step()
		ani.marginLeft('0').step()
		ani.marginRight(getRandRpx() + 'px').step()
		ani.marginRight('0').step()
		ins.exports()
	}

	function whAni3() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.right(getRandRpx() + 'px').step()
		ani.right('0').step()
		ins.exports()
	}

	function whAni4() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.padding(getRandRpx() + 'px').step()
		ani.padding('0').step()
		ins.exports()
	}

	function whAni5() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.opacity(0.1).step()
		ani.opacity(1).step()
		ins.exports()
	}

	function whAni6() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.backgroundColor('#000').step()
		ani.backgroundColor('#f56c6c').step()
		ins.exports()
	}

	function whAni7() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.borderColor('#0055ff').step()
		ani.borderColor('#ff007f').step()
		ins.exports()
	}

	function whAni8() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.rotate(360).step()
		ani.rotate(0).step()
		ani.rotateX(360).step()
		ani.rotateX(0).step()
		ani.rotateY(360).step()
		ani.rotateY(0).step()
		ani.rotateZ(360).step()
		ani.rotateZ(0).step()
		ins.exports()
	}

	function whAni9() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.scale(1.5).step()
		ani.scale(0.5).step()
		ani.scale(1).step()
		ani.scaleX(1.5).step()
		ani.scaleX(0.5).step()
		ani.scaleX(1).step()
		ani.scaleY(1.5).step()
		ani.scaleY(0.5).step()
		ani.scaleY(1).step()
		ins.exports()
	}

	function whAni10() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.translate('75px').step()
		ani.translate('0').step()
		ani.translateX('75px').step()
		ani.translateX('0').step()
		ani.translateY('75px').step()
		ani.translateY('0px').step()
		ins.exports()
	}

	function transitionend1() {
		whAni()
	}

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

	//其它用法参考
	function ani1() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.scale(2, 2).rotate(45).step()
		ins.exports()
	}

	function ani2() {
		const ins = animationins.value
		if (ins == null) return
		const ani = ins.createAnimation({})
		ani.scale(1, 1).rotate(0).step()
		ins.exports()
	}
	onMounted(() => {
		nextTick(() => {
			whAni()
		})
	})
</script>

t-animation Props ​

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

t-animation Events ​

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

t-animation 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
rotateXX 轴旋转angle: number
rotateYY 轴旋转angle: number
rotateZZ 轴旋转angle: number
scale缩放x: number, y?: number
scaleXX 轴缩放value: number
scaleYY 轴缩放value: number
translate平移value: string
translateXX 轴平移value: string
translateYY 轴平移value: string
step结束一组动画，准备执行下一组动画options?: UTSJSONObject