上周我把自己网站（mocheng.mowan.work）的进度条优化了一下，做成了小柯基在奔跑的效果。这样一个进度条的交互是怎么做出来的呢？
这种进度条的交互，以前可能需要用AE这样的专业软件才能做，现在直接用AI就可以搞定。
我把需求告诉了CodeX，同时给到它一张小柯基的底图，作为基准。
一般来说，这种动画其实就是一帧帧的静态图片连起来播放构成的，接下来要做四张关键帧，分别对应柯基奔跑时的四种状态：腾空、落地、收腿、以及反向腾空的姿势，它们连起来就是柯基奔跑的动画。
Codex给我先生成了一张绿幕背景图，而不是透明背景的，这个也是我以前学到的，在剪辑里面，通过绿幕，可以很方便的实现抠图，它只需要去除绿色背景，出来就是我们想要的图。
接下来用这张绿幕的底图，生成了四张透明的关键帧，大概就是下面这样。
然后拼起来播放，最后就形成了这样的进度条，我刚好嵌入到自己的产品里。
其实很早之前我就想优化这个公众号文章排版网站的进度条了，但一直没有想到好的办法，直到最近玩Codex的宠物、以及用宠物给文章配图，才有了灵感，把它给加上去了。