add lottie

Author: zhuzhe

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": ["es2015", "stage-0"],
   "plugins": [
+    "transform-runtime",
     "add-module-exports",
     "transform-object-rest-spread",
     "syntax-dynamic-import",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "extend": "^3.0.0",
     "lodash": "^4.17.4",
+    "lottie-web": "^5.4.2",
     "moment": "^2.17.1",
     "vue": "^2.5.17",
     "weex-amui": "^0.1.1",

src/components/lottie.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    ref="lavContainer"
+  ></div>
+</template>
+
+<script>
+  import lottie from 'lottie-web'
+
+  export default {
+    props: {
+      options: Object,
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      loop: {
+        type: [Boolean, String],
+        default: true
+      },
+      src: String
+    },
+
+    async mounted () {
+      let otherOptions = {
+        container: this.$refs.lavContainer.$el,
+        renderer: 'svg',
+        prerender: true,
+        loop: this.loop !== false,
+        autoplay: this.autoplay !== false,
+        path: this.src
+      }
+      this.anim = lottie.loadAnimation(otherOptions)
+      this.$emit('animCreated', this.anim)
+    }
+  }
+</script>

src/views/test.vue

@@ -3,6 +3,9 @@
     <div class="panel">
       <text class="text">Weex 是一套简单易用的跨平台开发方案，能以 Web 的开发体验构建高性能、可扩展的原生应用。</text>
     </div>
+    <!-- <lottie style='width:200px;height:200px;border-width:2px;' loop=true src="local://lottie/coinpig.json" />
+    <lottie style='width:200px;height:200px;border-width:2px;' loop=true src="local://lottie/motorcycle.json" /> -->
+    <lottie style='width:200px;height:200px;border-width:2px;' loop=true src="https://www.lottiefiles.com/storage/datafiles/nwHJNOUoNltzK7d/data.json" />
   </scroller>
 </template>
 
@@ -26,4 +29,4 @@
   font-size: 32px;
 }
 
-</style>
+</style>

web/web.js

@@ -1,3 +1,4 @@
 import Vue from 'vue'
 window.Vue = Vue
 require('weex-vue-render')
+Vue.component('lottie', require('@components/lottie.vue').default)

yarn.lock

@@ -6098,6 +6098,10 @@ loose-envify@^1.0.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-web@^5.4.2:
+  version "5.4.2"
+  resolved "http://192.168.200.235:8282/repository/findnpmgroup/lottie-web/-/lottie-web-5.4.2.tgz#efe727ce20170946969929b50f30bfef3ec7ae55"
+
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"