杏鑫平台官网_UI设计师的的Lottie动画入门指南(上篇)

UI设计师的的Lottie动画入门指南(上篇)

10月 24, 2022
发表于: 视觉设计. 评论

Sponsor

前言:作为UI设计师,我们在平时的工作中,多多少少都会接触到一些动效相关的工作内容。而谈到动效的落地,我想Lottie这种方案是一定不能绕过去的。因为它推出的时间较早并且不断在更新迭代,网上可以找到很多相关的文章和教程,也方便我们进行了解和学习。虽然它不能实现光效、粒子这类的复杂的效果。但并不妨碍它仍然可以作为UI动效输出的重要选项。

刚接触动效输出的同学,可能很喜欢根据当下的项目,对比各种工具(例如Lottie、SVGA、PAG等)孰强孰弱,在心中做一个排名,选定一个工具作为今后动效输出的唯一方案。如果有这种工具,将大大降低设计和开发的成本,当然是好事。

但到目前为止,似乎还没有发现这种唯一解。我们接手不同的项目时,设计上要达成的目标以及实现中遇到的限制,都是不同的。各种工具之间都有不同的特点和优劣势,如果我们深入了解它们并做出一一对比,一定会找到适合这个项目的最优解。如果能熟悉各种工具并能灵活运用,那一定会大大提高我们的工作效率。而且通过了解各种落地方案,我们可以提前预料一个动效大概能实现到什么程度,从而能在最开始就规划好我们的动画该怎样去设计。

我想根据自己的项目经验,为大家分享一下Lottie、PAG、SVGA的功能和特点。PS:GIF、APNG、WEBP等方式相对比较传统,文件体积较大,暂不列入讨论的范围内。我们在学习Lottie的过程,一定会碰到两个难点,一个是设置项,一个是功能支持列表。设置项需要我们能了解一些开发相关理论知识,功能支持则需要我们根据限制条件在不同项目中灵活运用。

如果我们能掌握这两个部分,动画效果的上限是非常高的。上篇的内容更偏理论基础,主要为大家介绍界面相关内容,里面包含设置项的介绍。在下篇,我会根据实际动画案例,来为大家介绍一下Lottie的功能支持以及如何灵活的运用它们。

1.背景介绍

1.1 背景简介

官方:Lottie是Airbnb推出的一个免费开源动画库,适用于Web/Android/iOS/Windows。它可以把bodymovin(AE插件)导出的json文件解析成动画,并且在各平台上进行呈现。Lottie是以一位德国电影导演和剪影动画的最重要先驱Lotte Reiniger(洛特·雷妮格)的名字命名的。她的著名作品《艾哈迈德王子历险记》(1926年)——现存最早的长篇动画电影。

1.2 原理解析

关于lottie的说法众说纷纭。有人说是动画库。有人说是动画输出工具,有人说是动画落地的解决方案。这些说法虽然没有问题,但是太笼统模糊,不太方便普通使用者的理解。那lottie到底是什么?在实现的层面上讲,Lottie是一个研发人员使用的动画库(各个平台都有自己的库)。如何理解库,简单举例,比如说现在有一串” 16,12″的数据,当用位置的规则来解析它,就成了位置信息X16,Y12。当用宽高规则来解析它,就成了尺寸信息W16,H12。能解析” 16,12″这串数据的规则可以有很多种,将这些所有的规则都整合在一起,就形成了一个库。

在工作流程中,设计师先通过AE里的bodymovin插件,把动画导出成json文件(json文件里包含有很多类似“16,12”这样的数据)。研发人员利用lottie的动画库(包含有很多类似“位置”“宽高”这样的解析规则)来解析json里的数据并且渲染成动画。所以动画库的渲染过程和设计流程并没有什么关系。

对Lottie的进一步解释,只是希望普通使用者能清晰的理解lottie的工作原理。当我们谈论它的时候,不管它有多少种叫法,只要我们理解它的原理就好了。

1.3 工具特点

是比较早期的动效输出工具,国内的动效输出工具如svga、pag等工具,在研发过程中都选择对标lottie来进行功能的设计与改进。所以网上会找到很多关于lottie的文章和资料。这也方便使用者解决遇到的问题。

lottie支持纯矢量/图片两种格式的输出,也可以插入音频。通过功能支持列表可以看出,lottie支持的平台很多,其中web端支持的最好,同时在矢量图形的解析上拥有很好的表现。

