今天上班的时候,做了一个界面中有toast弹窗提示,弹窗中有文字和一个loading加载动画,提示用户接下来内容正在加载中,我原本以为开发同事可以自己写一个loading动画,同事说现有的库里,只有一个加载动画,但是放在界面中完全不搭,并且开发无法修改动画的颜色,所以他需要我重新做一个loading动画,并且将所有的帧序列给到他。
如果很会做gif的同学,可以直接自己做,如果太紧急了,可以尝试下我下边的这个方法。
因为临近封板,任务紧急;我尝试搜索了加载动画帧序列,并没有找到符合要求的可以直接使用的。于是,我想到了之前工作中用到的一个网站:
Free Lottie Animation Files, Tools & Plugins - LottieFiles
这个网站上有各种各样的动画,提供不同的格式下载。于是我搜索了loading,出现了很多不错的loading动画,完全符合了我的要求;
点击任一一个loading动画,右上角的Download可以选择不同的下载格式;
Lottie Json是开发直接可以使用的格式,下载下来json文件后,开发可以直接用到代码中;
Customize Gif:是可以编辑的fig文件,其实就是帧序列图层;背景颜色可以选透明的,下载下来就是透明背景的;
我选择了这个Customize Gif,然后背景透明,下载下来后ps打开;
接着打开时间轴操作,查看gif播放是否流畅,可以根据实际情况给每一层调整颜色等,最后导出帧序列:文件-导出-渲染视频;
参数设置:
名称可以自己起一个放在自己想放的文件夹下;选择photoshop图像序列;格式:png;最后渲染即可。
保存好后发给开发,这样的loading动画的帧序列就做好啦!