动画包裹组件
支持用简单字符串控制动画。
支持属性触发和方法触发动画。
支持完成后隐藏动画元素。
修复了已知动画兼容问题。
原理
仅封装createAnimation函数。
每个step独立执行。
动画组件
{{index}}
hh效果较差,移步ciy-aniheight
属性
ani
动画字符串anis[String]。
方法
async Doani
触发一次动画
传入字符串或{anis, init}
anis: 支持字符串或Array,定义动画。
init: createAnimation函数初始化的传参。
默认{timingFunction: 'ease'}
anis[String]
例: sa0|sa1.1,100|sx1,op0,ty5em,500|hide
初始缩小到0
0.1s放大到1.1
0.5s缩小到1、全透明、向下5em
隐藏元素
多个step用竖线分隔。
特殊的step: hide,为隐藏动画元素
同一个step内用逗号分隔
纯数字为step执行ms时间。
格式为xx??
??为具体数值
xx两个字母,为Animation函数简写。
两个字母对照关系如下:
op opacity
bc backgroundColor
ww width
hh height
tt top
ll left
rr right
bb bottom
ra rotate
rx rotateX
ry rotateY
rz rotateZ
sa scale
sx scaleX
sy scaleY
sz scaleZ
ta translate
tx translateX
ty translateY
tz translateZ
wa skew
wx skewX
wy skewY
anis[Array]
包含多个{key:val}
key是Animation函数名
val是传参,多个值用[]展开。
key=step,传参用{duration:n, ...}。
key=hide,为隐藏动画元素。
事件
无
{{eventlog.length - index}}
{{item}}