百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

「更新」微信小程序 Lottie 动画组件 lottiejs-miniapp V1.1.0 发布

yund56 2025-07-20 07:14 18 浏览

lottiejs-miniapp 当前版本号: 1.1.0

npm 地址:

https://www.npmjs.com/package/lottiejs-miniapp

npm 安装:

npm i lottiejs-miniapp


lottiejs-miniapp 是一款在微信小程序中实现 Lottie 动画的功能模块,由“动效网”打包发布,会持续与lottie-web 新版本进行同步更新。

lottie 的相关介绍与动画生成方法等请参考官方说明
https://github.com/airbnb/lottie-web

依赖微信小程序基础库版本 >= 2.8.0 的环境

lottiejs-miniapp 依赖 lottie-web 项目,并且版本号与其保持同步

当前使用的 lottie-web 版本号为: 5.8.1

lottiejs-miniapp 项目主要是参考了 lottie-miniprogram 项目,在其基础上进行优化后重新打包发布。
https://github.com/wechat-miniprogram/lottie-miniprogram

lottiejs-miniapp案例预览

请在微信中搜索“动效”小程序查看。


使用

  1. 通过 npm 安装:
npm install --save lottiejs-miniapp
  1. 在页面中预先添加 canvas 对象用于适配
<canvas id="lottiejs-canvas" canvas-id="lottiejs-canvas" type="2d"></canvas>
  1. js中使用如下代码进行动画的加载(示例代码)
import * as lottie from 'lottiejs-miniapp'


Page({
  onReady() {
    wx.createSelectorQuery().select('#lottiejs-canvas').node(res => {
      const canvas = res.node;
      const context = canvas.getContext('2d');


      canvas.width = 300;
      canvas.height = 300;


      lottie.setup(canvas);
      lottie.loadAnimation({
        loop: true,
        autoplay: true,
        //animationData: animationData,
        path: lottie_json_path,
        rendererSettings: {
          context,
        },
      });
    }).exec()
  }
})


或者

import * as lottie from 'lottiejs-miniapp'


Page({
  onReady() {
    wx.createSelectorQuery().select('#lottiejs-canvas').fields({node: true, size: true}).exec(res => {
    const canvas = res[0].node;
    const ctx = canvas.getContext('2d');


    const dpr = wx.getSystemInfoSync().pixelRatio;
    canvas.width = res[0].width * dpr;
    canvas.height = res[0].height * dpr;
    ctx.scale(dpr, dpr);


    lottie.setup(canvas);
    lottie.loadAnimation({
      loop: true,
      autoplay: true,
      //animationData: animationData,
      path: lottie_json_path,
      rendererSettings: {
        context: ctx,
      },
    });
  });
  }
})


  1. Lottie 动效背景颜色 可以通过对 canvas 组件设置 background-color 背景颜色的方式,实现对 Lottie 动效背景颜色的设置。


接口

目前提供两个接口:

lottie.setup(canvas)

需要在任何 lottie 接口调用之前调用,传入 canvas 对象

lottie.loadAnimation(options)

与原来的 loadAnimation 有些不同,支持的参数有:

  • loop
  • autoplay
  • animationData
  • path (只支持网络地址)
  • rendererSettings.context (必填)

使用方式:

lottie.setup(canvas)
lottie.loadAnimation({
  ...
})

说明

  • 本项目是以 npm 的方式依赖原 lottie-web 项目,若原项目有新版本,我们会尽快同步 lottie-web 新版本,并发布新版 lottiejs-miniapp。
  • 本项目依赖小程序基础库 2.8.0 里性能更好地 canvas 实现,支持 canvas 2d。
  • 由于小程序本身不支持动态执行脚本,因此 lottie 的 expression 功能也是不支持的。
  • 更多问题,请关注微信公众号 “动效网” 查询。

相关推荐

SM小分队Girls on Top,女神战队少了f(x)?

这次由SM娱乐公司在冬季即将开演的smtown里,将公司的所有女团成员集结成了一个小分队project。第一位这是全面ACE的大姐成员权宝儿(BoA),出道二十年,在日本单人销量过千万,韩国国内200...

