文本淡入淡出

组件介绍

gal-text-fade 组件实现了文本淡入淡出动画，并对文本进行了自动拆分，在淡入淡出同时对文件添加了增加及删除动画；

组件名称

gal-text-fade

兼容平台

H5	APP	小程序
✔	✔	✔

组件属性

属性名称	类型	默认值	作用
color	String	#232323	文本颜色
speed	Number	80	动画速度，单位毫秒
text	String	''	文本内容
styleSet	String	''	文本样式，如 : line-height:100rpx, font-size:50rpx; ...
direction	String	center	文本对齐方式，center 居中， flex-start 左侧 flex-end 右侧
autoPlay	Boolean	true	是否自动播放动画
timingFunc	String	ease-in	动画模式，取值参考 : https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp
type	String	in	动画类型，in 淡入， out 淡出

组件方法

01. play() : 开始动画；
02. loop(timer) : 循环执行动画，参数循环间隔时间，单位毫秒；
03. stop() : 停止循环动画；

演示代码

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

<template>
	<view class="gal-body">
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">文本淡入</text>
		</view>
		<view class="gal-margin-top">
			<gal-animate-bg>
				<view style="padding:80rpx 0;">
					<view>
						<gal-text-fade 
						ref="animationTextFadeIn" 
						text="GraceUI 动画库" 
						styleSet="font-size:50rpx; color:#FFFFFF;"></gal-text-fade>
					</view>
				</view>
			</gal-animate-bg>
		</view>
		<view 
		class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center gal-margin-top-large" 
		hover-class="gal-tap">
			<text class="gal-color-gray gal-text gal-icons" 
			@tap="play">点击这里重新播放动画</text>
		</view>
		
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">文本淡出</text>
		</view>
		<view class="gal-margin-top">
			<gal-animate-bg>
				<view style="padding:80rpx 0;">
					<view>
						<gal-text-fade 
						type="out" 
						ref="animationTextFadeOut" 
						:text="text2" 
						styleSet="font-size:50rpx; color:#FFFFFF;"></gal-text-fade>
					</view>
				</view>
			</gal-animate-bg>
		</view>
		<view 
		class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center gal-margin-top-large" 
		hover-class="gal-tap">
			<text class="gal-color-gray gal-text gal-icons" 
			@tap="play2">点击这里重新播放动画</text>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			text2 : 'GraceUI 动画库'
		}
	},
	methods: {
		play : function () {
			this.$refs.animationTextFadeIn.play();
		},
		play2 : function () {
			// 利用 text2 值变化激活组件 watch 事件，实现动画播放
			// 也可以使用 组件的 play 函数进行动画播放
			if(this.text2 == "GraceUI 动画库"){
				this.text2 = "GraceUI 动画库..."
			}else{
				this.text2 = "GraceUI 动画库"
			}
		}
	}
}
</script>
<style>

</style>