AE功能支持列表:http://airbnb.io/lottie/#/supported-features(因为功能支持列表所包含项目很多且在持续更新中,可能整理出一张列表后又会面临后续功能的改变,所以我们在学习Lottie规范的时候应该多去查阅官方给出的功能支持文档,并且结合自己项目实际的情况去理解。在下篇,我会分享功能列表的常用项,以实际案例为大家做演示)lottie基于AE的工作原理,对其中的矢量图形和原生动画(蒙版,轨道遮罩,父子级绑定等)有非常强的解析能力,千万不要小瞧这一点,基于这种能力,可以配合前端,做到对动画中的各个元素进行精确化控制,并且整个动画是矢量的(适配时就可以不用考虑屏幕分辨率)。

如果对支持的功能有很深入的了解,是完全可以制作出动效炫酷体积较小可交互的纯矢量lottie动画。

1.Bodymovin下载地址:https://github.com/airbnb/lottie-webzxp
文件的下载路径为:在链接页面中找到文件夹“build”——“extension”——“bodymovin.zxp”就可以找到最新版本的bodymovin插件了。

2.需要把插件安装在zxp安装器中。
zxp下载地址:https://aescripts.com/learn/zxp-installer/
tips:首次在AE中安装插件脚本,无论是哪个脚本,记得在AE”首选项“——“脚本和表达式”中,勾选“允许脚本写入文件和访问网络”。插件就可以正常使用了,如果之前设置过请忽略。

2.界面介绍

2.1 常规界面

2.2 设置界面

关于Metadata的猜想:该功能相对较新,之前没有在项目中实际使用过。所以以下是关于该功能的猜想。如果有童鞋实际使用过该功能,欢迎交流沟通~在测试的过程中发现可以通过该功能往json文件里传很多参数进去,这也就意味着研发在更改动画的时候可以调用这些参数。下图仅以按钮的不同交互状态来举例,未必合理但能大概说明使用方法。实际工作中使用的空间可能非常大。

3.预览介绍

Lottiefiles:https://lottiefiles.com

Lottiefiles是Lottie官方的动画预览工具,涵盖了非常多的平台。除了常用的web端,还有移动端(iOS和安卓)和电脑端(Win和Mac)。而且在AE、Figma和XD中也有插件。web端是比较常用的平台,可以支持的效果最多,里面也包含了完整的预览功能,其他平台的预览功能基本大同小异。所以在此处我们以web端的Lottiefiles来举例。另外,如果动画需要在移动端上实现,那么务必使用移动端的Lottiefiles来预览效果。

3.1 常规界面

将文件拖入到网站任意界面就可以唤起预览窗口,预览有两种方式,一种是直接拖拽,一种是复制链接。当动画不包含位图或者位图已经置入进json中,则可以直接把json文件拖入窗口。如果动画包含位图,导出动画时会再多生成一个存放位图的images文件夹。预览带位图的动画,需要将json和images文件夹压缩成zip包,拖入进窗口。PS:除了json和zip,拖入的方式还支持dotLottie格式,该格式是Lottiefiles推出的一种官方格式,但json更为常见,所以在此处只做了解。另一种方式是复制链接到输入框,也可以进行预览。我们在Lottiefiles官网的发现(Discover)中,可以找到很多免费的动画。复制“Lottie Animation URL”中的链接到预览窗口,就可以进行预览以及后续的动画编辑功能,不过这种方式,只针对公开的动画。如果是未公开的动画,复制预览窗口中的“Asset Link”的链接也可以在其他设备的Lottiefiles(各个端或者插件)上进行预览和编辑。

3.2 编辑动画

在下篇,我会为大家介绍一下Lottie的功能支持以及如何灵活的运用它们。之后也会分享一些lottie实际动画案例。

作者:无梦不欢
站酷主页:https://ethangao.zcool.com.cn/

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接

与 Lottie、Lottie教程、UI、UI设计 相关的文章

  • 现代且专业的患者临床智能护理应用程序UI套件
  • 如何运用创新思路来设计产品?
  • 高级的预订主题应用程序UI套件
  • 终于齐了!常用的web、应用程序UI图标大全
  • 优质Web3设计案例,这将是Web3时代的设计趋势!
  • UI界面的阴影怎么画才不脏?

赞助商链接

喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。

版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。