[移动开发]关于uniapp之Lottie使用renderjs渲染

在前几天工作开发uniapp中，遇到一个前端难以解决的问题。项目中要用到Lottie.js来进行渲染复杂的游戏动画，当然以前从来没用过Lottie。Lottie是支持安卓，ios ，react native,和web。我想这应该是外国人做的玩意。居然没有专门针对uniapp混合开发的解决方案，那就开始找解决方案！

1.第一步当然是去插件市场找

插件市场有很多优秀的原生插件，这意味着我可以直接使用吗！nonono

我在这里不推荐原生插件有几个原因

1.市场里有的支持ios,安卓的原生插件，都是需要自定义基座调试，对于使用动画较多的应用是很不友好的。

2.市场里原生插件并不支持json文件里使用外部图片进行动画。亲测多个插件

3.并不知道会不会出现其他异常bug

2.第二步开始自己找方法

1.Lottie支持web渲染，在html里引用lottie是没啥问题的。

2.来看uniapp官方文档

renderjs

renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。

renderjs的主要作用有2个：

• 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
• 在视图层操作dom，运行for web的js库

3.方法找到，开干，上代码

<view @click="renderScript.emitData" class="renderjs" id="renderjs-view" v-show='!lottieshow'>
</view> //如果要切换显示最好用v-show,否则则要重新创建lottie
<view v-show = 'lottieshow'></view>
<script>
	export default {
		data() {
			return {
                lottieshow：false
			}
		},
		onShow() {
		},
		methods: {
            Indexemit（）{
                this.lottieshow = true

            }
		}
	}
</script>
<script module="renderScript" lang="renderjs">
	import * as animationData from "../../static/assets/sixs_splash_m.json"
	import lottie from 'lottie-web'
	export default {
		data() {
			return {
				name: 'render-vm',

			}
		},
		mounted() {
			const script = document.createElement('script')
			script.src = lottie
			document.head.appendChild(script)
			script.onload = this.ready()
		},
		methods: {
			ready() {
				 var params = {
					container: document.getElementById('renderjs-view'),
					renderer: 'svg',
					loop: true, //是否循环播放
					autoplay: true, //是否自动播放
					animationData: animationData // 加载json的文件名
				}
				var anim
				anim = lottie.loadAnimation(params); // 加载
				anim.addEventListener('complete', () => {
					this.$ownerInstance.callMethod('Indexemit', {
						destroy: true
					})//传递响应事件，这里是播放完成自动销毁，我这里是开屏动画，用完直接销毁
					anim.destroy();
				});

			},
			// 接收逻辑层发送的数据
			receiveMsg(newValue, oldValue, ownerVm, vm) {
				console.log('newValue', newValue)
				console.log('oldValue', oldValue)
				console.log('ownerVm', ownerVm)
				console.log('vm', vm)
			},
			// 发送数据到逻辑层
			emitData(e, ownerVm) {
				ownerVm.callMethod('receiveRenderData', this.name)
			}
		}
	};
</script>