记GIF动画转CSS逐帧动画工具

由 Ghostzhang 发表于 2022-08-16 19:27

翻到了 2018 年左右团队支持的一个项目，当时看重构同学不断的在和设计师来回沟通调动画细节，就在想能不能提升下这里的效率，于是了解了下当时的实现过程，大概是这样的：

设计师用 PS 或其他工具输出 gif 动画图或视频给到前端开发，前端开发再对照着用 CSS 动画实现。开发会用用工具（如 PS）把 gif 图中每一帧的时间取出来，由于显示精度的问题，往往取到的时间会比较粗（秒），这就导致最终效果与设计师给出的还是会有差异，就感觉不对，因此还需要再进一步调整代码，于是就出现了需要反复沟通的现象。

CSS 动画，简单的说就是用 CSS3 的animation属性，设置@keyframes关键帧来实现的帧动画。（示例可以看这里 https://www.jianshu.com/p/05c5a9b302d2 ）看完应该大概有了个概念。

现在进入主题，平时我们对帧动画的印象，大多是同一时间间隔的，像上面示例中的例子：

代码语言：javascript复制

@keyframes run {
  0% {
    background-position: 0 0
  }
  10%{
    background-position: -100% 0
  }
  20%{
    background-position: -200% 0
  }
  30%{
    background-position: -300% 0
  }
  40%{
    background-position: -400% 0
  }
  50%{
    background-position: 0 -100%
  }
  60%{
    background-position: -100% -100%
  }
  70%{
    background-position: -200% -100%
  }
  80%{
    background-position: -300% -100%
  }
  90%{
    background-position: -400% -100%
  }
  100%{
    background-position: 0 0
  }
}

会发现每一帧的间隔都是一样的，大部分情况下效果也还不错。但如果遇到需要设置不同间隔的情况呢？