更新记录

1.0.0（2026-06-30）

• 新增 c-lottie-x UTS 组件。
• App-Android 使用 Airbnb Lottie 原生播放。
• App-iOS 参考 uni-animation-view，内置 Lottie.framework 原生播放。
• H5/Web、微信小程序端复用 c-lottie 的 renderjs / lottie-miniprogram 方案。
• 兼容 data-ready、data-failed、enter-frame 等 H5 推荐事件写法，避免 camelCase 事件监听警告。
• 说明微信小程序端 path 仅支持 http/https，本地动画需通过 data 传入 JSON 对象。

平台兼容性

uni-app(5.0)

uni-app x(5.0)

其他

c-lottie-x

c-lottie-x 是 c-lottie 的 UTS 原生升级版。App-Android / App-iOS 使用原生 Lottie 播放能力，H5/Web 和微信小程序端继续兼容原 c-lottie 的 renderjs / canvas 实现。

使用示例

<template>
    <view>
        <c-lottie-x
            ref="lottieRef"
            width="750rpx"
            height="750rpx"
            :src="src"
            :loop="true"
            :auto-play="true"
            :is-on-change="true"
            class="lottie-box"
            @data-ready="onLoaded"
            @complete="onComplete"
            @enter-frame="onEnterFrame" />

        <button @click="play" size="mini">播放</button>
        <button @click="pause" size="mini">暂停</button>
        <button @click="stop" size="mini">停止</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 示例使用网络 JSON，保证 H5、App、微信小程序都能直接运行。
            src: 'https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/7b538fb7-d2d5-4524-bf21-6c20e3b5ce6f.json'
        }
    },
    methods: {
        player() {
            return this.$refs.lottieRef
        },
        play() {
            const player = this.player()
            if (player != null && player.play != null) player.play()
        },
        pause() {
            const player = this.player()
            if (player != null && player.pause != null) player.pause()
        },
        stop() {
            const player = this.player()
            if (player != null && player.stop != null) player.stop()
        },
        onLoaded() {
            console.log('lottie loaded')
        },
        onComplete() {
            console.log('lottie complete')
        },
        onEnterFrame(event) {
            console.log(event)
        }
    }
}
</script>

<style>
.lottie-box {
    width: 750rpx;
    height: 750rpx;
}
</style>

Props

Events

Methods

App 原生端推荐使用：

this.$refs.lottieRef.play()
this.$refs.lottieRef.pause()
this.$refs.lottieRef.stop()
this.$refs.lottieRef.releaseAnimation()
this.$refs.lottieRef.setAnimationSpeed(2)
this.$refs.lottieRef.setDirection(-1)
this.$refs.lottieRef.goToAndStop(20, true)
this.$refs.lottieRef.goToAndPlay(500, false)
this.$refs.lottieRef.playSegments([10, 40], true)

H5/Web、微信小程序以及旧版迁移场景推荐使用兼容调用方式：

this.$refs.lottieRef.call('play')
this.$refs.lottieRef.call('pause')
this.$refs.lottieRef.call('stop')
this.$refs.lottieRef.call('setSpeed', [2])
this.$refs.lottieRef.call('goToAndStop', [20, true])

App 原生端不要直接暴露 destroy()、dispose()、load()、setSpeed() 这类容易和 UTS 基类、生命周期或 prop setter 冲突的方法名；请使用 releaseAnimation()、loadAnimation()、setAnimationSpeed()，旧调用可通过 call('destroy')、call('dispose')、call('load')、call('setSpeed') 兼容。

平台说明

App 原生端优先面向 JSON 动画播放和常用控制方法；lottie-web 的全部高级方法不一定都有原生等价实现。需要直接复用旧版 Web API 时，H5/微信小程序端仍可使用 call(name, args)。

微信小程序端的 lottie-miniprogram 仅允许 path 使用 http/https 地址，不支持直接传 /static/...json 这类本地路径。需要本地动画时，请在业务代码里 import / require JSON，再通过 data 传给组件；带图片的 Lottie 建议使用 base64 图片或远程资源，避免小程序包内相对图片路径解析失败。

import animationData from '@/static/lottie/data.json'

export default {
    data() {
        return {
            animationData
        }
    }
}

<c-lottie-x :data="animationData" />