您需要 登录 才可以下载或查看,没有账号?注册
x
不知道大家有没有这样的困扰,每次制作GIF图的时候,难免会出现边缘锯齿,就算加上白边之后,在夜晚模式的时候锯齿就更明显了。除此之外,GIF图对于渐变填充的呈现也很糟糕,会出现渐变断层的情况,看起来很不自然。
最让人难以接受的情况是_
稍微把动画做流畅一些,GIF的文件大小就变得巨大无比。
在2017年的时候,一款比GIF动画更好用的动画图片格式诞生了!!!
那就是我们今天将要介绍的Lottie动画。
什么是Lottie动画?
Lottie动画是一种基于 JSON 的动画文件格式,允许在任何平台上发送动画,就像发送图片一样轻松。Lottie是可在任何设备上运行的小文件,并且可以放大或缩小而不会出现锯齿的一种动画格式。
相较于其他动图格式,Lottie有哪些优点?
和GIF_Apng 或 MP4 等其他格式相比,Lottie 动画要小得多,同时保持相同的动画表现,甚至更流畅。
Lottie动画是基于矢量设计制作的,这意味着可以随意放大或缩小它们,而不必担心分辨率的大小导致的锯齿问题。放大无数倍也是清晰如初。
③支持多平台
对于所有开发人员来说,Lottie动画的交接非常简单。现在我们可以在 iOS_Android_Web 和 React Native 上使用 Lottie 动画,也不需要修改。使用和调用都非常方便。
在 Lottie 动画中,动画元素可以设计为可交互组件,用户可以操纵它们进行交互,实现滚动_单击和悬停等交互效果。这是GIF_Apng和MP4等动画文件都没办法做到的。
怎么设计制作Lottie动画呢?
目前,Lottie官网提供了很多动效设计软件的插件供大家使用和下载。目前下面这些设计软件可以在官网下载到Lottie动画的导出插件。
其中,Lottie Creator是Lottie官方的网页版动画制作工具,登录官网就可以使用。
Lottie官网地址
https://lottiefiles.com
说了这么多Lottie的优点,其实Lottie也是有短板的。比如说,AE里面的fx效果,Lottie就全部不支持,另外复合路径动画等等动效效果也不支持。
为了方便大家快速上手Lottie动画,作者把Lottie支持的效果整理归类成了几张图片,方便大家制作的时候快速查阅。
|