微信小程序中使用lottie实现动画

安装lottie-miniprogram

npm install lottie-miniprogram

引入依赖

import lottie from 'lottie-miniprogram'

使用示例

import { View, Canvas } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useRef, useEffect } from 'react'
import lottie from 'lottie-miniprogram' // 引入依赖
import './index.less'

export default function Index() {
  const animation = useRef(null)

  useEffect(() => {
    // 获取canvas组件
    Taro.createSelectorQuery().select('#lottie-canvas').node(res => {
      const canvas = res.node
      const context = canvas.getContext('2d')

      // 调用lottie的loadAnimation加载动画
      animation.current = lottie.loadAnimation({
        loop: true, // 是否循环播放
        autoplay: true, // 是否自动播放
        path: 'http://8.134.72.11',//lottie json包的网络链接，可以防止小程序的体积过大，要注意请求域名要添加到小程序的合法域名中
        rendererSettings: {
          context
        }
      })

      animation.current.addEventListener('loopComplete', () => {
        console.log("loopComplete")
      })
    }).exec();

    return () => {
      // 销毁动画
      animation.current.destroy()
    }
  }, [])

  return (
    <View className='index'>
      <Canvas id="lottie-canvas" type="2d" style={{ width: '300px', height: '300px' }}></Canvas>
    </View>
  )
}

其他方法介绍

play() // 播放
stop()  //暂停
destroy() // 销毁
addEventListener() // 添加监听事件 loopComplete循环完成 complete动画完成
removeEventListener() // 移除事件监听

github github.com/by-boat/lot…