n-lottie 动画

Lottie动画，通过读取json文件信息实现动画效果。
在NVUE的app使用的是官方animation-view组件(注：暂未兼容实现，可自行引用)，其他端使用的是Lottie库

平台兼容性

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

示例代码：

<n-lottie></n-lottie>

API

属性

参数	说明	类型	默认值	可选值
path	动画资源地址 支持本地路径和网络路径(小程序需要授信白名单) 注： >百度小程序平台path属性目前不支持远程地址，仅支持本地绝对路径）; >微信小程序平台path的本地路径（import.meta.glob），只是为了API保持和官方的animation-view统一，尽量使用animationData，因为不能全路径动态加载文件，导致使用很鸡肋，如果实在要用，需要把文件放到项目根目录static下，path="@/static/文件.json"	String	String	-
animationData	动画JSON，优先级高于path	Object	-	-
loop	动画是否循环播放	Boolean	false	true
autoplay	动画是否自动播放	Boolean	true	false
action	动画操作	String	play	play/pause/stop
hidden	是否隐藏动画	Boolean	true	false
width	动画容器宽度	String	300px	-
height	动画容器高度	String	300px	-

事件

事件名	说明	回调参数	版本
bindended	当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发）	-	-

方法

兼容Lottie的所有方法

//引用
<n-lottie ref="lottie" path="@/static/empty.json" width="100px"></n-lottie>
//直接使用Lottie对象
this.$refs.lottie.aniMp.goToAndPlay(0)

开发心得

小程序端Lottie

使用的是lottie-miniprogram

• 安装：在空白目录下，执行npm install --save lottie-miniprogram
• 获取文件：在lottie-miniprogram\miniprogram_dist中得到index.js和index.d.ts文件，本组件取用的是index.js
• 修改：对index.js进行文件格式化，在文件结尾进行导出export default module.exports;
• 解决警告：此时会提示Use of eval in...is strongly discouraged as it poses security risks and may cause issues with minification，则须在文件开头处添加如下代码

function nEvil(fn) {
	var Fn = Function;
	return new Fn('return ' + fn)();
}
function nEvilExecute(fn) {
	var Fn = Function;
	return new Fn('return ' + fn)()();
};
//搜索'eval('并使用如上方法进行替换
//第一处：
if (data.xf) {
	var i, len = data.xf.length;
	for (i = 0; i < len; i += 1) __expression_functions[i] = eval(
		"(function(){ return " + data.xf[i] + "}())")
}
//替换成：  
if (data.xf) {
	var i, len = data.xf.length;
	for (i = 0; i < len; i += 1) __expression_functions[i] =
		nEvilExecute("function execute(){ return " + data.xf[i] + "}")
}
//第二处：
var expression_function = eval("[function _expression_function(){" +
	val + ";scoped_bm_rt=$bm_rt}]")[0],
	
//替换成：
var expression_function = nEvil("function _expression_function(){" +
	val + ";scoped_bm_rt=$bm_rt}"),

APP端Lottie

使用的是lottie-web 在安卓真机上未出现问题可直接使用