前端动画 lottie-web 应用

安装依赖

npm install lottie-web

基本用法

const animation = lottie.loadAnimation({
    container: document.getElementById('box'),
    renderer: 'svg',        // 渲染方式:svg：支持交互、不会失帧、canvas、html：支持3D，支持交互
    loop: true,             // 循环播放，默认：true
    autoplay: true,         // 自动播放 ，默认true
    path: ''                // json 路径
})

常用方法

• animation.play()：播放，从当前帧开始播放

• animation.stop()：停止，并回到第0帧

• animation.pause()：暂停，并保持当前帧

• animation.goToAndStop(value, isFrame)：跳到某个时刻/帧并停止
• animation.goToAndPlay(value, isFrame)：跳到某个时刻/帧并播放
• animation.playSegments(arr, forceFlag)：以帧为单位，播放指定片段
• animation.setSpeed(speed)：设置播放速度，speed为1表示正常速度
• animation.setDirection(direction)： 设置播放方向，1表示正向播放，-1表示反向播放
• animation.destroy()： 删除该动画，移除相应的元素标签等

常用钩子

• data_ready：动画数据加载完毕

  animation.addEventListener('data_ready', () => { console.log('(加载完毕)'); });

   

• config_ready：完成初始配置后

• data_failed：当无法加载动画的一部分时

• loaded_images：当所有图像加载成功或错误时

• DOMLoaded：将元素添加到DOM时