组件介绍

gal-api-animate 组件以 uni-app 官方动画 api 为基础进行封装，可以方便灵活地实现元素动画。
动画效果相关介绍请查看 uni-app 官方手册 : https://uniapp.dcloud.io/api/ui/animation?id=animation

组件名称

gal-api-animate

兼容平台

组件事件

onMounted : 组件挂在完毕后触发的事件。

组件方法

01. setData(data) : 设置动画数据函数，
参数请参考 : https://uniapp.dcloud.io/api/ui/animation?id=animation uni.createAnimation(OBJECT) OBJECT 属性；
02. play() : 设置好动画数据及动画效果后执行动画方法；

组件用法

01. 在需要使用动画的元素外层包裹 gal-api-animate 组件即可（需要实现动画的组件是 gal-api-animate 组件的插槽）；
02. 通过 组件.setData() 函数设置动画数据；
03. 通过 组件.play() 函数执行动画；

演示代码

<template>
	<view>
		<gal-animate-bg>
			<view class="banner-title-main">
				<view style="padding:150rpx 0;">
					<gal-api-animate 
					@onMounted="onMounted" 
					ref="apiAnimateDemo">
						<text class="gal-h5 gal-block-text gal-text-center gal-color-white">www.GraceUI.com </text>
					</gal-api-animate>
				</view>
			</view>
		</gal-animate-bg>
		
		<view class="gal-body gal-margin-top">
			<view style="height:50rpx;"></view>
			<view 
			class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center" 
			hover-class="gal-tap">
				<gal-api-animate
				@onMounted="onMounted2" 
				ref="buttonRef">
					<text class="gal-color-gray gal-text gal-icons" 
					@tap="playMore">点击这里播放动画序列</text>
				</gal-api-animate>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			interValId : null
		}
	},
	methods: {
		onMounted : function () {
			console.log('动画组件已经准备好...');
			this.$refs.apiAnimateDemo.setData({duration:1000, timingFunction: 'ease'});
			this.$refs.apiAnimateDemo.animation.scale(1.5,1.5).step();
			this.$refs.apiAnimateDemo.play();
		},
		playMore : function () {
			// 01. 旋转 180
			this.$refs.apiAnimateDemo.animation.rotate(180).step();
			this.$refs.apiAnimateDemo.play();
			setTimeout(()=>{
				// 02. 再旋转 180
				this.$refs.apiAnimateDemo.animation.rotate(360).step();
				this.$refs.apiAnimateDemo.play();
			}, 600);
			
			// 透明度变化
			setTimeout(()=>{
				// 03. 透明度 0
				this.$refs.apiAnimateDemo.animation.opacity(0).step();
				this.$refs.apiAnimateDemo.play();
			}, 1200);
			
			setTimeout(()=>{
				// 03. 透明度 0
				this.$refs.apiAnimateDemo.animation.opacity(1).step();
				this.$refs.apiAnimateDemo.play();
			}, 1800);
		},
		
		onMounted2 : function(){
			// 循环执行按钮闪烁动画
			this.interValId = setInterval(()=>{
				this.$refs.buttonRef.setData({duration:300, timingFunction: 'ease'});
				this.$refs.buttonRef.animation.opacity(0).scale(0.8, 0.8).step();
				this.$refs.buttonRef.play();
				setTimeout(()=>{
					this.$refs.buttonRef.animation.opacity(1).scale(1, 1).step();
					this.$refs.buttonRef.play();
				},300);
			},2000);
		}
	},
	// 页面卸载时注销循环动画
	onUnload:function(){
		console.log('onUnload');
		clearInterval(this.interValId);
	}
}
</script>
<style>
	
</style>

注意 : 演示代码利用 js 实现了循环动画，页面卸载时我们需要停止循环（避免循环函数造成应用卡顿）。

gitee 仓库地址 : https://gitee.com/hcoder2016/grace-animation-library/blob/master/pages/demo/api-animate.vue