加入官方微信群

使用微信扫描二维码
或搜索 weweloo 添加微信好友

返回
MooKwai特色块Lottie

Lottie

Lottie 是一个跨平台的动画库,它支持Web、移动端(iOS和Android)以及其他一些平台。使用JSON格式的动画数据在应用程序中呈现高质量、流畅的矢量动画。

文章目录

特色

使用 Adobe After Effects 制作动画并输出 JSON 格式文件,通过 Lottie 动画库解析并播放动画,以更大程度的压缩动画体积,呈现高质量、流畅的矢量动画。可通过区块设置动画相关属性,且支持 MooKwai 的事件动画配置。

配置选项

基本设置

全局样式

Select 区块对应的全局块样式。

Html 标签

Select 区块根元素的 Html 标签类型。

动画设置

Json 文件

File Lottie 动画的 JSON 文件,可使用媒体库上传的文件或直接输入站外的 JSON 文件地址。

渲染

Select 动画渲染类型,可选择 ‘svg’ 或 ‘canvas’ 两种类型。

宽高比

Number 设置动画容器的宽高比,用于在页面尚未渲染出动画前先预留出合适大小的位置,以免页面出现抖动。

自动播放

Boolean 页面打开后,是否自动播放动画。

循环

Boolean 动画是否反复循环播放。

渲染类型比较

Canvas

性能:Canvas 通常在性能上更优,尤其是在处理复杂的动画和大量的矢量图形时。Canvas 渲染器使用像素操作,这在现代浏览器中通常非常高效。
兼容性:Canvas 渲染器在所有现代浏览器上都有良好的支持,包括移动设备。

SVG

性能:SVG 渲染器在处理简单的矢量图形时性能较好,但在处理复杂的动画和大量的矢量路径时,性能可能会下降。
兼容性:SVG 在所有现代浏览器上都有支持,但在某些旧版浏览器上可能存在兼容性问题。
矢量优势:SVG 是矢量图形的标准,这意味着它们在缩放时不会失真,这对于高分辨率显示设备(如 Retina 屏幕)特别有用。

元素

<div class="mk-lottie">
  <div class="el-inner">
    ...Lottie动画
  </div>
</div>
  • 主容器 .mk-lottie

其他

  • 交互事件中的 Lottie 动画控制仅支持使用 MooKwai 提供的 Lottie 区块。

使用微信扫描二维码
或搜索 weweloo 添加微信好友

加微信
进群聊聊(๑•̀ㅂ•́) ✧