赞助商
立即赞助

Lottie 动效设计完全指南:渐变修复

UI设计3年前 (2021)更新 流光
8.4K 0 0

大家在使用Lottie输出矢量渐变图形的时,应该有遇到设计的渐变效果无法正常显示的问题。无论你设计的效果是什么样的,导出以变成黑白渐变。么个问题以修复吗?答案是肯定的。

Lottie 动效设计完全指南:渐变修复

MAC系统渐变修复

其实之的文章中提到过修复渐变的问题。对于MAC平台言很简单,只需修改「渐变填充」「Gradient」即可,方法选中渐变填充属性,点击键盘回车键即可重命。(如果修改后还无效,建议新bodymovin插件新版)

Lottie 动效设计完全指南:渐变修复

Windows系统渐变修复

1. 双色渐变修复

对于win系统,上的方法是,修改ae为英版,同时需要修改系统语言编码方式,历史章中有到。但是进行实操后发现,特别繁琐。而且容易导致他软件错。得偿失。这里给win系统的修复方案,由于Airbnb官方一直没有修复这个问题的打算(可歪果仁的版本就会错),只咱们自己想办法了。

知道lottie是通过json文件来描述动效的,那比对正常显示渐变的json文件和显示异常的文件就极有可能发现问题出现的因。所以针对头图中的渐变圆形,比对了一下个json文件的差异。发现问题来下下面这一行代码。

常显示的json文件中,这段码这样的

"g":{"p":2,"k":{"a":0,"k":[0,0.047,0.518,1,1,1,0,0.941],"ix":9}}

而在显示异常json文件,代码是这样婶儿

"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":9}}

WTF?这谁能得懂,一脸懵逼好。别着急,咱慢慢析。首先代码不同的只有中括号中的数字。那这面的数字必然是用来控制颜色的。而知道常用的色彩模式有HSB和RGB。而本示例中的渐变参数如下,只要找对应关系就能发现其中的秘密。

考验逻辑思维的时候到了,对比面的第一行码下面的参数能找到对应关系吗?

Lottie 动效设计完全指南:渐变修复

首先我们知道无所哪种色彩模式,控制色彩的都三参数,但括中一共8参数,那么另外两就必然控制其他属性的。渐变控制器中,我们发除了色彩参数还不透明度置属性,这里我们用到不透明度那么就一用表示置的。

我们的渐变颜始位置和终止位置分别位0%和100%,么不难猜出,在上述代码中就是0和1,么0和1面的三个参数显就是表示彩的。

是不是感觉胜利在眼前?然而我穷尽了九年义务教育学到数学知识,也没有找到任何规律。后来我在网上搜素哦色模相关文档,意发现了这个

Lottie 动效设计完全指南:渐变修复

具体咱也看不太明白,反正是RGB有各不显示法。其有被称为浮数表示法。计算为分用R,G,B值除以255。然后我用色编辑值计算了下,顿时真相大白!

Lottie 动效设计完全指南:渐变修复

json代码色是过浮数来表示,需要用颜色R,G,B值分处以255,即可到浮表示色值。

因为经有除尽的情况,这里通显示小数点后位。到了这里我们就明白导致渐变现问题的原因和修复方式了。

Lottie 动效设计完全指南:渐变修复

对于双色渐变修复的方式就是在json件中搜索「”k”:[0,1,1,1,1,0,0,0]」,然后修改为「颜色1位置,R1/255,G/255,B1/255,颜色2位置,R2/255,G2/255,B2/255」即可。

这就完了吗?别急,在日常工作当中可能还会遇透度渐变或者多色渐变的情况。这个候怎通过修改json文件来解决呢?这就不详述过程了,直上干货。

多色/透明渐变修复

首先需要知道的一个事实是,当的导出的渐变不生效,通常显示的是下面的代码,也就是说不管你有种颜色,默认显示的都是黑渐变”k”:[0,1,1,1,1,0,0,0],其实这个也给带来了一个便利,就是只要在代码编辑器查找这一段代码就可以快速定位了。

接下我们就通过一稍显复杂的案例详解渐变的终极修复方法。下图一三色渐变的圆形及其AE中的参数

Lottie 动效设计完全指南:渐变修复

Lottie 动效设计完全指南:渐变修复

首先这个渐变圆形有三种不同的颜色,然后有三个不透度控制滑块。不透度滑块1位置是0.1,不透度数值为0.5;不透度滑块2位置是0.5,不透度数值为1;不透度滑块3位置是1,不透度数值为0.

我们再对比一下,问题的码常码之间的差别。

"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":9}},
 "s":{"a":0,"k":[-75,-75],"ix":5},
 "e":{"a":0,"k":[75,75],"ix":6},
"g":{"p":3,"k":{"a":0,"k":[0,0.825,0.109,1,0.5,0.412,0.116,1,1,0,0.124,
 1,0.1,0.5,0.5,1,1,0],"ix":9}},
 "s":{"a":0,"k":[-75,-75],"ix":5},
 "e":{"a":0,"k":[75,75],"ix":6},

通过对代码和AE中的参数我们大致可了解到信息

  • “p”表示构成渐变色数量
  • “k”表示渐变色的属性
  • “s”表示渐变起始点
  • “e”:表示渐变结束点

一来说”s”,”e”属性是不会出错的,”p”表示颜色的数量,直修改为正确的数值就行了。略显复杂的就是渐变色属性”k”了。当对照AE中的渐变色属性一一比对就会了解在此案例中

“k”:[0,0.825,0.109,1,0.5,0.412,0.116,1,1,0,0.124,1]=「颜色1置,R1/255,G1/255,B1/255,颜色2置,R2/255,G2/255,B2/255,颜色3置,R3/255,G3/255,B3/255,透明度1置,透明度1数,透明度2置,透明度2数,透明度3置,透明度3数,」

看似复,其只是颜和透明度属的不断重复,首先描述完所有的颜属,描述完所有的透明度属就以。

最后我们到了个过改json,复渐变问题用做法。

  • 在json中搜索代码段”k”:[0,1,1,1,1,0,0,0]来定位内容(推荐使用sublime text和notepad++修改json文件)
  • 改”p”后数值为正确色数量
  • 修改”k”后面的参数为正确的渐变参数,一般表示为「颜色1属性,颜色2属性,……颜色n属性,透明1属性,透明1属性,……透明n属性」

备注:

  • 颜色属性:颜色位置,R/255,G/255,B/255
  • 透明度属性:透明度置,透明度数

欢迎关注作者公众号:「动效研究社」

Lottie 动效设计完全指南:渐变修复

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味,本文就来谈谈这四种功能性动效在移动端的使...
AE动效
动效设计,是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫,到逐渐理解了动效对于提升用...
Lottie
作为2019年第一个爆款刷屏 H5 项目,「网易云音乐2018年度听歌报告」除了走心的文案、精美的页面,也包含了不少有意思的动效...
UI动效
在经典的尼尔森十大启发式当中,「系统状态可见性」可以说是如今交互设计领域当中,最为重要的原则之一。通过向用户展现当前...
交互设计
有一个 UI 设计师,用了两个多月时间做了一部 Element 动画宣传片,他到底经历了什么? △ 点击查看宣传动画 项目背景 1. E...
Element
动效导出类型 一般情况下我们导出的动效可以分为三种类型。 1. 纯矢量图形动效 此类动效常用于图标、加载、启动页等。 2...
AE动效
编者按:本文总结了微交互的基础知识和三大作用,作者用大量优秀的微交互案例演示让你直观感受到微交互的强大,适合对微交互...
交互设计
动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯,交互的上下文逻辑也因为动效的加持而更...
动效设计