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图层在缩放后不会对其进行平滑处理,这将会导致图像放大后出现模糊的现象。
评论