animation-steps

1.0.1 • Public • Published

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i animation-steps

Weekly Downloads

1

Version

1.0.1

License

ISC

Unpacked Size

10.1 kB

Total Files

4

Last publish

Collaborators

  • dongxl