TianHeJianKang/uni_modules/lime-animateIt/components/lime-animate-it/lime-animate-it.uvue

<template>
	<view style="height: 500px;">
		<view ref="viewRef" :animation="animationData" class="test"></view>
		<view ref="viewRef2" class="test"></view>
		<!-- <view :style="style" class="test"></view> -->
	</view>
	<button @click="onClick">播放</button>
	<button @click="onStop">停止</button>
</template>

<script setup>
	import {createAnimation, CreateAnimationOptions} from '@/uni_modules/lime-animateIt'
	const viewRef = ref<UniElement|null>(null)
	const viewRef2 = ref<UniElement|null>(null)
	// 没有作用，只是为了跟小程序兼容
	const animationData = ref({})
	
	const animation = createAnimation({
		duration: 1000,
	    transformOrigin: '50% 50%',
	    timingFunction: 'ease',
	} as CreateAnimationOptions)
	
	animation.scaleX(0.5).translateX(200).step()
	animation.top(200).scaleX(1.8).step({duration: 600})
	animation.top(100).left(-200).step({duration: 2000})
	// 非小程序export不导致出任何内容。
	animationData.value = animation.export(viewRef,2)
	
	animation.onFinish = ()=>{
		console.log('onFinish')
	}
	
	const onClick = ()=>{
		console.log('点击')
		animation.play()
	}
	const onStop = ()=>{
		animation.stop()
	}
	

	const style = ref('')
	setTimeout(()=>{
		viewRef2.value!.style.setProperty('background-color', '#FF0000')
		style.value = 'transform: scaleX(0.5) translateX(100px)';
		// style.value = 'transform: rotate(45deg)'
		setTimeout(()=>{
			style.value = 'transform: scaleX(1.8) translateX(100px) translateY(100px)';
		},1000)
	},1000)
</script>

<style lang="scss">
	.test {
		position: absolute;
		background: red;
		height: 100rpx;
		width: 100rpx;
		// transition-duration: 300ms;
		// transition-timing-function: ease;
		// transition-property: transform;
		
		// transform: rotate(45deg);
	}
</style>