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

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

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

Lottie

网站地址:https://airbnb.design/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

网站地址:https://facebookincubator.github.io/Keyframes/

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

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

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

LottieFiles

网站地址:https://lottiefiles.com/

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

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

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

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

犸良

网站地址:https://design.alipay.com/emotion

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

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

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

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

最后

今天的内容就是这些,希望对你有所帮助,如果你对独立开发者感兴趣,或者你对产品、设计、技术、运营有一些自己的想法,公众号后台回复『加群』识别二维码添加“码力全开机器人”,回复『加群』即可加入码力全开Friends用户群,你也可以添加我的微信lishichao706,带你进入独立开发者的聚集地。

感谢您的阅读,本文由 码力全开 - 全职独立开发者的产品日常和设计分享 版权所有。未经允许不得转载。
帮助独立开发者轻松创建令人惊叹的产品视觉效果
从想法到产品不可错过的辅助工具
扫码
扫码添加Larry微信

入独立开发者微信群

扫描二维码

码力全开公众号