{"id":18938178,"url":"https://github.com/wechat-miniprogram/lottie-miniprogram","last_synced_at":"2025-04-13T00:44:01.308Z","repository":{"id":35072253,"uuid":"203097793","full_name":"wechat-miniprogram/lottie-miniprogram","owner":"wechat-miniprogram","description":"lottie for miniprogram","archived":false,"fork":false,"pushed_at":"2024-05-07T14:53:30.000Z","size":23,"stargazers_count":386,"open_issues_count":15,"forks_count":43,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-13T00:43:56.582Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wechat-miniprogram.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-19T04:24:02.000Z","updated_at":"2025-04-08T03:29:55.000Z","dependencies_parsed_at":"2024-06-18T15:33:09.732Z","dependency_job_id":"7bfb1f9d-8a78-4ff9-8b7b-5d906b28b69e","html_url":"https://github.com/wechat-miniprogram/lottie-miniprogram","commit_stats":{"total_commits":26,"total_committers":5,"mean_commits":5.2,"dds":0.2692307692307693,"last_synced_commit":"f7f17502e08c75b70da0139cbd98e1a53d8ef0f1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Flottie-miniprogram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Flottie-miniprogram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Flottie-miniprogram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Flottie-miniprogram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wechat-miniprogram","download_url":"https://codeload.github.com/wechat-miniprogram/lottie-miniprogram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650419,"owners_count":21139672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T12:13:38.852Z","updated_at":"2025-04-13T00:44:01.278Z","avatar_url":"https://github.com/wechat-miniprogram.png","language":"JavaScript","readme":"# Lottie for MiniProgram\n\n[![](https://img.shields.io/npm/v/lottie-miniprogram)](https://www.npmjs.com/package/lottie-miniprogram)\n[![](https://img.shields.io/npm/l/lottie-miniprogram)](https://github.com/wechat-miniprogram/lottie-miniprogram)\n\nlottie 动画库适配小程序的版本。\n\n\u003e lottie 的相关介绍与动画生成方法等请参考[官方说明](https://github.com/airbnb/lottie-web)\n\n\u003e 依赖小程序基础库版本 \u003e= 2.8.0 的环境\n\n## 使用\n\n可参考该代码片段：[https://developers.weixin.qq.com/s/2TYvm9mJ75bF](https://developers.weixin.qq.com/s/2TYvm9mJ75bF)。大致步骤如下：\n\n1. 通过 npm 安装：\n```\nnpm install --save lottie-miniprogram\n```\n\n2. 传入 canvas 对象用于适配\n```\n\u003ccanvas id=\"canvas\" type=\"2d\"\u003e\u003c/canvas\u003e\n```\n```\nimport lottie from 'lottie-miniprogram'\n\nPage({\n  onReady() {\n    this.createSelectorQuery().select('#canvas').node(res =\u003e {\n      const canvas = res.node\n      lottie.setup(canvas)\n    }).exec()\n  }\n})\n```\n\n3. 使用 lottie 接口\n```\nlottie.setup(canvas)\nthis.ani = lottie.loadAnimation({\n  ...\n})\nthis.ani.destroy() // 页面退出需销毁\n```\n\n## 接口\n\n目前提供两个接口：\n\n#### lottie.setup(canvas)\n需要在任何 lottie 接口调用之前调用，传入 canvas 对象\n\n#### lottie.loadAnimation(options)\n与原来的 [loadAnimation](https://github.com/airbnb/lottie-web/wiki/loadAnimation-options) 有些不同，支持的参数有：\n* loop\n* autoplay\n* animationData\n* path （只支持网络地址）\n* rendererSettings.context （必填）\n\n## 说明\n* 本项目是以 npm 的方式依赖原 lottie-web 项目，若原项目有新版本，可直接改变依赖的版本号。\n* 本项目依赖小程序基础库 2.8.0 里性能更好的 canvas 实现，由于还有些小问题~~没有正式开放~~（2.9.0 已正式对外），但目前用在此处暂无发现问题。\n* 由于小程序本身不支持动态执行脚本，因此 lottie 的 expression 功能也是不支持的。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwechat-miniprogram%2Flottie-miniprogram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwechat-miniprogram%2Flottie-miniprogram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwechat-miniprogram%2Flottie-miniprogram/lists"}