{"id":129,"date":"2026-05-09T21:31:44","date_gmt":"2026-05-09T13:31:44","guid":{"rendered":"https:\/\/www.zs1843.cn\/?p=129"},"modified":"2026-05-18T14:38:12","modified_gmt":"2026-05-18T06:38:12","slug":"lottie%e5%a6%82%e4%bd%95%e6%b8%b2%e6%9f%93%e5%a4%a7json%e5%8a%a8%e7%94%bb","status":"publish","type":"post","link":"https:\/\/www.zs1843.cn\/?p=129","title":{"rendered":"Lottie\u5982\u4f55\u6e32\u67d3\u5927JSON\u52a8\u753b"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Lottie\u662f Airbnb \u53d1\u5e03\u7684\u4e00\u6b3e\u5f00\u6e90\u52a8\u753b\u5e93\uff0c\u5b83\u9002\u7528\u4e8e Android\u3001iOS\u3001Web \u548c Windows \u7684\u5e93\u3002 \u5b83\u63d0\u4f9b\u4e86\u4e00\u5957\u4ece\u8bbe\u8ba1\u5e08\u4f7f\u7528 AE\uff08Adobe After Effects\uff09\u5230\u5404\u7aef\u5f00\u53d1\u8005\u5b9e\u73b0\u52a8\u753b\u7684\u5de5\u5177\u6d41\u3002<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">\u7ec4\u4ef6<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u9879\u76ee\u4e2d\u7684lottie\u52a8\u753b\u7ec4\u4ef6<code>\\mova_app_mall\\src\\pagesC\\components\\c-lottie\\c-lottie.vue<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u591a\u4e2a\u52a8\u753b\u3001\u52a8\u753b\u8fc7\u5927\u5982\u4f55\u4f7f\u7528\u8be5\u7ec4\u4ef6\uff1f<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>\u52a8\u753b\u4f20\u503c<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u65b9\u5f0f1\uff1a\u628aJSON\u6587\u4ef6\u653e\u5728oss\u4e0a\uff08cdn\uff09\uff0c\u76f4\u63a5\u5411\u7ec4\u4ef6\u4f20\u53c2\u6570:src=&#8221;lottieSrc&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u65b9\u5f0f2\uff1a\u628aJSON\u6587\u4ef6\uff08\u5c0f\u4e8e1M\uff09\u653e\u5728oss\u4e0a\uff0c\u8bf7\u6c42\u5e76\u7f13\u5b58\u5230storage\u4e2d\uff0c\u8981\u4f7f\u7528\u7684\u65f6\u5019\uff0c\u4ecestorage\u83b7\u53d6\uff0c\u5e76\u5411\u7ec4\u4ef6\u4f20\u53c2\u6570:animationData=&#8221;animationData&#8221;<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u5355\u4e2a\u52a8\u753b<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u901a\u5e38\u91c7\u7528src\u7684\u65b9\u5f0f\u4f20\u53c2<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.75rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(2 * 0.6 * .75rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:16px 0 0 16px;width:100%;text-align:left;background-color:#24292e\"><span style=\"background:#d3d7dd;padding:0.3rem 0.5rem 0.2rem;border-radius:1rem;font-size:0.8em;line-height:1;height:1.25rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;color:#24292e\">JavaScript<\/span><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;cLottie\n    :class=\"{ offsetScreen: ifCanvasOffsetScreen }\"\n    ref=\"cLottieRef\"\n    :src=\"lottieSrc\"\n    @Complete=\"onPrizeAnimationComplete\"\n    width=\"1630rpx\"\n    height=\"1630rpx\"\n    :loop=\"false\"\n    @EnterFrame=\"EnterFrame\"\n>&lt;\/cLottie>\n\n\nmounted() {\n    this.lottieSrc = Vue.prototype.$preGiftAnimate1;\n    \/\/ \u9884\u52a0\u8f7d\u52a8\u753b\n    uni.request({ url: this.lottieSrc }).then(() => {\n        \/\/ \u5f00\u59cb\u52a8\u753b\n        this.animateInitTimer = setTimeout(() => {\n            const animationTimer = setTimeout(() => {\n                const cLottieRef = this.$refs.cLottieRef;\n                cLottieRef?.call('goToAndStop', &#91;0, false&#93;);\n                cLottieRef?.call('play');\n                this.showContainerTimer = setTimeout(\n                    () => {\n                        \/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91\uff0c\uff082000\uff09\u65f6\u95f4\u6839\u636e\u5b9e\u9645\u60c5\u51b5\u8c03\u6574\n                    },\n                    2000\n                );\n                clearTimeout(animationTimer);\n            }, 300);\n            clearTimeout(this.animateInitTimer);\n        }, 1000);\n    });\n\n    &lt;em>\/\/ \u5bb9\u9519\uff0c2s\u540e\u8fd8\u6ca1\u5f00\u59cb\u64ad\u653e\u52a8\u753b\u7684\u8bdd\u5c31\u76f4\u63a5\u663e\u793a&lt;\/em>\n    const isAnimateStartTimer = setTimeout(() => {\n        if (!this.isAnimateStart) {\n            \/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91\n        }\n        clearTimeout(isAnimateStartTimer);\n    }, 2000);\n},\n\n\/\/ \u4e00\u4e2a\u52a8\u753b\u64ad\u653e\u7ed3\u675f\u56de\u8c03\nonPrizeAnimationComplete() {\n    this.ifCanvasOffsetScreen = true;\n    console.log('\u64ad\u653e\u5b8c\u6bd5?');\n},\n\/\/ \u5f00\u59cb\u52a8\u753b\u56de\u8c03\nEnterFrame() {\n    this.isAnimateStart = true;\n},<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #79B8FF\">cLottie<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">:class=&quot;{<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">offsetScreen:<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ifCanvasOffsetScreen<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">}&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">ref<\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #9ECBFF\">&quot;cLottieRef&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">:src=&quot;lottieSrc&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">@Complete=&quot;onPrizeAnimationComplete&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">width<\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #9ECBFF\">&quot;1630rpx&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">height<\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #9ECBFF\">&quot;1630rpx&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">:loop=&quot;false&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">@EnterFrame=&quot;EnterFrame&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #79B8FF\">cLottie<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">mounted<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.lottieSrc <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">Vue<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #79B8FF\">prototype<\/span><span style=\"color: #E1E4E8\">.$preGiftAnimate1;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #6A737D\">\/\/ \u9884\u52a0\u8f7d\u52a8\u753b<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    uni.<\/span><span style=\"color: #B392F0\">request<\/span><span style=\"color: #E1E4E8\">({ url: <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.lottieSrc }).<\/span><span style=\"color: #B392F0\">then<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #6A737D\">\/\/ \u5f00\u59cb\u52a8\u753b<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.animateInitTimer <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">animationTimer<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">cLottieRef<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.$refs.cLottieRef;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                cLottieRef?.<\/span><span style=\"color: #B392F0\">call<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;goToAndStop&#39;<\/span><span style=\"color: #E1E4E8\">, &#91;<\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">false<\/span><span style=\"color: #E1E4E8\">&#93;);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                cLottieRef?.<\/span><span style=\"color: #B392F0\">call<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;play&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.showContainerTimer <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    () <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                        <\/span><span style=\"color: #6A737D\">\/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91\uff0c\uff082000\uff09\u65f6\u95f4\u6839\u636e\u5b9e\u9645\u60c5\u51b5\u8c03\u6574<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    <\/span><span style=\"color: #79B8FF\">2000<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #B392F0\">clearTimeout<\/span><span style=\"color: #E1E4E8\">(animationTimer);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            }, <\/span><span style=\"color: #79B8FF\">300<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #B392F0\">clearTimeout<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.animateInitTimer);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        }, <\/span><span style=\"color: #79B8FF\">1000<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    });<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;\/\/ \u5bb9\u9519\uff0c2s\u540e\u8fd8\u6ca1\u5f00\u59cb\u64ad\u653e\u52a8\u753b\u7684\u8bdd\u5c31\u76f4\u63a5\u663e\u793a&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">isAnimateStartTimer<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #F97583\">!<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.isAnimateStart) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #6A737D\">\/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #B392F0\">clearTimeout<\/span><span style=\"color: #E1E4E8\">(isAnimateStartTimer);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }, <\/span><span style=\"color: #79B8FF\">2000<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">},<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A737D\">\/\/ \u4e00\u4e2a\u52a8\u753b\u64ad\u653e\u7ed3\u675f\u56de\u8c03<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">onPrizeAnimationComplete<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.ifCanvasOffsetScreen <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">true<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;\u64ad\u653e\u5b8c\u6bd5?&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A737D\">\/\/ \u5f00\u59cb\u52a8\u753b\u56de\u8c03<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">EnterFrame<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.isAnimateStart <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">true<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">},<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u5206\u7247\u52a8\u753b\uff08\u591a\u4e2a\u52a8\u753b\uff09<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u591a\u4e2a\u52a8\u753b\u7684\u65f6\u5019\uff0c\u901a\u5e38\u91c7\u7528\u7f13\u5b58\u591a\u4e2a\u4e0d\u8d85\u8fc71M\u7684JSON\u7684\u65b9\u5f0f\uff0c\u7528animationData\u4f20\u53c2<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.75rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(3 * 0.6 * .75rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:16px 0 0 16px;width:100%;text-align:left;background-color:#24292e\"><span style=\"background:#d3d7dd;padding:0.3rem 0.5rem 0.2rem;border-radius:1rem;font-size:0.8em;line-height:1;height:1.25rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;color:#24292e\">JavaScript<\/span><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;c-lottie\n    :class=\"{ offsetScreen: ifCanvasOffsetScreen }\"\n    ref=\"cLottieRef\"\n    :src=\"lottieSrc\"\n    @Complete=\"onPrizeAnimationComplete\"\n    width=\"1630rpx\"\n    height=\"1630rpx\"\n    :loop=\"false\"\n    :animationData=\"animationData &amp;&amp; animationData.length &amp;&amp; animationData&#91;currentLottieIndex&#93;.data\"\n    @dataFailed=\"onDataFailed\"\n    @EnterFrame=\"EnterFrame\"\n>&lt;\/c-lottie>\n\ndata() {\n    return {\n        currentLottieIndex: 0,\n    }\n}\n\nmounted() {\n    \/\/ \u53ef\u4ee5\u7528lottieSrc\u515c\u5e95\uff0c\u9632\u6b62\u53d6\u4e0d\u5230storage\n    if (\n        uni.getStorageSync('preGiftAnimate11') &amp;&amp;\n        uni.getStorageSync('preGiftAnimate12') &amp;&amp;\n        uni.getStorageSync('preGiftAnimate13')\n    ) {\n        this.animationData = &#91;\n            { data: uni.getStorageSync('preGiftAnimate11'), showContainer: false },\n            { data: uni.getStorageSync('preGiftAnimate12'), showContainer: false },\n            { data: uni.getStorageSync('preGiftAnimate13'), showContainer: true },\n        &#93;;\n    } else {\n        this.lottieSrc = Vue.prototype.$preGiftAnimate1;\n    }\n    \n    if (this.lottieSrc) {\n        \/\/ \u9884\u52a0\u8f7d\u52a8\u753b\n        uni.request({ url: this.lottieSrc }).then(() => {\n            \/\/ \u5f00\u59cb\u52a8\u753b\n            this.animateInitTimer = setTimeout(() => {\n                const animationTimer = setTimeout(() => {\n                    const cLottieRef = this.$refs.cLottieRef;\n                    cLottieRef?.call('goToAndStop', &#91;0, false&#93;);\n                    cLottieRef?.call('play');\n                    this.showContainerTimer = setTimeout(\n                        () => {\n                            \/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91\uff0c\uff082000\uff09\u65f6\u95f4\u6839\u636e\u5b9e\u9645\u60c5\u51b5\u8c03\u6574\n                        },\n                        2000\n                    );\n                    clearTimeout(animationTimer);\n                }, 300);\n                clearTimeout(this.animateInitTimer);\n            }, 1000);\n        });\n    } else {\n        \/\/ \u5f00\u59cb\u52a8\u753b\n        this.animateInitTimer = setTimeout(() => {\n            const animationTimer = setTimeout(() => {\n                const cLottieRef = this.$refs.cLottieRef;\n                cLottieRef?.call('goToAndStop', &#91;0, false&#93;);\n                cLottieRef?.call('play');\n                clearTimeout(animationTimer);\n            }, 300);\n            clearTimeout(this.animateInitTimer);\n        }, 800);\n    }\n    \n    \/\/ \u5bb9\u9519\uff0c2s\u540e\u8fd8\u6ca1\u5f00\u59cb\u64ad\u653e\u52a8\u753b\u7684\u8bdd\u5c31\u76f4\u63a5\u663e\u793a\n    const isAnimateStartTimer = setTimeout(() => {\n        if (!this.isAnimateStart) {\n            \/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91\n        }\n        clearTimeout(isAnimateStartTimer);\n    }, 2000);\n}\n\/\/ \u4e00\u4e2a\u52a8\u753b\u64ad\u653e\u7ed3\u675f\u56de\u8c03\nonPrizeAnimationComplete() {\n    this.ifCanvasOffsetScreen = true;\n    console.log('\u64ad\u653e\u5b8c\u6bd5?');\n    if (!this.lottieSrc) {\n        if (this.currentLottieIndex &lt; this.animationData.length - 1) {\n            \/\/ \u52a0\u8f7d\u4e0b\u4e00\u4e2a\u5206\u7247\u52a8\u753b\n            this.currentLottieIndex++;\n            const animationTimer = setTimeout(() => {\n                const cLottieRef = this.$refs.cLottieRef;\n                cLottieRef?.call('goToAndStop', &#91;0, false&#93;);\n                cLottieRef?.call('play');\n                if (this.animationData&#91;this.currentLottieIndex&#93;.showContainer) {\n                    this.showContainerTimer = setTimeout(() => {\n                        \/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91\uff0c\uff08200\uff09\u65f6\u95f4\u6839\u636e\u5b9e\u9645\u60c5\u51b5\u8c03\u6574\n                        clearTimeout(this.showContainerTimer);\n                    }, 200);\n                }\n                clearTimeout(animationTimer);\n            }, 300);\n        }\n    }\n},\n\/\/ \u5f00\u59cb\u52a8\u753b\u56de\u8c03\n&lt;strong>EnterFrame&lt;\/strong>() {\n    this.isAnimateStart = true;\n},<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #79B8FF\">c-lottie<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">:class=&quot;{<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">offsetScreen:<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">ifCanvasOffsetScreen<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">}&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">ref<\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #9ECBFF\">&quot;cLottieRef&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">:src=&quot;lottieSrc&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">@Complete=&quot;onPrizeAnimationComplete&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">width<\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #9ECBFF\">&quot;1630rpx&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">height<\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #9ECBFF\">&quot;1630rpx&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">:loop=&quot;false&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">:animationData=&quot;animationData<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">&amp;&amp;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">animationData.length<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">&amp;&amp;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">animationData&#91;currentLottieIndex&#93;.data&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">@dataFailed=&quot;onDataFailed&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #FDAEB7; font-style: italic\">@EnterFrame=&quot;EnterFrame&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #79B8FF\">c-lottie<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">data<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">return<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        currentLottieIndex: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">mounted<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #6A737D\">\/\/ \u53ef\u4ee5\u7528lottieSrc\u515c\u5e95\uff0c\u9632\u6b62\u53d6\u4e0d\u5230storage<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        uni.<\/span><span style=\"color: #B392F0\">getStorageSync<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;preGiftAnimate11&#39;<\/span><span style=\"color: #E1E4E8\">) <\/span><span style=\"color: #F97583\">&amp;&amp;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        uni.<\/span><span style=\"color: #B392F0\">getStorageSync<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;preGiftAnimate12&#39;<\/span><span style=\"color: #E1E4E8\">) <\/span><span style=\"color: #F97583\">&amp;&amp;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        uni.<\/span><span style=\"color: #B392F0\">getStorageSync<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;preGiftAnimate13&#39;<\/span><span style=\"color: #E1E4E8\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.animationData <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            { data: uni.<\/span><span style=\"color: #B392F0\">getStorageSync<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;preGiftAnimate11&#39;<\/span><span style=\"color: #E1E4E8\">), showContainer: <\/span><span style=\"color: #79B8FF\">false<\/span><span style=\"color: #E1E4E8\"> },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            { data: uni.<\/span><span style=\"color: #B392F0\">getStorageSync<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;preGiftAnimate12&#39;<\/span><span style=\"color: #E1E4E8\">), showContainer: <\/span><span style=\"color: #79B8FF\">false<\/span><span style=\"color: #E1E4E8\"> },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            { data: uni.<\/span><span style=\"color: #B392F0\">getStorageSync<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;preGiftAnimate13&#39;<\/span><span style=\"color: #E1E4E8\">), showContainer: <\/span><span style=\"color: #79B8FF\">true<\/span><span style=\"color: #E1E4E8\"> },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &#93;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    } <\/span><span style=\"color: #F97583\">else<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.lottieSrc <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">Vue<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #79B8FF\">prototype<\/span><span style=\"color: #E1E4E8\">.$preGiftAnimate1;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.lottieSrc) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #6A737D\">\/\/ \u9884\u52a0\u8f7d\u52a8\u753b<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        uni.<\/span><span style=\"color: #B392F0\">request<\/span><span style=\"color: #E1E4E8\">({ url: <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.lottieSrc }).<\/span><span style=\"color: #B392F0\">then<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #6A737D\">\/\/ \u5f00\u59cb\u52a8\u753b<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.animateInitTimer <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">animationTimer<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">cLottieRef<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.$refs.cLottieRef;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    cLottieRef?.<\/span><span style=\"color: #B392F0\">call<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;goToAndStop&#39;<\/span><span style=\"color: #E1E4E8\">, &#91;<\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">false<\/span><span style=\"color: #E1E4E8\">&#93;);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    cLottieRef?.<\/span><span style=\"color: #B392F0\">call<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;play&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.showContainerTimer <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                        () <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                            <\/span><span style=\"color: #6A737D\">\/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91\uff0c\uff082000\uff09\u65f6\u95f4\u6839\u636e\u5b9e\u9645\u60c5\u51b5\u8c03\u6574<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                        <\/span><span style=\"color: #79B8FF\">2000<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    <\/span><span style=\"color: #B392F0\">clearTimeout<\/span><span style=\"color: #E1E4E8\">(animationTimer);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                }, <\/span><span style=\"color: #79B8FF\">300<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #B392F0\">clearTimeout<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.animateInitTimer);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            }, <\/span><span style=\"color: #79B8FF\">1000<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    } <\/span><span style=\"color: #F97583\">else<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #6A737D\">\/\/ \u5f00\u59cb\u52a8\u753b<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.animateInitTimer <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">animationTimer<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">cLottieRef<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.$refs.cLottieRef;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                cLottieRef?.<\/span><span style=\"color: #B392F0\">call<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;goToAndStop&#39;<\/span><span style=\"color: #E1E4E8\">, &#91;<\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">false<\/span><span style=\"color: #E1E4E8\">&#93;);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                cLottieRef?.<\/span><span style=\"color: #B392F0\">call<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;play&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #B392F0\">clearTimeout<\/span><span style=\"color: #E1E4E8\">(animationTimer);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            }, <\/span><span style=\"color: #79B8FF\">300<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #B392F0\">clearTimeout<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.animateInitTimer);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        }, <\/span><span style=\"color: #79B8FF\">800<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #6A737D\">\/\/ \u5bb9\u9519\uff0c2s\u540e\u8fd8\u6ca1\u5f00\u59cb\u64ad\u653e\u52a8\u753b\u7684\u8bdd\u5c31\u76f4\u63a5\u663e\u793a<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">isAnimateStartTimer<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #F97583\">!<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.isAnimateStart) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #6A737D\">\/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #B392F0\">clearTimeout<\/span><span style=\"color: #E1E4E8\">(isAnimateStartTimer);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }, <\/span><span style=\"color: #79B8FF\">2000<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A737D\">\/\/ \u4e00\u4e2a\u52a8\u753b\u64ad\u653e\u7ed3\u675f\u56de\u8c03<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">onPrizeAnimationComplete<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.ifCanvasOffsetScreen <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">true<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;\u64ad\u653e\u5b8c\u6bd5?&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #F97583\">!<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.lottieSrc) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.currentLottieIndex <\/span><span style=\"color: #F97583\">&lt;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.animationData.<\/span><span style=\"color: #79B8FF\">length<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">-<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #6A737D\">\/\/ \u52a0\u8f7d\u4e0b\u4e00\u4e2a\u5206\u7247\u52a8\u753b<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.currentLottieIndex<\/span><span style=\"color: #F97583\">++<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">animationTimer<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">cLottieRef<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.$refs.cLottieRef;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                cLottieRef?.<\/span><span style=\"color: #B392F0\">call<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;goToAndStop&#39;<\/span><span style=\"color: #E1E4E8\">, &#91;<\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">false<\/span><span style=\"color: #E1E4E8\">&#93;);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                cLottieRef?.<\/span><span style=\"color: #B392F0\">call<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;play&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.animationData&#91;<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.currentLottieIndex&#93;.showContainer) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.showContainerTimer <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                        <\/span><span style=\"color: #6A737D\">\/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91\uff0c\uff08200\uff09\u65f6\u95f4\u6839\u636e\u5b9e\u9645\u60c5\u51b5\u8c03\u6574<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                        <\/span><span style=\"color: #B392F0\">clearTimeout<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.showContainerTimer);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    }, <\/span><span style=\"color: #79B8FF\">200<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #B392F0\">clearTimeout<\/span><span style=\"color: #E1E4E8\">(animationTimer);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            }, <\/span><span style=\"color: #79B8FF\">300<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A737D\">\/\/ \u5f00\u59cb\u52a8\u753b\u56de\u8c03<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">strong<\/span><span style=\"color: #E1E4E8\">&gt;EnterFrame&lt;\/<\/span><span style=\"color: #85E89D\">strong<\/span><span style=\"color: #E1E4E8\">&gt;() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.isAnimateStart <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">true<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">},<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>\u9884\u52a0\u8f7d\u52a8\u753b\/\u52a8\u753b\u7f13\u5b58\/\u515c\u5e95\u5bb9\u9519<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u5168\u5c40\u9884\u52a0\u8f7d\/storage\u7f13\u5b58\uff1a<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.75rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(2 * 0.6 * .75rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:16px 0 0 16px;width:100%;text-align:left;background-color:#24292e\"><span style=\"background:#d3d7dd;padding:0.3rem 0.5rem 0.2rem;border-radius:1rem;font-size:0.8em;line-height:1;height:1.25rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;color:#24292e\">JavaScript<\/span><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ \u5168\u5c40\u9884\u52a0\u8f7d\uff0c\u5728\u9879\u76ee\u5165\u53e3\u6587\u4ef6main.ts\u4e2d\u9884\u52a0\u8f7d\/storage\u7f13\u5b58\nconst &lt;strong>preloadRemoteConfig&lt;\/strong> = async () => {\n    const json11 = `https:\/\/shop-oss.iot.mova-tech.com\/mova_app_mall\/activity\/PreGift\/preGift-pop-animate-1.json?t=${Date.now()}\/data.json`;\n    const json12 = `https:\/\/shop-oss.iot.mova-tech.com\/mova_app_mall\/activity\/PreGift\/preGift-pop-animate-2.json?t=${Date.now()}\/data.json`;\n    const json13 = `https:\/\/shop-oss.iot.mova-tech.com\/mova_app_mall\/activity\/PreGift\/preGift-pop-animate-3.json?t=${Date.now()}\/data.json`;\n    const json1 = `https:\/\/shop-oss.iot.mova-tech.com\/mova_app_mall\/activity\/PreGift\/preGift-pop-animate.json?t=${Date.now()}\/data.json`;\n    uni.request({\n        url: json11,\n        &lt;strong>success&lt;\/strong>: (&lt;em>res&lt;\/em>) => {\n            if (&lt;em>res&lt;\/em>.statusCode === 200 &amp;&amp; &lt;em>res&lt;\/em>.data) {\n                try {\n                    const jsonStr = JSON.stringify(&lt;em>res&lt;\/em>.data);\n                    uni.setStorageSync('preGiftAnimate11', jsonStr);\n                    console.log({ title: 'JSON \u7f13\u5b58\u6210\u529f' });\n                } catch (e) {\n                    console.log({ title: '\u7f13\u5b58\u5931\u8d25', icon: 'none' });\n                    console.error('\u7f13\u5b58 JSON \u51fa\u9519\uff1a', e);\n                }\n            }\n        },\n        &lt;strong>fail&lt;\/strong>: (&lt;em>err&lt;\/em>) => {\n            console.log({ title: '\u8bf7\u6c42 JSON \u5931\u8d25', icon: 'none' });\n            console.error('\u8bf7\u6c42\u8fdc\u7a0b JSON \u51fa\u9519\uff1a', &lt;em>err&lt;\/em>);\n        },\n    });\n    uni.request({\n        url: json12,\n        &lt;strong>success&lt;\/strong>: (&lt;em>res&lt;\/em>) => {\n            if (&lt;em>res&lt;\/em>.statusCode === 200 &amp;&amp; &lt;em>res&lt;\/em>.data) {\n                try {\n                    const jsonStr = JSON.stringify(&lt;em>res&lt;\/em>.data);\n                    uni.setStorageSync('preGiftAnimate12', jsonStr);\n                    console.log({ title: 'JSON \u7f13\u5b58\u6210\u529f' });\n                } catch (e) {\n                    console.log({ title: '\u7f13\u5b58\u5931\u8d25', icon: 'none' });\n                    console.error('\u7f13\u5b58 JSON \u51fa\u9519\uff1a', e);\n                }\n            }\n        },\n        &lt;strong>fail&lt;\/strong>: (&lt;em>err&lt;\/em>) => {\n            console.log({ title: '\u8bf7\u6c42 JSON \u5931\u8d25', icon: 'none' });\n            console.error('\u8bf7\u6c42\u8fdc\u7a0b JSON \u51fa\u9519\uff1a', &lt;em>err&lt;\/em>);\n        },\n    });\n    uni.request({\n        url: json13,\n        &lt;strong>success&lt;\/strong>: (&lt;em>res&lt;\/em>) => {\n            if (&lt;em>res&lt;\/em>.statusCode === 200 &amp;&amp; &lt;em>res&lt;\/em>.data) {\n                try {\n                    const jsonStr = JSON.stringify(&lt;em>res&lt;\/em>.data);\n                    uni.setStorageSync('preGiftAnimate13', jsonStr);\n                    console.log({ title: 'JSON \u7f13\u5b58\u6210\u529f' });\n                } catch (e) {\n                    console.log({ title: '\u7f13\u5b58\u5931\u8d25', icon: 'none' });\n                    console.error('\u7f13\u5b58 JSON \u51fa\u9519\uff1a', e);\n                }\n            }\n        },\n        &lt;strong>fail&lt;\/strong>: (&lt;em>err&lt;\/em>) => {\n            console.log({ title: '\u8bf7\u6c42 JSON \u5931\u8d25', icon: 'none' });\n            console.error('\u8bf7\u6c42\u8fdc\u7a0b JSON \u51fa\u9519\uff1a', err);\n        },\n    });\n    uni.request({ url: json1 });\n    Vue.prototype.$preGiftAnimate11 = json11;\n    Vue.prototype.$preGiftAnimate12 = json12;\n    Vue.prototype.$preGiftAnimate13 = json13;\n    Vue.prototype.$preGiftAnimate1 = json1;\n};\npreloadRemoteConfig();<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6A737D\">\/\/ \u5168\u5c40\u9884\u52a0\u8f7d\uff0c\u5728\u9879\u76ee\u5165\u53e3\u6587\u4ef6main.ts\u4e2d\u9884\u52a0\u8f7d\/storage\u7f13\u5b58<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> &lt;<\/span><span style=\"color: #79B8FF\">strong<\/span><span style=\"color: #E1E4E8\">&gt;preloadRemoteConfig&lt;\/strong&gt; <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">async<\/span><span style=\"color: #E1E4E8\"> () <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">json11<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">`https:\/\/shop-oss.iot.mova-tech.com\/mova_app_mall\/activity\/PreGift\/preGift-pop-animate-1.json?t=${<\/span><span style=\"color: #E1E4E8\">Date<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #B392F0\">now<\/span><span style=\"color: #9ECBFF\">()<\/span><span style=\"color: #9ECBFF\">}\/data.json`<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">json12<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">`https:\/\/shop-oss.iot.mova-tech.com\/mova_app_mall\/activity\/PreGift\/preGift-pop-animate-2.json?t=${<\/span><span style=\"color: #E1E4E8\">Date<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #B392F0\">now<\/span><span style=\"color: #9ECBFF\">()<\/span><span style=\"color: #9ECBFF\">}\/data.json`<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">json13<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">`https:\/\/shop-oss.iot.mova-tech.com\/mova_app_mall\/activity\/PreGift\/preGift-pop-animate-3.json?t=${<\/span><span style=\"color: #E1E4E8\">Date<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #B392F0\">now<\/span><span style=\"color: #9ECBFF\">()<\/span><span style=\"color: #9ECBFF\">}\/data.json`<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">json1<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">`https:\/\/shop-oss.iot.mova-tech.com\/mova_app_mall\/activity\/PreGift\/preGift-pop-animate.json?t=${<\/span><span style=\"color: #E1E4E8\">Date<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #B392F0\">now<\/span><span style=\"color: #9ECBFF\">()<\/span><span style=\"color: #9ECBFF\">}\/data.json`<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    uni.<\/span><span style=\"color: #B392F0\">request<\/span><span style=\"color: #E1E4E8\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        url: json11,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;strong&gt;success&lt;\/strong&gt;: (&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;) <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;.statusCode <\/span><span style=\"color: #F97583\">===<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">200<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">&amp;&amp;<\/span><span style=\"color: #E1E4E8\"> &lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;.data) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #F97583\">try<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">jsonStr<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">JSON<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #B392F0\">stringify<\/span><span style=\"color: #E1E4E8\">(&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;.data);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    uni.<\/span><span style=\"color: #B392F0\">setStorageSync<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;preGiftAnimate11&#39;<\/span><span style=\"color: #E1E4E8\">, jsonStr);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">({ title: <\/span><span style=\"color: #9ECBFF\">&#39;JSON \u7f13\u5b58\u6210\u529f&#39;<\/span><span style=\"color: #E1E4E8\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                } <\/span><span style=\"color: #F97583\">catch<\/span><span style=\"color: #E1E4E8\"> (e) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">({ title: <\/span><span style=\"color: #9ECBFF\">&#39;\u7f13\u5b58\u5931\u8d25&#39;<\/span><span style=\"color: #E1E4E8\">, icon: <\/span><span style=\"color: #9ECBFF\">&#39;none&#39;<\/span><span style=\"color: #E1E4E8\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    console.<\/span><span style=\"color: #B392F0\">error<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;\u7f13\u5b58 JSON \u51fa\u9519\uff1a&#39;<\/span><span style=\"color: #E1E4E8\">, e);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;strong&gt;fail&lt;\/strong&gt;: (&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;err&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;) <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">({ title: <\/span><span style=\"color: #9ECBFF\">&#39;\u8bf7\u6c42 JSON \u5931\u8d25&#39;<\/span><span style=\"color: #E1E4E8\">, icon: <\/span><span style=\"color: #9ECBFF\">&#39;none&#39;<\/span><span style=\"color: #E1E4E8\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            console.<\/span><span style=\"color: #B392F0\">error<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;\u8bf7\u6c42\u8fdc\u7a0b JSON \u51fa\u9519\uff1a&#39;<\/span><span style=\"color: #E1E4E8\">, &lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;err&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    uni.<\/span><span style=\"color: #B392F0\">request<\/span><span style=\"color: #E1E4E8\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        url: json12,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;strong&gt;success&lt;\/strong&gt;: (&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;) <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;.statusCode <\/span><span style=\"color: #F97583\">===<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">200<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">&amp;&amp;<\/span><span style=\"color: #E1E4E8\"> &lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;.data) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #F97583\">try<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">jsonStr<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">JSON<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #B392F0\">stringify<\/span><span style=\"color: #E1E4E8\">(&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;.data);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    uni.<\/span><span style=\"color: #B392F0\">setStorageSync<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;preGiftAnimate12&#39;<\/span><span style=\"color: #E1E4E8\">, jsonStr);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">({ title: <\/span><span style=\"color: #9ECBFF\">&#39;JSON \u7f13\u5b58\u6210\u529f&#39;<\/span><span style=\"color: #E1E4E8\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                } <\/span><span style=\"color: #F97583\">catch<\/span><span style=\"color: #E1E4E8\"> (e) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">({ title: <\/span><span style=\"color: #9ECBFF\">&#39;\u7f13\u5b58\u5931\u8d25&#39;<\/span><span style=\"color: #E1E4E8\">, icon: <\/span><span style=\"color: #9ECBFF\">&#39;none&#39;<\/span><span style=\"color: #E1E4E8\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    console.<\/span><span style=\"color: #B392F0\">error<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;\u7f13\u5b58 JSON \u51fa\u9519\uff1a&#39;<\/span><span style=\"color: #E1E4E8\">, e);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;strong&gt;fail&lt;\/strong&gt;: (&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;err&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;) <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">({ title: <\/span><span style=\"color: #9ECBFF\">&#39;\u8bf7\u6c42 JSON \u5931\u8d25&#39;<\/span><span style=\"color: #E1E4E8\">, icon: <\/span><span style=\"color: #9ECBFF\">&#39;none&#39;<\/span><span style=\"color: #E1E4E8\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            console.<\/span><span style=\"color: #B392F0\">error<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;\u8bf7\u6c42\u8fdc\u7a0b JSON \u51fa\u9519\uff1a&#39;<\/span><span style=\"color: #E1E4E8\">, &lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;err&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    uni.<\/span><span style=\"color: #B392F0\">request<\/span><span style=\"color: #E1E4E8\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        url: json13,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;strong&gt;success&lt;\/strong&gt;: (&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;) <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;.statusCode <\/span><span style=\"color: #F97583\">===<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">200<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">&amp;&amp;<\/span><span style=\"color: #E1E4E8\"> &lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;.data) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                <\/span><span style=\"color: #F97583\">try<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">jsonStr<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">JSON<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #B392F0\">stringify<\/span><span style=\"color: #E1E4E8\">(&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;res&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;.data);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    uni.<\/span><span style=\"color: #B392F0\">setStorageSync<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;preGiftAnimate13&#39;<\/span><span style=\"color: #E1E4E8\">, jsonStr);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">({ title: <\/span><span style=\"color: #9ECBFF\">&#39;JSON \u7f13\u5b58\u6210\u529f&#39;<\/span><span style=\"color: #E1E4E8\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                } <\/span><span style=\"color: #F97583\">catch<\/span><span style=\"color: #E1E4E8\"> (e) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">({ title: <\/span><span style=\"color: #9ECBFF\">&#39;\u7f13\u5b58\u5931\u8d25&#39;<\/span><span style=\"color: #E1E4E8\">, icon: <\/span><span style=\"color: #9ECBFF\">&#39;none&#39;<\/span><span style=\"color: #E1E4E8\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                    console.<\/span><span style=\"color: #B392F0\">error<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;\u7f13\u5b58 JSON \u51fa\u9519\uff1a&#39;<\/span><span style=\"color: #E1E4E8\">, e);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">                }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        &lt;strong&gt;fail&lt;\/strong&gt;: (&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;err&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;) <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">({ title: <\/span><span style=\"color: #9ECBFF\">&#39;\u8bf7\u6c42 JSON \u5931\u8d25&#39;<\/span><span style=\"color: #E1E4E8\">, icon: <\/span><span style=\"color: #9ECBFF\">&#39;none&#39;<\/span><span style=\"color: #E1E4E8\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            console.<\/span><span style=\"color: #B392F0\">error<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;\u8bf7\u6c42\u8fdc\u7a0b JSON \u51fa\u9519\uff1a&#39;<\/span><span style=\"color: #E1E4E8\">, err);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    uni.<\/span><span style=\"color: #B392F0\">request<\/span><span style=\"color: #E1E4E8\">({ url: json1 });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #79B8FF\">Vue<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #79B8FF\">prototype<\/span><span style=\"color: #E1E4E8\">.$preGiftAnimate11 <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> json11;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #79B8FF\">Vue<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #79B8FF\">prototype<\/span><span style=\"color: #E1E4E8\">.$preGiftAnimate12 <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> json12;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #79B8FF\">Vue<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #79B8FF\">prototype<\/span><span style=\"color: #E1E4E8\">.$preGiftAnimate13 <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> json13;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #79B8FF\">Vue<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #79B8FF\">prototype<\/span><span style=\"color: #E1E4E8\">.$preGiftAnimate1 <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> json1;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">preloadRemoteConfig<\/span><span style=\"color: #E1E4E8\">();<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u515c\u5e95\u5bb9\u9519\uff1a<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.75rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(2 * 0.6 * .75rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:16px 0 0 16px;width:100%;text-align:left;background-color:#24292e\"><span style=\"background:#d3d7dd;padding:0.3rem 0.5rem 0.2rem;border-radius:1rem;font-size:0.8em;line-height:1;height:1.25rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;color:#24292e\">JavaScript<\/span><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ 1. \u52a8\u753b\u5f00\u59cb\u7684\u65f6\u5019\u6807\u8bb0\u52a8\u753b\u4e00\u5f00\u59cb\n\/\/ \u5f00\u59cb\u52a8\u753b\u56de\u8c03\n&lt;strong>EnterFrame&lt;\/strong>() {\n    this.isAnimateStart = true;\n},\n\n\/\/ \u5728\u521d\u59cb\u5316\u52a8\u753b\u7684\u65f6\u5019\u52a0\u4e0a\u5bb9\u9519\n\/\/ \u5bb9\u9519\uff0c2s\u540e\u8fd8\u6ca1\u5f00\u59cb\u64ad\u653e\u52a8\u753b\u7684\u8bdd\u5c31\u76f4\u63a5\u663e\u793a\nconst isAnimateStartTimer = setTimeout(() => {\n    if (!this.isAnimateStart) {\n        \/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91\n    }\n    clearTimeout(isAnimateStartTimer);\n}, 2000);<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6A737D\">\/\/ 1. \u52a8\u753b\u5f00\u59cb\u7684\u65f6\u5019\u6807\u8bb0\u52a8\u753b\u4e00\u5f00\u59cb<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A737D\">\/\/ \u5f00\u59cb\u52a8\u753b\u56de\u8c03<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">strong<\/span><span style=\"color: #E1E4E8\">&gt;EnterFrame&lt;\/<\/span><span style=\"color: #85E89D\">strong<\/span><span style=\"color: #E1E4E8\">&gt;() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.isAnimateStart <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">true<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">},<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A737D\">\/\/ \u5728\u521d\u59cb\u5316\u52a8\u753b\u7684\u65f6\u5019\u52a0\u4e0a\u5bb9\u9519<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A737D\">\/\/ \u5bb9\u9519\uff0c2s\u540e\u8fd8\u6ca1\u5f00\u59cb\u64ad\u653e\u52a8\u753b\u7684\u8bdd\u5c31\u76f4\u63a5\u663e\u793a<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">isAnimateStartTimer<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(() <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #F97583\">!<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.isAnimateStart) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #6A737D\">\/\/ \u8fd9\u91cc\u53ef\u4ee5\u505a\u4e1a\u52a1\u903b\u8f91\uff0c\u5982\u663e\u793a\u4e00\u4e2a\u5f39\u7a97\u6216\u8005\u5176\u4ed6\u903b\u8f91<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">clearTimeout<\/span><span style=\"color: #E1E4E8\">(isAnimateStartTimer);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}, <\/span><span style=\"color: #79B8FF\">2000<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u6ce8\u610f\u4e8b\u9879<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><em>JSON\u4f53\u79ef\uff0c<strong>\u4e00\u822c\u4e0d\u8d85\u8fc72M<\/strong>\uff0c\u52a8\u753b\u5b9e\u5728\u592a\u5927\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u8003\u8651\u8ba9UI\u3010\u538b\u7f29\u3011\u6216\u8005\u3010<strong>\u5207\u6210\u591a\u4e2aJSON\uff08\u5c0f\u4e8e1M\uff09<\/strong>\uff0c\u518d\u7531\u524d\u7aef\u62fc\u63a5\u3011<br><strong>\u6ce8\u610f\u9884\u52a0\u8f7d\/\u7f13\u5b58\u52a8\u753b\/\u5bb9\u9519\u515c\u5e95\uff0c\u9632\u6b62\u51fa\u73b0\u52a8\u753b\u52a0\u8f7d\u4e0d\u51fa\u6765\u7684\u60c5\u51b5\uff0c\u540c\u65f6\u5f15\u53d1\u540e\u7eed\u4e1a\u52a1\u903b\u8f91\u7684\u963b\u65ad\uff08\u5982\u4e1a\u52a1\u5f39\u7a97\u7b49\uff09<\/strong><br>\u7f13\u5b58\u52a8\u753b\u7684\u65f6\u5019\uff0c\u6ce8\u610f\u5c0f\u7a0b\u5e8f\u7f13\u5b58\u7684json\u7684\u4f53\u79ef<strong>\u4e0d\u80fd\u5927\u4e8e1M<\/strong>\uff0c\u5426\u5219\u771f\u673a\u4e0a\u4f1a\u62a5\u9519<br>width=&#8221;1630rpx&#8221; height=&#8221;1630rpx&#8221;\uff0c\u6309\u7167\u5b9e\u9645\u52a8\u753b\u6765<strong>\u624b\u52a8\u8c03\u6574<\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lottie\u662f Airbnb \u53d1\u5e03\u7684\u4e00\u6b3e\u5f00\u6e90\u52a8\u753b\u5e93\uff0c\u5b83\u9002\u7528\u4e8e Android\u3001i&hellip;<\/p>\n","protected":false},"author":1,"featured_media":118,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-129","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-24"],"_links":{"self":[{"href":"https:\/\/www.zs1843.cn\/index.php?rest_route=\/wp\/v2\/posts\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zs1843.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zs1843.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zs1843.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zs1843.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=129"}],"version-history":[{"count":3,"href":"https:\/\/www.zs1843.cn\/index.php?rest_route=\/wp\/v2\/posts\/129\/revisions"}],"predecessor-version":[{"id":136,"href":"https:\/\/www.zs1843.cn\/index.php?rest_route=\/wp\/v2\/posts\/129\/revisions\/136"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.zs1843.cn\/index.php?rest_route=\/wp\/v2\/media\/118"}],"wp:attachment":[{"href":"https:\/\/www.zs1843.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zs1843.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zs1843.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}