账户中心 退出系统
5.0 版本 3.0 版本
使用手册 模板中心 账户中心 合作 · 服务
快速开始
动画库介绍
下载及部署
基础组件
animate.css 动画组件
animate.css 连贯动画
gal-api-animate 组件
文本动画
文本淡入淡出
文本背景动画
数值展示动画
按钮动画
提交按钮动画
边框动画按钮
点赞按钮动画
常用动画
全屏加载动画
渐变背景动画
时钟动画
红包雨动画
gal-api-animate 组件

组件介绍

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

组件名称

gal-api-animate

兼容平台

H5APP小程序NVUE
不支持

组件事件

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