209 lines
5.8 KiB
Vue
209 lines
5.8 KiB
Vue
<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> |