1.0.1 • Published 2 years ago

animation-steps v1.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

通过引用内置的帧动画函数实现帧动画效果

  • 诸如指定图片序列顺序播放实现类似 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,使用者自行决定用哪种实现吧

1.0.1

2 years ago

1.0.0

2 years ago