代码实现动画也可以很简单

▲

点击上方蓝字关注「UIHome」

大家好，我是独立开发者Larry～无论是PC端还是移动端经常能看到一些页面在图标/按钮、加载/刷新、banner/弹框、启动/引导以及空页面等场景中使用动画效果，美观炫酷的动效不仅让页面活泼、充满生命力、增加产品的趣味性，还能直观表达产品信息、加强用户对产品的理解、提升用户体验等等。

尽管在页面中添加动画有很多好处，但是也有一些门槛限制了动画的使用，比如直接使用动画图像素材文件太大、代码实现动画还原度难以保障……今天就给大家推荐几个动画神器，帮你轻松完成你想要的动画效果。

Lottie

网站地址：

Lottie是由Airbnb团队开发的一个适用于iOS、Android、React Native、Web和Windows的开源动画库，用于解析使用Bodymovin导出为JSON的Adobe After Effects动画网站背景图片修改代码，实时渲染AE动画并在设备上呈现它们！Lottie允许应用程序像使用静态图像一样轻松使用动画。

使用Lottie库解析AE动画，首先需要下载Bodymovin插件，将AE动画导出为JSON文件并包含一个Javascript网络播放器网站背景图片修改代码，之后在你的项目中，调用Lottie库来解析、渲染JSON动画效果，并且支持实体、形状图、蒙版、alpha遮罩、修剪路径和虚线图案等，不用担心动画维度或文件大小。

Lottie针对iOS、Android和Web的三个库，在GitHub的star数都很高，分别为17722、26130和17431，具体使用方法和示例GitHub都有详细说明，大家按需了解。

Keyframes

网站地址：

Keyframes是由Facebook团队开发的一个开源库，用于将基于Adobe After Effects的形状动画转换为允许在Android和iOS设备上呈现的数据格式，目前在GitHub的Star数是5292。

在使用Keyframes库前，首先需要安装Adobe ExtendScript Toolkit脚本，将AE动画导出为JSON文件，之后调用Keyframes库导出和渲染具有复杂形状和路径曲线的高质量、基于矢量的动画。

与Lottie不同的是Keyframes对AE动画有一些约束，比如不支持预合成、形状层不支持路径合并、不支持路径修剪等等，关于Keyframes的更多介绍及使用说明在GitHub上都有详细描述。大家自行查阅：

LottieFiles

网站地址：

LottieFiles是由DesignBarn公司推出的Lottie官方动画社区，用于发现、测试和分享为Lottie和Bodymovin设计的精彩动画，网站提供英文、简体中文和德文三种语言。

在LottieFiles可以免费搜索来自全球动画师创作的1000多个精美动画，包括单个动画及动画包，可免费下载或付费下载，下载格式包括AE源文件、Lottie JSON文件、GIF动画及MP4文件等，同时兼容iOS、Android和Web。

如果你是一个动画师，有满意的动画作品想要和大家共享或者出售你的动画，那你也可以通过LottieFiles申请提交你的作品～

LottieFiles还支持你测试你的动画文件，无论在网站的任何位置只需要将你的JSON文件拖放进来就可以立即预览动画并生成动画二维码、链接地址，在iOS和Android上安装使用LottieFiles扫描动画二维码或者粘贴Lottie JSON动画链接地址在手机端预览动画效果。

犸良

网站地址：

上面推荐的几个工具主要是基于AE导出JSON文件快速实现动画效果以及Lottie动画资源，对于零基础的小伙伴，推荐体验一下阿里团队推出的犸良——一个基于Lottie的动效设计平台，内置了一些动效素材，即使不会动效你也可以基于动效库和素材库快速实现一个动效动画。

通过支付宝扫码登录或者账号密码登录犸良，选择背景模版素材、自定义画布或上传背景图片开始创建动画，进入动画编辑页面，可以调整背景尺寸、修改文字、替换图片素材、编辑或替换动画素材等。

编辑完动画点击页面右上角的「完成编辑」按钮，网站将会把你的动画生成一个可预览的JSON动画效果，你可以用支付宝扫描该动画二维码在手机端预览动画，也可以下载该动画JSON文件。

目前网站有200+动效模版，包含banner插图、金币红包、人物素材、button按钮、氛围图、icon以及阿里蚂蚁形象等，丰富的动效素材及模版让你随心创作你的动画。

福利时间