v1.0.0-beta 源码正式开源

2026-06-12 13:19:31 +08:00 · 2022-12-06 15:08:29 +08:00
commit 636ae7b169
461 changed files with 116817 additions and 0 deletions
@@ -0,0 +1,210 @@
+<template>
+	<view :key="cKey" class="tm-lottie flex-center">
+		<!-- #ifndef H5 -->
+
+		<canvas :style="{ width: w_w + 'px', height: h_h + 'px' }" id="cid" canvas-id="cid" class="cid"></canvas>
+		<!-- #endif -->
+		<!-- #ifdef H5 -->
+
+		<canvas :style="{ width: w_w + 'px', height: h_h + 'px' }" :id="cuid" :canvas-id="cuid"></canvas>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+import lottie from 'tm-vuetify/tool/function/lottie.js';
+export default {
+	name: 'tm-lottie',
+	props: {
+		width: {
+			type: Number | String,
+			default: 420
+		},
+		height: {
+			type: Number | String,
+			default: 420
+		},
+		url: {
+			type: String||Object,
+			default: ()=>{
+				return "";
+			}
+		},
+		loop: {
+			type: Boolean,
+			default: true
+		},
+		autoplay: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		w_w: function() {
+			return uni.upx2px(this.width);
+		},
+		h_h: function() {
+			return uni.upx2px(this.height);
+		}
+	},
+	data() {
+		return {
+			cuid: 'cid',
+			cKey: ''
+		};
+	},
+	created() {
+		// #ifdef H5
+		this.cuid = this.$tm.guid();
+		// #endif
+		this.cKey = this.$tm.guid();
+	},
+	destroyed() {
+		// 释放内存。
+		lottie.destroy()
+	},
+	async mounted() {
+		if (this.url) {
+			this.$nextTick(async function() {
+				await this.LoadLottiePlay_Mp();
+			});
+		}
+	},
+	methods: {
+		async LoadLottiePlay_Mp(url) {
+			const canvasContext = uni.createCanvasContext(this.cuid, this);
+			// #ifdef MP-WEIXIN || MP-ALIPAY
+			// let canvas = await this.getNodeCanvasNodeRef();
+			// console.log(canvas);
+			
+			// #endif
+			//  请求到的lottie json数据
+			let animationData=null
+			// 请求lottie的路径。注意开启downloadFile域名并且返回格式是json
+			const animationPath = url || this.url;// url || this.url
+			if(typeof animationPath ==='string'&&animationPath!=''){
+				let p = await this.rloadJson(animationPath).catch(e=>{
+					uni.$tm.toast(JSON.stringify(e));
+				})
+				animationData = JSON.parse(p.data.data)
+				
+			}else{
+				animationData = url;
+				console.log(animationData)
+			}
+			if(!animationData) return;
+			
+			// 指定canvas大小
+			canvasContext.canvas = {
+				width: this.w_w,
+				height: this.h_h
+			};
+			try {
+				// 如果同时指定 animationData 和 path， 优先取 animationData
+				lottie.loadAnimation({
+					renderer: 'canvas', // 只支持canvas
+					loop: this.loop,
+					autoplay: this.autoplay,
+					animationData: animationData,
+					path: '',
+					rendererSettings: {
+						context: canvasContext,
+						clearCanvas: true
+					}
+				});
+			} catch (e) {
+				console.log(e);
+			}
+		},
+		//mp alipay
+		getNodeCanvasNodeRef(){
+			return new Promise((resolve,reject)=>{
+				const query = uni.createSelectorQuery().in(this)
+				query
+				.select('.cid')
+				.fields({ node: true, size: true })
+				.exec(res => {
+					console.log(res);
+				  const canvasNode = res[0].node
+				  const canvasDpr = uni.getSystemInfoSync().pixelRatio
+				  const canvasWidth = res[0].width
+				  const canvasHeight = res[0].height
+				  const ctx = canvasNode.getContext('2d')
+				  resolve(ctx,{dpr:canvasDpr,width:canvasWidth,height:canvasHeight,node:canvasNode});
+				})
+			})
+		},
+		async LoadLottiePlay_H5(url) {
+			const canvasContext = uni.createCanvasContext(this.cuid, this);
+		
+			//  请求到的lottie json数据
+			let animationData=null
+			// 请求lottie的路径。注意开启downloadFile域名并且返回格式是json
+			const animationPath = url || this.url;// url || this.url
+			
+			
+			// 指定canvas大小
+			canvasContext.canvas = {
+				width: this.w_w,
+				height: this.h_h
+			};
+			try {
+				// 如果同时指定 animationData 和 path， 优先取 animationData
+				lottie.loadAnimation({
+					renderer: 'canvas', // 只支持canvas
+					loop: this.loop,
+					autoplay: this.autoplay,
+					animationData: '',
+					path: animationPath,
+					rendererSettings: {
+						context: canvasContext,
+						clearCanvas: true
+					}
+				});
+			} catch (e) {
+				console.log(e);
+			}
+		},
+		play() {
+			lottie.play();
+		},
+		stop() {
+			lottie.stop();
+		},
+		pause() {
+			lottie.pause();
+		},
+		rloadJson(url){
+			
+			return new Promise((res,rej)=>{
+				
+				uni.request({
+					responseType:'json',
+					url:url,
+					success: (v) => {
+						
+						res(v)
+					},
+					fail: (e) => {
+						console.log(e);
+						rej(e)
+					}
+				})
+			})
+		},
+		// type:1正向播放，-1反向
+		setDirection(type = 1) {
+			lottie.setDirection(type);
+		},
+		async registerAnimation(url) {
+			if (!url) return;
+			lottie.destroy();
+			this.cKey = this.$tm.guid();
+			await this.LoadLottiePlay_Mp(url);
+			lottie.resize();
+		}
+	}
+};
+</script>
+
+<style lang="scss"></style>