animation-steps
v1.0.1
Published
a less function for steps animation
Downloads
2
Readme
通过引用内置的帧动画函数实现帧动画效果
- 诸如指定图片序列顺序播放实现类似
GIF动画效果
- 任意指定图片组合实现诸如
霓虹灯不稳定闪烁
等动画效果
用法实例见 demo
帧动画基本知识
step-end / steps(1) / steps(1, end) 无论播放多少次,动画过程中的 每一轮动画的 最后一帧(100%)都是被pass的
if (如果非无限循环动画 && fill-mode: forwards) {
direction: alternate && iteration-count: 偶数 ?
停留在0% :
停留在被pass的100% ;
}
step-end 如要保证一轮素材中每一张都播放到,最后一张图除了需要是100%,也需要同时是倒数第二帧,这样无论如何, 都符合预期
step-start / steps(1, start) 无论播放多少次,动画过程中的 每一轮动画的 第一帧(0%)都是被pass的
if (如果非无限循环动画 && fill-mode: forwards) {
direction: alternate && iteration-count: 偶数 ?
停留在0% 之后的那一帧 :
停留在100% ;
}
step-start 0% 无论如何都不会执行,所以空余0%,用给出的素材得出 n%(n > 0) , ... , 100% 即可。
总结:逻辑上讲,如果为了保证每一帧都执行到,用 start 更通顺,但 steps 默认是 end,使用者自行决定用哪种实现吧