lottiejs-miniapp
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    微信小程序 Lottie 动画库

    lottiejs-miniapp 是一款在微信小程序中实现 Lottie 动画的功能模块。

    lottie 的相关介绍与动画生成方法等请参考官方说明

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

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

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

    使用

    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: that.lottie,
    				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: that.lottie_json,
    			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 功能也是不支持的。
    • 更多问题,请关注微信公众号 “动效网” 查询。

    Install

    npm i lottiejs-miniapp

    DownloadsWeekly Downloads

    6

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    1.37 MB

    Total Files

    12

    Last publish

    Collaborators

    • jzsjiale