1

project/package-lock.json

@@ -763,6 +763,11 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svgaplayerweb": {
+      "version": "2.3.1",
+      "resolved": "http://npm.dui88.com:80/svgaplayerweb/-/svgaplayerweb-2.3.1.tgz",
+      "integrity": "sha1-Au3BavFiCvn1dKU254E/wlE55Hs="
+    },
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "http://npm.dui88.com:80/symbol-observable/-/symbol-observable-1.2.0.tgz",

project/package.json

@@ -8,8 +8,11 @@
     "tb": "spark build --type taobao"
   },
   "dependencies": {
+    "@spark/api-base": "^1.0.11",
+    "@spark/projectx": "^1.0.3",
     "axios": "^0.19.2",
     "css-loader": "^3.6.0",
+    "duiba-utils": "^1.0.2",
     "fyge-tbmini": "^1.3.1",
     "postcss-loader": "^3.0.0",
     "prettier": "^2.0.5",
@@ -19,11 +22,9 @@
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
-    "style-loader": "^1.2.1",
     "spark-utils": "^0.0.12",
-    "duiba-utils": "^1.0.2",
-    "@spark/api-base": "^1.0.11",
-    "@spark/projectx": "^1.0.3"
+    "style-loader": "^1.2.1",
+    "svgaplayerweb": "^2.3.1"
   },
   "devDependencies": {
     "mockjs": "^1.1.0"

project/readme.md

+"teddi-svga": "git+ssh://git@gitlab2.dui88.com:wildfirecode13/teddi-svga.git"
\ No newline at end of file

project/sparkrc.js

@@ -4,6 +4,6 @@ module.exports = {
 	TEMP_DIR: "./.temp",
 	ENTRY: "src/app.jsx",
 	TEMPLATE: "./public/index.html",
-	MOCK_STATUS: true,
+	MOCK_STATUS: false,
 	PX2REM: true
 };

project/src/pages/main/main.jsx

@@ -5,6 +5,7 @@ import resList from '../../resconfig/resList'; //import API from '../../api';
 
 import './main.less';
 import Select from '../../components/select/select.jsx';
+import { getSVGA, loadSVGA } from '../../svga.js';
 
 class Main extends Component {
   constructor(props) {
@@ -18,12 +19,19 @@ class Main extends Component {
     222222;
   };
 
+  componentDidMount() {
+    const url = 'https://yun.duiba.com.cn/aurora/assets/dffd145ab76b633d180db947d813ec0fd4fd602f.svga'; // loadSVGA(url); //
+
+    getSVGA(url, '.svga-placeholder');
+  }
+
   getElement() {}
 
   render() {
     const { guide } = this.state;
     return (
       <div className="main " uuid="7d70e354-c6e9-47c8-a482-4101c0a75401">
+        <div className="svga-placeholder" uuid="c718b8c3-43da-43d0-8422-91459c8f29a9" />
         <img
           className="main_bg "
           uuid="122bc8da-cec5-4044-93ea-d998cc08bac3"

project/src/pages/main/main.less

@@ -2,6 +2,8 @@
   width: 752px;
   height: 1666px;
   position: absolute;
+  .svga-placeholder {
+  }
   .main_bg {
     width: 750px;
     height: 1624px;
@@ -85,6 +87,4 @@
     top: 1394px;
     position: absolute;
   }
-  .hello456 {
-  }
 }

project/src/svga.js

+const  SVGA = require("svgaplayerweb");
+
+var svgaParser = new SVGA.Parser();
+
+/**
+ * 快速加载svga资源，但不装载
+ * @param url 资源URL
+ */
+export const loadSVGA = (url) => {
+    return new Promise((resolve, reject) => {
+        svgaParser.load(url, (videoItem) => {
+            resolve(videoItem)
+        }, (err) => {
+            reject(err)
+        })
+    })
+}
+/**
+ * 快速装载一个svga动画
+ * @param url 资源URL
+ * @param className 挂载元素的class name
+ * @param loops 播放次数。默认为空，循环播放。
+ * @param clearsAfterStop 
+ */
+export const getSVGA = async (url, className, loops, clearsAfterStop) => {
+    const videoItem = await loadSVGA(url);
+    var svga = new SVGA.Player(className);
+    // if (loops)
+    //     svga.loops = loops;
+    // if (clearsAfterStop)
+    //     svga.clearsAfterStop = clearsAfterStop;
+    svga.setVideoItem(videoItem);
+    svga.startAnimation();
+    return svga
+}
\ No newline at end of file