工作中,开发紧急需要一个loading动画的帧序列,应该怎么解决?

今天上班的时候,做了一个界面中有toast弹窗提示,弹窗中有文字和一个loading加载动画,提示用户接下来内容正在加载中,我原本以为开发同事可以自己写一个loading动画,同事说现有的库里,只有一个加载动画,但是放在界面中完全不搭,并且开发无法修改动画的颜色,所以他需要我重新做一个loading动画,并且将所有的帧序列给到他。

如果很会做gif的同学,可以直接自己做,如果太紧急了,可以尝试下我下边的这个方法。

由于临近封板,任务紧急;我尝试搜索了加载动画帧序列,并没有找到符合要求的可以直接使用的。于是,我想到了之前工作中用到的一个网站:

Free Lottie Animation Files, Tools & Plugins – LottieFiles

工作中,开发紧急需要一个loading动画的帧序列,应该怎么解决?

这个网站上有各种各样的动画,提供不同的格式下载。于是我搜索了loading,出现了许多不错的loading动画,完全符合了我的要求;

工作中,开发紧急需要一个loading动画的帧序列,应该怎么解决?

点击任一一个loading动画,右上角的Download可以选择不同的下载格式;

工作中,开发紧急需要一个loading动画的帧序列,应该怎么解决?

Lottie Json是开发直接可以使用的格式,下载下来json文件后,开发可以直接用到代码中;

Customize Gif:是可以编辑的fig文件,实则就是帧序列图层;背景颜色可以选透明的,下载下来就是透明背景的;

工作中,开发紧急需要一个loading动画的帧序列,应该怎么解决?

工作中,开发紧急需要一个loading动画的帧序列,应该怎么解决?

我选择了这个Customize Gif,然后背景透明,下载下来后ps打开;

工作中,开发紧急需要一个loading动画的帧序列,应该怎么解决?

接着打开时间轴操作,查看gif播放是否流畅,可以根据实际情况给每一层调整颜色等,最后导出帧序列:文件-导出-渲染视频;

工作中,开发紧急需要一个loading动画的帧序列,应该怎么解决?

参数设置:

名称可以自己起一个放在自己想放的文件夹下;选择photoshop图像序列;格式:png;最后渲染即可。

工作中,开发紧急需要一个loading动画的帧序列,应该怎么解决?

保存好后发给开发,这样的loading动画的帧序列就做好啦!

© 版权声明
THE END
如果内容对您有所帮助,就支持一下吧!
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容