Lottie特性支持列表
| 形状 | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
|---|---|---|---|---|---|---|
| 形状 | ? | ? | ? | ? | ? | ? |
| 椭圆 | ? | ? | ? | ? | ? | ? |
| 矩形 | ? | ? | ? | ? | ? | ? |
| 圆角矩形 | ? | ? | ? | ? | ? | ? |
| 多边星形 | ? | ? | ️️️️️️️️⛔️ | ? | ? | ? |
| 组 | ? | ? | ? | ? | ? | ? |
| 中继器 | ? | ⛔️ | ? | ? | ? | ? |
| 修剪路径(单独) | ? | ? | ️️️️️️️️⛔️ | ? | ? | ? |
| 修剪路径(同时) | ? | ? | ? | ? | ? | ? |
| 填充 | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| 颜色 | ? | ? | ? | ? | ? | ? |
| 不透明度 | ? | ? | ? | ? | ? | ? |
| 填充规则 | ? | ? | ? | ? | ? | ? |
| 径向渐变 | ? | ? | ️️️️️️️️? | ? | ? | ? |
| 线性渐变 | ? | ? | ️️️️️️️️? | ? | ? | ? |
| 描边 | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| 颜色 | ? | ? | ? | ? | ? | ? |
| 不透明度 | ? | ? | ? | ? | ? | ? |
| 描边宽度 | ? | ? | ? | ? | ? | ? |
| 线段端点 | ? | ? | ? | ? | ? | ? |
| 线段链接 | ? | ? | ? | ? | ? | ? |
| 尖角限制 | ? | ? | ? | ? | ? | ? |
| 虚线 | ? | ? | ? | ? | ? | ? |
| 渐变 | ? | ️️️️️️️️? | ️️️️️️️️? | ? | ? | ? |
| 变换 | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| 位置 | ? | ? | ? | ? | ? | ? |
| 位置(分离X/Y) | ? | ? | ? | ? | ? | ? |
| 缩放 | ? | ? | ? | ? | ? | ? |
| 旋转 | ? | ? | ? | ? | ? | ? |
| 锚点 | ? | ? | ? | ? | ? | ? |
| 不透明度 | ? | ? | ? | ? | ? | ? |
| 父级 | ? | ? | ? | ? | ? | ? |
| 自动定向 | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 倾斜 | ❓ | ? | ❓ | ? | ? | ? |
| 关键帧插值 | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| 线性 | ? | ? | ? | ? | ? | ? |
| 贝塞尔曲线 | ? | ? | ? | ? | ? | ? |
| 定格 | ? | ? | ? | ? | ? | ? |
| 贝塞尔曲线(空间插值) | ? | ? | ? | ? | ? | ? |
| 漂浮穿梭时间 | ? | ? | ? | ? | ? | ? |
| 蒙版 | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| 蒙版路径 | ? | ? | ? | ? | ? | ? |
| 蒙版不透明度 | ? | ? | ? | ? | ? | ? |
| 相加 | ? | ? | ? | ? | ? | ? |
| 相减 | ? | ? | ? | ? | ? | ? |
| 交集 | ? | ? | ⛔️ | ️⛔ | ⛔ | ⛔ |
| 变亮 | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔ | ⛔ |
| 变暗 | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔ | ⛔ |
| 差值 | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔ | ⛔ |
| 蒙版扩展 | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ? | ? |
| 蒙版羽化 | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔ | ⛔ |
| 遮罩 | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| Alpha 遮罩 | ? | ? | ? | ? | ⛔️ | ? |
| Alpha 反转遮罩 | ? | ? | ⛔️ | ? | ? | ? |
| 亮度遮罩 | ⛔️ | ⛔️ | ⛔️ | ❔ | ❔ | ❔ |
| 亮度反转遮罩 | ⛔️ | ⛔️ | ⛔️ | ❔ | ❔ | ❔ |
| 合并路径 | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| 合并 | ? (KitKat+) | ⛔ | ? | ⛔ | ⛔ | ⛔ |
| 相加 | ? (KitKat+) | ⛔ | ? | ⛔ | ⛔ | ⛔ |
| 相减 | ? (KitKat+) | ⛔ | ? | ⛔ | ⛔ | ⛔ |
| 相交 | ? (KitKat+) | ⛔ | ? | ⛔ | ⛔ | ⛔ |
| 排除相交 | ? (KitKat+) | ⛔ | ? | ⛔ | ⛔ | ⛔ |
| 图层效果 | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| 填充 | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 描边 | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 色调 | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 三色调 | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 色阶(单独控件) | ⛔️ | ⛔️ | ⛔️ | ❔ | ? | ? |
| 高斯模糊 | ? (4.1+) | ⛔️ | ⛔️ | ❔ | ❔ | ❔ |
| 投影 | ? (4.1+) | ⛔️ | ⛔️ | ❔ | ❔ | ❔ |
| 文本 | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| 字形 | ? | ⛔️ | ⛔️ | ? | ? | ? |
| 字体 | ? | ? | ⛔️ | ? | ? | ? |
| 变换 | ? | ? | ⛔️ | ? | ? | ? |
| 填充 | ? | ? | ⛔️ | ? | ? | ? |
| 描边 | ? | ? | ⛔️ | ? | ? | ? |
| 字符间距 | ? | ? | ⛔️ | ? | ? | ? |
| 锚点分组 | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 路径文字 | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 逐字 3D 化 | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 范围选择器(单位) | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 范围选择器(依据) | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 范围选择器(数量) | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 范围选择器(形状) | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 范围选择器(缓和高) | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 范围选择器(缓和低) | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 范围选择器(随机排序) | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 表达式选择器 | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 其他 | Android | iOS | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| 表达式 | ⛔️ | ⛔️ | ⛔️ | ? | ? | ? |
| 图片资源 | ? | ? | ? | ? | ? | ? |
| 预合成 | ? | ? | ? | ? | ? | ? |
| 时间伸缩 | ? | ? | ⛔️ | ? | ? | ? |
| 时间重映射 | ? | ? | ⛔️ | ? | ? | ? |
| 标记 | ? | ? | ? | ? | ? | ? |
在安卓系统中使用投影和高斯模糊效果
在安卓系统中,投影与高斯模糊效果将会应用在每个填充或描边上,而不是最终图层,这将会导致以下问题:
- 假如图层中存在多个形状, 投影效果将会每个形状上单独产生投影,多个投影效果重叠时会导致部分区域投影过暗的情况发生。
- 假如投影或阴影范围超出了预合成的区域范围,超出的部分将会被裁剪。为了避免这种情况,你可以在预合成中预留额外的边距。
- 在添加了投影或模糊效果的图层中,动态属性必须作用在的单独的填充或描边。 最简单的方式时在图层名称后面添加"**" , 这样动态属性将会作用在每个子级中。
在以下特性仅在Web端生效
混合模式
支持以下混合模式:
正常、相乘、屏幕、叠加、变暗、变亮、颜色减淡、经典颜色减淡、柔光、强光、差值、排除、色相、饱和度、颜色、发光度
Canvas:支持所有主流浏览器
SVG:除IE与旧版edge以外的所有浏览器
3D
3D功能仅HTML渲染器下被支持,SVG将会包装在DOM节点下进行渲染。
你可以添加摄影机作为构图时的视角参考,摄影机本身不会被导出。
如果图层中使用了遮罩,它将丢失其3D属性,可以将其转换成预合成后再使用蒙版功能。
在开启了图像加速功能的浏览器中,3D图层在缩放后不会对其进行平滑处理,这将会导致图像放大后出现模糊的现象。
评论