lottie 动画播放

注意：

lottie官网: http://airbnb.io/lottie/#/README

lottiefiles文件:https://lottiefiles.com/featured

一.小程序开发，使用 lottiejs-miniapp 实现 Lottie 动画的播放

参考https://developers.weixin.qq.com/community/develop/article/doc/000e2c86aa0ab058465d67e9452013

1.打开 HBuilderX 工具，新建一个 lottiejs-miniapp-demo 项目：**

2.在命令行窗口执行命令，初始化 npm 项目：

npm install
//或者用yarn
yarn 

3.安装 lottiejs-miniapp 组件：

npm i lottiejs-miniapp
//yarn安装--这个命令不太确定
yarn add lottiejs-miniapp

4.安装完 lottiejs-miniapp 组件后，我们可以发现在项目目录下多出了一个 node_modules 文件夹，里面将包含 lottiejs-miniapp

5.程序开发

5.1打开** pages/index/index.vue **文件

5.2.在 中 加入 组件

5.3 在 中引入 lottiejs-miniapp ：

import * as lottie from 'lottiejs-miniapp'

5.4 在 export default 中引入 onReady() 并添加如下代码：

说明：

① path (json 线上地址) 执行path: ‘https://assets9.lottiefiles.com/packages/lf20_CZva9peGiW.json’,

②animationData (json本地地址)

如果用本地路径执行 animationData: json

import json from'./active.json'

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: json,path: 'https://assets9.lottiefiles.com/packages/lf20_CZva9peGiW.json',//json地址例子rendererSettings: {context: ctx,},});});

二.利用lottie-web实现H5动画效果

参考https://zhuanlan.zhihu.com/p/103666502

1.安装插件

npm install lottie-web

2.在template里写标签

3.在 中引入 lottie-web ：

import lottieWeb from 'lottie-web';

4.onReady里面使用

lottieWeb.loadAnimation({container:document.querySelector('.lottie-web'),renderer: 'svg',loop: true,autoplay: true,animationData:json,//上面小程序引入过了//path:'',
});

三.H5与miniapp综合

注意如果想要综合使用得结合

// #ifdef MP-WEIXIN
//小程序代码
// #endif
// #ifdef H5
//H5代码
// #endif