# Animation (动画组件)

弥补X环境没有uni.createAnimation动画支持，本组件，支持IOS，安卓 小程序 WEB 鸿蒙，使用简单

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例

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

	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>

事件

名称	返回参数	说明
click	(e : UniPointerEvent)	-
initFinished	NodeInfo	初始化完成事件 返回组件的节点信息
transitionend	-	动画结束事件

方法

名称	参数	返回值	说明
exports	-	-	执行动画队列
createAnimation	{<br>duration: e.getNumber('duration') ?? 400,<br>timingFunction: e.getString('timingFunction') ?? "linear",<br>delay: e.getNumber('delay') ?? 0,<br>transformOrigin: e.getString('transformOrigin') ?? "50% 50% 0"<br>}	TuiAnimation	创建动画对象
getInfo	-	NodeInfo	获取组件的节点位置信息
transitionend	-	-	动画结束事件

插槽

名称	返回值	说明
default	-