韩国女团 aespa 首场 VR 演唱会或暗示 Quest 3 将于 10 月推出

AmazeVR宣布将在十月份举办一场现场VR音乐会,观众将佩戴MetaQuest3进行体验。韩国女团aespa于2020年11月出道,此后在日本推出了三张金唱片,在韩国推出了...

韩网热议!女团aespa成员Giselle在长腿爱豆中真的是legend

身高163的Giselle,长腿傲人,身材比例绝了...

假唱而被骂爆的女团:IVE、NewJeans、aespa上榜

在韩国,其实K-pop偶像并不被认为是真正的歌手,因为偶像们必须兼备舞蹈能力、也经常透过对嘴来完成舞台。由于科技的日渐发达,也有许多网友会利用消音软体来验证K-pop偶像到底有没有开麦唱歌,导致假唱这...

新女团Aespa登时尚大片 四个少女四种style

来源:环球网

韩国女团aespa新歌MV曝光 画面梦幻造型超美

12月20日,韩国女团aespa翻唱曲《DreamsComeTrue》MV公开,视频中,她们的造型超美!WINTER背后长出一双梦幻般的翅膀。柳智敏笑容甜美。宁艺卓皮肤白皙。GISELLE五官精致...

女网友向拳头维权,自称是萨勒芬妮的原型?某韩国女团抄袭KDA

女英雄萨勒芬妮(Seraphine)是拳头在2020年推出的第五位新英雄,在还没有正式上线时就备受lsp玩家的关注,因为她实在是太可爱了。和其他新英雄不同的是,萨勒芬妮在没上线时就被拳头当成虚拟偶像来...

人气TOP女团是?INS粉丝数见分晓;TWICE成员为何在演唱会落泪?

现在的人气TOP女团是?INS粉丝数见分晓!现在爱豆和粉丝之间的交流方法变得多种多样,但是Instagram依然是主要的交流手段。很多粉丝根据粉丝数评价偶像的人气,拥有数百、数千万粉丝的组合作为全球偶...

韩国女团MVaespa Drama MV_韩国女团穿超短裙子跳舞

WelcometoDrama.Pleasefollow4ruleswhilewatchingtheDrama.·1)Lookbackimmediatelywhenyoufe...

aespa师妹团今年将出道! SM职员亲口曝「新女团风格、人数」

记者刘宛欣/综合报导南韩造星工厂SM娱乐曾打造出东方神起、SUPERJUNIOR、少女时代、SHINee、EXO等传奇团体,近年推出的aespa、RIIZE更是双双成为新生代一线团体,深受大众与粉丝...

南韩最活跃的女团aespa,新专辑《Girls》即将发布,盘点昔日经典

女团aespa歌曲盘点,新专辑《Girls》即将发布,期待大火。明天也就是2022年的7月8号,aespa新专辑《Girls》即将发行。这是继首张专辑《Savage》之后,时隔19个月的第二张专辑,这...

章泽天女团aespa出席戛纳晚宴 宋康昊携新片亮相

搜狐娱乐讯(山今/文玄反影/图科明/视频)法国时间5月23日晚,女团aespa、宋康昊、章泽天等明星亮相戛纳晚宴。章泽天身姿优越。章泽天肩颈线优越。章泽天双臂纤细。章泽天仪态端正。女团aespa亮...

Aespa舞台暴露身高比例,宁艺卓脸大,柳智敏有“TOP”相

作为SM公司最新女团aespa,初舞台《BlackMamba》公开,在初舞台里,看得出来SM公司是下了大功夫的,虽然之前SM公司新出的女团都有很长的先导片,但是aespa显然是有“特殊待遇”。运用了...

AESPA女团成员柳智敏karina大美女

真队内速度最快最火达成队内首个且唯一两百万点赞五代男女团中输断层第一(图转自微博)...

对来学校演出的女团成员语言性骚扰?韩国这所男高的学生恶心透了

哕了……本月4日,景福男子高中相关人士称已经找到了在SNS中上传对aespa成员进行性骚扰文章的学生,并开始着手调查。2日,SM娱乐创始人李秀满的母校——景福高中迎来了建校101周年庆典活动。当天,S...