<template>
	<ciy-header ref="header" title="ciy-ani组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">动画包裹组件</view>
			<view class="content">
				<view class="tip">
					支持用简单字符串控制动画。<br />
					支持属性触发和方法触发动画。<br />
					支持完成后隐藏动画元素。<br />
					修复了已知动画兼容问题。<br />
				</view>

				<view class="txt-wb">原理</view>
				<view class="tip">
					仅封装createAnimation函数。<br />
					每个step独立执行。<br />
				</view>
			</view>
		</view>
		<ciy-ani ref="ani" :ani="anistr">
			<view class="anibox">
				动画组件
			</view>
		</ciy-ani>
		<button class="btn" @tap="ani(1)">缓入</button>
		<button class="btn" @tap="ani(2)">缓出</button>
		<button class="btn" @tap="ani(3)">动画</button>
		<br />
		<button class="btn" @tap="anistr='op0,sa0|op1,sa0.5,500|op0.5,sa1.5,500|op1,sa1,500'">属性控制动画1</button>
		<button class="btn" @tap="anistr='op1,sa1|op1,sa0.5,500|op0.5,sa1.5,500|op1,sa1,500'">属性控制动画2</button>
		<br />
		<button class="btn" @tap="ani(4)">复杂动画</button>
		<ciy-ani ref="anihei" :ani="anihei" ciystyle="background:var(--bg1);overflow:hidden;">
			<view v-for="index in Array(heis).keys()" :key="index">
				{{index}}
			</view>
		</ciy-ani>
		<button class="btn" @tap="anihei(1)">放出</button>
		<button class="btn" @tap="anihei(2)">收回</button>
		<button class="btn" @tap="heis=Math.floor(Math.random() * 7) + 3">随机{{heis}}</button> hh效果较差，移步ciy-aniheight
		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">ani</view>
				<view class="tip">动画字符串anis[String]。</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				<view class="fun">async Doani</view>
				<view class="tip">
					触发一次动画<br />
					传入字符串或{anis, init}<br />
					anis: 支持字符串或Array，定义动画。<br />
					init: createAnimation函数初始化的传参。<br />
					　　默认{timingFunction: 'ease'}
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">anis[String]</view>
			<view class="content">
				例: sa0|sa1.1,100|sx1,op0,ty5em,500|hide<br />
				　　初始缩小到0<br />
				　　0.1s放大到1.1<br />
				　　0.5s缩小到1、全透明、向下5em<br />
				　　隐藏元素<br />
				多个step用竖线分隔。<br />
				特殊的step:　hide，为隐藏动画元素<br />
				同一个step内用逗号分隔<br />
				　　纯数字为step执行ms时间。<br />
				　　格式为xx??<br />
				　　　　??为具体数值<br />
				　　　　xx两个字母，为Animation函数简写。<br />
				　　　　两个字母对照关系如下:<br />
				　　　　　　op opacity<br />
				　　　　　　bc backgroundColor<br />
				　　　　　　ww width<br />
				　　　　　　hh height<br />
				　　　　　　tt top<br />
				　　　　　　ll left<br />
				　　　　　　rr right<br />
				　　　　　　bb bottom<br />
				　　　　　　ra rotate<br />
				　　　　　　rx rotateX<br />
				　　　　　　ry rotateY<br />
				　　　　　　rz rotateZ<br />
				　　　　　　sa scale<br />
				　　　　　　sx scaleX<br />
				　　　　　　sy scaleY<br />
				　　　　　　sz scaleZ<br />
				　　　　　　ta translate<br />
				　　　　　　tx translateX<br />
				　　　　　　ty translateY<br />
				　　　　　　tz translateZ<br />
				　　　　　　wa skew<br />
				　　　　　　wx skewX<br />
				　　　　　　wy skewY<br />
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">anis[Array]</view>
			<view class="content">
				包含多个{key:val}<br />
				key是Animation函数名<br />
				val是传参，多个值用[]展开。<br />
				key=step，传参用{duration:n, ...}。<br />
				key=hide，为隐藏动画元素。<br />
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				无
				<!-- <view class="evt">@change</view> -->
				<view class="log" v-for="(item, index) in eventlog" :key="index">
					<text class="code">{{eventlog.length - index}}</text>
					{{item}}
				</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<style>
	@import '@/pages/demo/zdemo.css';
	.anibox {
		width: 10em;
		height: 5em;
		background: #42ab00;
		border-radius: 0.5em;
		text-align: center;
		line-height: 5em;
		color: #ffffff;
		margin: 2em auto;
	}
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				heis:5,
				anistr: ''
			}
		},
		onLoad() {
		},
		methods: {
			async anihei(type) {
				if (type == 1) {
					this.$refs.anihei.Doani('hh0,0|hhauto,2500');
				}
				if (type == 2) {
					this.$refs.anihei.Doani('hhauto,0|hh0,2500');
				}
			},
			async ani(type) {
				if (type == 1) {
					this.$refs.ani.Doani('op0,sa0|op1,sa0.5,ty-1em,2500|sa1,op1,ty2em,1500');
				}
				if (type == 2) {
					this.$refs.ani.Doani('op1|op1,sa1.5,1000|op0,tx5em,500|hide');
				}
				if (type == 3) {
					this.$refs.ani.Doani('op0,sa0|op0.3,sa0.5,2500|sa1,op1,1500');
				}
				if (type == 4) {
					var anis = [{
						opacity: 1
					}, {
						step: {
							duration: 0
						}
					}, {
						scale: [0.4, 1.8]
					}, {
						step: {
							duration: 500
						}
					}, {
						scale: 1
					}, {
						opacity: 0
					}, {
						translateY: '5em'
					}, {
						step: {
							duration: 1000
						}
					}];
					var init = {
						timingFunction: 'linear',
						transformOrigin: '0 0 0'
					};
					this.getrefs('ani').then(ref => ref.Doani({
						anis,
						init
					}));
				}
			}
		}
	}
</script>