uniapp中使用svga动画

最新推荐文章于 2026-03-20 00:26:19 发布

原创

最新推荐文章于 2026-03-20 00:26:19 发布 · 6.6k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了SVGA动画格式及其在跨平台开发中的应用，特别是在uniapp平台上的实现。通过uniapp的lime-svga插件，详细展示了如何在onReady生命周期中加载和播放SVGA动画，包括设置动画循环、缩放模式、监听进度等操作。此外，还列举了动画播放的相关API，如设置播放次数、内容模式、动画监听等。

1、首先什么是svga动画
SVGA（http://svga.io/index.html）是一种跨平台的开源动画格式，同时兼容 iOS / Android / Flutter / Web。
SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。
更直观的svga动画可以看直播间内老铁给主播刷礼物的特效

这里提供一个SVGA动画预览网站
需要本地svga文件拖入，即可查看动画效果

2、本次开发需求是基于uniapp平台，所以在此记录
uniapp插件市场提供了一个 lime-svga 插件 (https://ext.dcloud.net.cn/plugin?id=8134)
按照插件使用方法，一般推荐使用方法二
使用步骤如下：

<view class="content" style="height: 750rpx">
    <l-svga ref="svga"></l-svga>
</view>

需要给容器设置高度，不然动画会显示不出来

在 onReady 生命周期里获取svga容器对象

this.$refs.svga.render(async (parser, player) => {
    const videoItem = await parser.load("https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/static/angel.svga");
    await player.setVideoItem(videoItem);

标签

#动画