lottie在vue中的详细使用（网络图片）

比眉伴天荒 2021-10-19 09:40 945阅读 0赞

此文章分三段代码 ，main.js中不需要操作

下面代码可以直接复制进行使用

引入npm ：  npm install lottie-web

p：图片路径，这里我改成了网络图片，删掉了 ‘u’的参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70][]

#  1.app.vue #

<template>
    	<div id="app">
    		<transition name="fade">
    			<section class="container">
    				<lottie :options="defaultOptions" :height="400" :width="100 + '%'" v-on:animCreated="handleAnimation"/>
    				<div class="img-box">
    					<img class="img-guest" src="https://img.cdn.zhaoshang800.com/img/2019/08/19/broker/261b8a9f3ccf7091a82ce230546f20b8.jpg" />
    					<img class="img-making" src="https://img.cdn.zhaoshang800.com/img/2019/08/19/broker/c81e728d9d4c2f636f067f89cc14862c.jpg" />
    				</div>
    				<div class="btn-card" :class="{ 'card-isX' : isIphoneX == 'isX' }">
    					<div>我的</div>
    					<div>名片</div>
    				</div>
    				<div class="btn-bottom" :class="{ 'footer-isX' : isIphoneX == 'isX' }">
    					<button class="btn-making" @click="copyAction">制作名片入口</button>
    					<button class="btn-guest" @click="shareAction">网络获客</button>
    				</div>
    			</section>
    		</transition>
    	</div>
    </template>
    
    <script>
    	import Lottie from './lottie.vue';
    	import animationData from './common/data.json' // 引入json文件
    	import Global from './common/global';
    	export default {
    		components: {
    	　　　　'lottie': Lottie
    	　　},
    		data() {
    			return {
    				ua:Global.config.ua, 
    				myData : {
    					"token":''
    				},
    				isIphoneX: Global.config.isIPhoneX(),
    				userCode:'',   
    				copyBtn: null, //存储初始化复制按钮事件
    				// defaultOptions: {animationData: animationData.default},
    				defaultOptions: {
    	　　　　　　　　animationData: animationData,
    	　　　　　　　　autoplay: false,
    	　　　　　　　　loop: false　
    	　　　　　　},
    				defaultAnim:''
    			}
    		},
    		created() {
    			console.log('animationData',animationData)
    			console.log('Lottie',Lottie)
    			const _this = this;
    			console.log(Global.config.ua)
    			if (Global.config.hb.hbenv === "ios" || Global.config.hb.hbenv === "android") {
    				setTimeout(function() {
    					document.addEventListener("deviceready", function() {
    						isLoaded();
    					});
    				}, 0)
    			} else {
    				
    			}
    			var isLoaded = function() {
    				if (Global.config.hb.req !== undefined) {
    					initHB();
    				} else {
    					setTimeout(function() {
    						isLoaded();
    					}, 10)
    				}
    			}
    			
    			var initHB = function(){
    				Global.config.hb.req.send("getUserInfo", {}, function(data){
    					if(data.token) {
    						_this.myData.token = data.token;
    						_this.getCode(data.token);
    					}else{
    						initHB();
    					}
    				},"getLocalData");
    			}
    		},
    		mounted() {
    			
    		},
    		methods: {
    			handleAnimation: function (anim) {
    			    this.anim = anim;
    				console.log(anim); //这里可以看到 lottie 对象的全部属性
    				this.anim.play();
    			},
    			copyAction() {
    				const _this = this;
    				let clipboard = _this.copyBtn;
    				clipboard.on('success', function() {
    					clipboard.destroy()
    					_this.copyBtn = new _this.clipboard(_this.$refs.copy);
    				});
    				clipboard.on('error', function() {
    					clipboard.destroy();
    					_this.copyBtn = new _this.clipboard(_this.$refs.copy);
    				});
    			 },
    			shareAction(){
    				const _this = this;
    				_this.getData(_this.myData).then((res)=>{
    					if(res){
    						Global.config.hb.req.send("share", {url :`https://app.zhaoshang800.com/pages/findAppDownload/index.htm?userCode=${_this.userCode}`,title:"选址易，让企业选址更容易",content:"找厂房、写字楼、土地，专业企业选址服务",logo:"https://img.cdn.zhaoshang800.com/img/2019/03/07/broker/fa81273c-51f2-4442-923e-69c4075e2989.jpg"},function(data){
    						// console.log(data)
    						},"nativeAction");
    					}
    				});
    			},
    			getCode(params) {
    				const _this = this;
    				let par = {
    					'token':params
    				}
    				return _this.$http.post('/activity/broker/qrcode/get', par).then((res) => {
    					if (res.data.code == 200 && res.data.data) {
    						let data = res.data.data;
    						_this.userCode = data.invitateCode || "";	
    						return res.data.code;
    					} else {
    						return res.data.code;
    					}
    				})
    			},
    			getData(params) {
    				const _this = this;
    				return _this.$http.post('/activity/share/add', params).then((res) => {
    					if (res.data.code == 200 && res.data.data) {
    						return res.data.code;
    					} else {
    						return res.data.code;
    					}
    				})
    			},
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	@function px2rem($px) {
    		$rem: 75px;
    		@return ($px/$rem)+rem;
    	}
    	
    	.container {
    		height: 100%;
    		overflow-y: scroll;
    		input{
    			-webkit-appearance: none;
    		}
    		.img-box{
    			padding-bottom: 2rem;
    			.img-guest,.img-making{
    				width: 100%;
    			}
    		}
    		.btn-card{
    			width: 1.6rem;
    			height: 1.2rem;
    			position: fixed;
    			right: 0;
    			bottom: 3.5rem;
    			color: #FFFFFF;
    			background: #F88A33;
    			display: flex;    
    			flex-direction: column;
    			justify-content: center;
    			align-items: center;
    			padding-left: 0.2rem;
    			box-shadow: 0 0.1rem 0.15rem 0 rgba(220,101,7,0.20);
    			border-top-left-radius: 0.6rem;
    			border-bottom-left-radius: 0.6rem;
    			box-sizing: border-box;
    		}
    		.btn-bottom{
    			width: 100%;
    			height: 2rem;
    			padding: 0.4rem;
    			position: fixed;
    			bottom: 0;
    			background: #FFFFFF;
    			box-sizing: border-box;
    			display: flex;
    			justify-content: space-between;
    			.btn-making{
    				width: 6rem;
    				height: 1.2rem;
    				background: #F88A33;
    				color: #FFFFFF;
    				font-size: 0.24rem;
    				border-radius: 0.13rem;
    			}
    			.btn-guest{
    				width: 2.8rem;
    				height: 1.2rem;
    				background: #FFFFFF;
    				color: #F88A33;
    				font-size: 0.24rem;
    				border: 1px solid #F88A33;
    				border-radius: 0.13rem;
    			}
    		}
    		.card-isX{
    			bottom: 4.1rem;
    		}
    		.footer-isX{
    			height: 2.6rem;
    			padding-bottom: 0.8rem;
    		}
    	}
    </style>

# 2.lottie.vue #

<template>
        <div :style="style" ref="lavContainer"></div>
    </template>
    
    <script>
      import lottie from 'lottie-web';
      export default {
        props: {
          options: {
            type: Object,
            required: true
          },
          height: Number,
          width: Number,
        },
        data () {
          return {
            style: {
              width: this.width ? `${this.width}px` : '100%',
              height: this.height ? `${this.height}px` : '100%',
              overflow: 'hidden',
              margin: '0 auto'
            }
          }
        },
        mounted () {
          this.anim = lottie.loadAnimation({
              container: this.$refs.lavContainer,
              renderer: 'svg',
              loop: this.options.loop !== false,
              autoplay: this.options.autoplay !== false,
              animationData: this.options.animationData,
              rendererSettings: this.options.rendererSettings
            }
          );
          this.$emit('animCreated', this.anim)
        }
      }
    </script>

# 3.data.json #

{
    	"v": "5.5.3",
    	"fr": 30,
    	"ip": 0,
    	"op": 200,
    	"w": 750,
    	"h": 886,
    	"nm": "落地页插画 2",
    	"ddd": 0,
    	"assets": [{
    		"id": "image_0",
    		"w": 265,
    		"h": 193,
    		"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/fa24b569ec94b3faefa83ae307d65bf8.png",
    		"e": 0
    	}, {
    		"id": "image_1",
    		"w": 432,
    		"h": 40,
    		"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/49cc2e9f6ab373ff703c7dc06885c873.png",
    		"e": 0
    	}, {
    		"id": "image_2",
    		"w": 564,
    		"h": 288,
    		"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/f14e6f1a355519ff566fab7bb1b557c4.png",
    		"e": 0
    	}, {
    		"id": "image_3",
    		"w": 374,
    		"h": 39,
    		"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/26dfdefeb2cfa635551f2ff3c45cc95e.png",
    		"e": 0
    	}, {
    		"id": "image_4",
    		"w": 564,
    		"h": 288,
    		"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/9e9cd3f79cf1a7fb61c354a07ef8fe8b.png",
    		"e": 0
    	}, {
    		"id": "image_5",
    		"w": 446,
    		"h": 38,
    		"p": "https://img.cdn.zhaoshang800.com/img/2019/08/20/broker/3a9062813f80ff078fbd516894116d26.png",
    		"e": 0
    	}, {
    		"id": "image_6",
    		"w": 564,
    		"h": 288,
    		"u": "images/",
    		"p": "img_6.png",
    		"e": 0
    	}, {
    		"id": "image_7",
    		"w": 878,
    		"h": 887,
    		"u": "images/",
    		"p": "img_7.png",
    		"e": 0
    	}, {
    		"id": "comp_0",
    		"layers": [{
    			"ddd": 0,
    			"ind": 2,
    			"ty": 2,
    			"nm": "车 拷贝",
    			"refId": "image_0",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 0,
    					"k": 100,
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 1,
    					"k": [{
    						"i": {
    							"x": 0.833,
    							"y": 0.833
    						},
    						"o": {
    							"x": 0.167,
    							"y": 0.167
    						},
    						"t": 190,
    						"s": [376.5, 607.5, 0],
    						"to": [0, -5.667, 0],
    						"ti": [0, 5.667, 0]
    					}, {
    						"t": 199,
    						"s": [376.5, 573.5, 0]
    					}],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [132.5, 96.5, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"ip": 0,
    			"op": 202,
    			"st": 0,
    			"bm": 0
    		}, {
    			"ddd": 0,
    			"ind": 5,
    			"ty": 0,
    			"nm": "就藏在你的网络获客列表",
    			"refId": "comp_1",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 0,
    					"k": 100,
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 0,
    					"k": [375, 443, 0],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [375, 443, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"w": 750,
    			"h": 886,
    			"ip": 0,
    			"op": 170,
    			"st": 0,
    			"bm": 0
    		}, {
    			"ddd": 0,
    			"ind": 6,
    			"ty": 0,
    			"nm": "对话2",
    			"refId": "comp_2",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 0,
    					"k": 100,
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 0,
    					"k": [375, 443, 0],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [375, 443, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"w": 750,
    			"h": 886,
    			"ip": 0,
    			"op": 180,
    			"st": 0,
    			"bm": 0
    		}, {
    			"ddd": 0,
    			"ind": 7,
    			"ty": 0,
    			"nm": "对话1",
    			"refId": "comp_3",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 0,
    					"k": 100,
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 0,
    					"k": [375, 443, 0],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [375, 443, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"w": 750,
    			"h": 886,
    			"ip": 0,
    			"op": 170,
    			"st": 0,
    			"bm": 0
    		}, {
    			"ddd": 0,
    			"ind": 8,
    			"ty": 2,
    			"nm": "背景 拷贝",
    			"refId": "image_7",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 0,
    					"k": 100,
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 0,
    					"k": [401, 442.5, 0],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [439, 443.5, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"ip": 0,
    			"op": 202,
    			"st": 0,
    			"bm": 0
    		}, {
    			"ddd": 0,
    			"ind": 11,
    			"ty": 0,
    			"nm": "城市 拷贝",
    			"refId": "comp_4",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 0,
    					"k": 100,
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 0,
    					"k": [375, 443, 0],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [375, 443, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"w": 750,
    			"h": 886,
    			"ip": 0,
    			"op": 80,
    			"st": 0,
    			"bm": 0
    		}]
    	}, {
    		"id": "comp_1",
    		"layers": [{
    			"ddd": 0,
    			"ind": 1,
    			"ty": 2,
    			"nm": "就藏在你的网络获客列表中",
    			"refId": "image_1",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 1,
    					"k": [{
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 60,
    						"s": [0]
    					}, {
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 67,
    						"s": [100]
    					}, {
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 102,
    						"s": [100]
    					}, {
    						"t": 120,
    						"s": [0]
    					}],
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 0,
    					"k": [424, 252, 0],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [216, 20, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"hasMask": true,
    			"masksProperties": [{
    				"inv": false,
    				"mode": "a",
    				"pt": {
    					"a": 1,
    					"k": [{
    						"i": {
    							"x": 0.833,
    							"y": 0.833
    						},
    						"o": {
    							"x": 0.167,
    							"y": 0.167
    						},
    						"t": 50,
    						"s": [{
    							"i": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"o": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"v": [
    								[-0.719, -20],
    								[-17, -21],
    								[-17, 59.629],
    								[-0.719, 60.629]
    							],
    							"c": true
    						}]
    					}, {
    						"t": 85,
    						"s": [{
    							"i": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"o": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"v": [
    								[447.281, -18],
    								[-17, -21],
    								[-17, 59.629],
    								[447.281, 62.629]
    							],
    							"c": true
    						}]
    					}],
    					"ix": 1
    				},
    				"o": {
    					"a": 0,
    					"k": 100,
    					"ix": 3
    				},
    				"x": {
    					"a": 0,
    					"k": 0,
    					"ix": 4
    				},
    				"nm": "蒙版 1"
    			}],
    			"ip": 0,
    			"op": 172,
    			"st": 0,
    			"bm": 0
    		}, {
    			"ddd": 0,
    			"ind": 2,
    			"ty": 2,
    			"nm": "图层 2 拷贝",
    			"refId": "image_2",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 1,
    					"k": [{
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 60,
    						"s": [0]
    					}, {
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 77,
    						"s": [100]
    					}, {
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 102,
    						"s": [100]
    					}, {
    						"t": 120,
    						"s": [0]
    					}],
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 0,
    					"k": [420, 266, 0],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [282, 144, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"ip": 0,
    			"op": 171,
    			"st": 0,
    			"bm": 0
    		}]
    	}, {
    		"id": "comp_2",
    		"layers": [{
    			"ddd": 0,
    			"ind": 1,
    			"ty": 2,
    			"nm": "别卖关子了，快教教我！",
    			"refId": "image_3",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 1,
    					"k": [{
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 145,
    						"s": [100]
    					}, {
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 179,
    						"s": [100]
    					}, {
    						"t": 195,
    						"s": [0]
    					}],
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 0,
    					"k": [334, 255.5, 0],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [187, 19.5, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"hasMask": true,
    			"masksProperties": [{
    				"inv": false,
    				"mode": "a",
    				"pt": {
    					"a": 1,
    					"k": [{
    						"i": {
    							"x": 0.833,
    							"y": 0.833
    						},
    						"o": {
    							"x": 0.167,
    							"y": 0.167
    						},
    						"t": 145,
    						"s": [{
    							"i": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"o": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"v": [
    								[-2.793, -15],
    								[-6, -9],
    								[-6, 70.508],
    								[-2.793, 64.508]
    							],
    							"c": true
    						}]
    					}, {
    						"t": 171,
    						"s": [{
    							"i": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"o": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"v": [
    								[395.819, -13.347],
    								[-6, -9],
    								[-6, 70.508],
    								[395.819, 66.161]
    							],
    							"c": true
    						}]
    					}],
    					"ix": 1
    				},
    				"o": {
    					"a": 0,
    					"k": 100,
    					"ix": 3
    				},
    				"x": {
    					"a": 0,
    					"k": 0,
    					"ix": 4
    				},
    				"nm": "蒙版 1"
    			}],
    			"ip": 0,
    			"op": 203,
    			"st": 0,
    			"bm": 0
    		}, {
    			"ddd": 0,
    			"ind": 2,
    			"ty": 2,
    			"nm": "图层 5 拷贝",
    			"refId": "image_4",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 1,
    					"k": [{
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 132,
    						"s": [0]
    					}, {
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 145,
    						"s": [100]
    					}, {
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 179,
    						"s": [100]
    					}, {
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 192,
    						"s": [0]
    					}, {
    						"t": 195,
    						"s": [0]
    					}],
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 0,
    					"k": [333, 266, 0],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [282, 144, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"ip": 0,
    			"op": 203,
    			"st": 0,
    			"bm": 0
    		}]
    	}, {
    		"id": "comp_3",
    		"layers": [{
    			"ddd": 0,
    			"ind": 1,
    			"ty": 2,
    			"nm": "客户在哪啊？快找给我看啊！ ",
    			"refId": "image_5",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 1,
    					"k": [{
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 0,
    						"s": [100]
    					}, {
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 58,
    						"s": [100]
    					}, {
    						"t": 66,
    						"s": [0]
    					}],
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 0,
    					"k": [333, 260, 0],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [223, 19, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"hasMask": true,
    			"masksProperties": [{
    				"inv": false,
    				"mode": "a",
    				"pt": {
    					"a": 1,
    					"k": [{
    						"i": {
    							"x": 0.833,
    							"y": 0.833
    						},
    						"o": {
    							"x": 0.167,
    							"y": 0.167
    						},
    						"t": 20,
    						"s": [{
    							"i": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"o": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"v": [
    								[-6.273, -10],
    								[-6, -13],
    								[-6, 51.512],
    								[-6.273, 54.512]
    							],
    							"c": true
    						}]
    					}, {
    						"t": 40,
    						"s": [{
    							"i": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"o": [
    								[0, 0],
    								[0, 0],
    								[0, 0],
    								[0, 0]
    							],
    							"v": [
    								[-6.273, -10],
    								[463, -20],
    								[466, 46.512],
    								[-6.273, 54.512]
    							],
    							"c": true
    						}]
    					}],
    					"ix": 1
    				},
    				"o": {
    					"a": 0,
    					"k": 100,
    					"ix": 3
    				},
    				"x": {
    					"a": 0,
    					"k": 0,
    					"ix": 4
    				},
    				"nm": "蒙版 1"
    			}],
    			"ip": 0,
    			"op": 171,
    			"st": 0,
    			"bm": 0
    		}, {
    			"ddd": 0,
    			"ind": 2,
    			"ty": 2,
    			"nm": "图层 5",
    			"refId": "image_6",
    			"sr": 1,
    			"ks": {
    				"o": {
    					"a": 1,
    					"k": [{
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 0,
    						"s": [0]
    					}, {
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 20,
    						"s": [100]
    					}, {
    						"i": {
    							"x": [0.833],
    							"y": [0.833]
    						},
    						"o": {
    							"x": [0.167],
    							"y": [0.167]
    						},
    						"t": 58,
    						"s": [100]
    					}, {
    						"t": 66,
    						"s": [0]
    					}],
    					"ix": 11
    				},
    				"r": {
    					"a": 0,
    					"k": 0,
    					"ix": 10
    				},
    				"p": {
    					"a": 0,
    					"k": [333, 266, 0],
    					"ix": 2
    				},
    				"a": {
    					"a": 0,
    					"k": [282, 144, 0],
    					"ix": 1
    				},
    				"s": {
    					"a": 0,
    					"k": [100, 100, 100],
    					"ix": 6
    				}
    			},
    			"ao": 0,
    			"ip": 0,
    			"op": 171,
    			"st": 0,
    			"bm": 0
    		}]
    	}, {
    		"id": "comp_4",
    		"layers": []
    	}],
    	"layers": [{
    		"ddd": 0,
    		"ind": 1,
    		"ty": 0,
    		"nm": "落地页插画",
    		"refId": "comp_0",
    		"sr": 1,
    		"ks": {
    			"o": {
    				"a": 0,
    				"k": 100,
    				"ix": 11
    			},
    			"r": {
    				"a": 0,
    				"k": 0,
    				"ix": 10
    			},
    			"p": {
    				"a": 0,
    				"k": [375, 443, 0],
    				"ix": 2
    			},
    			"a": {
    				"a": 0,
    				"k": [375, 443, 0],
    				"ix": 1
    			},
    			"s": {
    				"a": 0,
    				"k": [100, 100, 100],
    				"ix": 6
    			}
    		},
    		"ao": 0,
    		"w": 750,
    		"h": 886,
    		"ip": 0,
    		"op": 200,
    		"st": 0,
    		"bm": 0
    	}],
    	"markers": []
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70]: /images/20211018/92068c4cf69d438fa02b784c9ff798b1.png