乐趣区

关于javascript:前端懒人神器lottie动画库使用指北

jiezi

lottie 介绍

​ Lottie 是一个 Airbnb 开发的用于 Android，iOS，Web 和 Windows 的库，用于解析应用 Bodymovin 导出为 json 的 Adobe After Effects 动画，并在挪动设施和网络上出现

劣势

这套计划最优良的中央在于，解放了前端开发者，让设计师能够间接对接到动画实现上

github 仓库地址

  • lottie-web: https://github.com/airbnb/lot…
  • lottie-ios: https://github.com/airbnb/lot…
  • lottie-android: https://github.com/airbnb/lot…

根本应用

  1. 装置依赖 

    yarn add lottie-web

  2. 我的项目内援用 

    import lottie from 'lottie-web'

  3. 实例化 

    lottie.loadAnimation({container: document.getElementById('lottie-animation'),
    renderer: 'svg',
    loop: false,
    path: 'https://gaeacdn.jiliguala.com/jlgl/pages/animation/finger02.json'
})

api 介绍

loadAnimation 的参数

名称 形容
container 用于渲染的容器，个别应用一个 div 即可
renderer 渲染器，能够抉择 ‘svg’ / ‘canvas’ / ‘html’，集体测试发现 svg 成果和兼容性最好
name 动画名称，用于 reference
loop 循环
autoplay 自动播放
path json 门路，页面会通过一个 http 申请获取 json
animationData json 动画数据，与 path 互斥，倡议应用 path，因为 animationData 会将数据打包进来，会使得 js bundle 过大

实例化后的 api

名称 参数 形容
stop 无 进行动画
play 无 播放动画
pause 无 暂停
setSpeed Number 设置播放速度，1 示意 1 倍速度，0.5 示意 0.5 倍速度
setDirection Number 正反向播放，1 示意 正向，-1 示意反向
goToAndStop Number, [Boolean] 跳到某一帧或某一秒进行，第二个参数 iFrame 为是否基于帧模式还是工夫，默认为 false
goToAndPlay Number, [Boolean] 跳到某一帧或某一秒开始，第二个参数 iFrame 为是否基于帧模式还是工夫，默认为 false
playSegments Array, [Boolean] 播放片段，参数 1 为数组，两个元素为开始帧和完结帧；参数 2 为，是否立刻播放片段，还是等之前的动画播放实现
destroy 无 销毁

事件

  • onComplete
  • onLoopComplete
  • onEnterFrame
  • onSegmentStart
  • you can also use addEventListener with the following events:
  • complete
  • loopComplete
  • enterFrame
  • segmentStart
  • config_ready (when initial config is done)
  • data_ready (when all parts of the animation have been loaded)
  • DOMLoaded (when elements have been added to the DOM)
  • destroy

高级用法

动静批改 Lottie 中的图片

动静批改 Lottie 中的文本

用 async/await 优雅地管制 Lottie 播放

Lottie 更多利用方向

  • 可管制的动画

    因为 Lottie 动画是能够通过程序控制播放的，不少营销流动页上的动画能够思考采纳 Lottie 来实现

    比方很常见的「大转盘」「抽奖机」这样的抽奖交互模式，如果设计师做出一个更粗劣的抽奖动画，咱们只须要在用户点击抽奖时，调用 .play() 管制 Lottie 播放就能够了，页面体验会更高大上

  • 代替短视频

    往年开始淘宝商品详情中，短视频开始成为潮流，然而其实不少视频齐全能够用 Lottie 来实现（其实设计工具可能都是 AE），一方面文件体积更小，另一方面 Lottie 这种技术计划很容易替换动画中的要害「文案」

  • 可交互的动画

    因为 Lottie 的 JSON 内形容了动画的各种细节如关键帧、位移轨迹等等，因而如果在动画播放时，依据用户的交互去动静扭转这些参数，就能够实现可交互的动画

  • 简略游戏

    通过 Lottie 自带的播放控制能力，咱们甚至能做出一些简略的游戏，比方上面是最近咱们业务中的例子，投骰子、蚂蚁走楼梯等等动画，就应用了 Lottie

示例：https://www.yuque.com/lottie/…

工具库

  1. 洛丽塔：https://design.alipay.com/lolita

​ 作用：

  • 能够用来压缩动画源文件
  • 查看动画文件的相干属性（动画时常，帧数，画布大小。。。）
  • 导出不同格局的文件
  • 动画编辑
  1. 犸良：https://design.alipay.com/emo…

    作为一站式动效制作平台，通过海量的动效素材以及可视化编辑能力，帮忙零根底的用户轻松实现动效制作

退出移动版