l

.npmignore

@@ -3,6 +3,8 @@ node_modules
 /src
 /build/svgaPlayer.min.js.map
 tsConfig.json
+package-lock.json
 webpack.config.js
 /.vscode
-/scripts
\ No newline at end of file
+/scripts
+record.txt
\ No newline at end of file

README.md

@@ -2,7 +2,7 @@
 
 兼容web和淘宝小程序的svga文件播放器  1.0.3版本
 
-仅web轻量解析  1.0.4版本
+仅web轻量解析  1.0.4版本 1.0.6版本（支持换图）
 
 
 ### 网页使用

build/SvgaPlayer.d.ts

@@ -162,6 +162,12 @@ export  class MovieClip extends EventDispatcher {
      * @since 1.0.0
      */
     stop(): void;
+    /**
+     * 
+     * @param imagekey 对应的imagekey
+     * @param imageUrl 图片路径，以后考虑支持多种形式
+     */
+    setImage(imagekey: string, imageUrl: string):void
     /**
      * 将播放头向后移一帧并停在下一帧,如果本身在最后一帧则不做任何反应
      * @method nextFrame

package.json

 {
   "name": "@mrkwon/svga-player",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "",
   "main": "build/svgaPlayer.min.js",
   "types": "build/SvgaPlayer.d.ts",

src/MovieClip.ts

@@ -3,6 +3,7 @@
 
 
 import { EventDispatcher, Event } from "./EventDispatcher";
+import { _bitmapCache } from "./SvgaStage";
 
 /**
  * 动画类
@@ -223,6 +224,18 @@ export class MovieClip extends EventDispatcher {
         }
     }
 
+    /**
+     * 
+     * @param imagekey 对应的imagekey
+     * @param imageUrl 图片路径，以后考虑支持多种形式
+     */
+    setImage(imagekey: string, imageUrl: string) {
+        if (!this.videoItem.images[imagekey]) return;
+        //从缓存去掉
+        _bitmapCache[imagekey] = 0;
+        //修改数据
+        this.videoItem.images[imagekey] = imageUrl;
+    }
 
     /**
      * 调用止方法将停止当前帧

src/SvgaStage.ts

@@ -33,7 +33,7 @@ export class SvgaStage extends EventDispatcher {
         this.children = [];
         //计算canvas尺寸和动画显示尺寸之间的比例，暂时只有缩放
         this.resolution = resolution;
-        this.requestAnimationFrame = canvas.requestAnimationFrame&&canvas.requestAnimationFrame.bind(canvas)||window.requestAnimationFrame.bind(window)
+        this.requestAnimationFrame = canvas.requestAnimationFrame && canvas.requestAnimationFrame.bind(canvas) || window.requestAnimationFrame.bind(window)
         //直接刷吧
         // this.flush();
     }
@@ -108,14 +108,16 @@ export class SvgaStage extends EventDispatcher {
                 //加载
                 if (!_bitmapCache[imageKey]) {
                     let src = child.videoItem.images[imageKey];
+                    let imgTag = this.canvas.createImage && this.canvas.createImage() || new Image();
+                    imgTag.onload = function () {
+                        _bitmapCache[imageKey] = imgTag;
+                    };
                     if (src.indexOf("iVBO") === 0 || src.indexOf("/9j/2w") === 0) {
-                        let imgTag = this.canvas.createImage && this.canvas.createImage() || new Image();
-                        imgTag.onload = function () {
-                            _bitmapCache[imageKey] = imgTag;
-                        };
                         imgTag.src = 'data:image/png;base64,' + src;
-                        _bitmapCache[imageKey] = 1;//表示在加载中
+                    } else {
+                        imgTag.src = src;
                     }
+                    _bitmapCache[imageKey] = 1;//表示在加载中
                 }
                 //绘制
                 else {

test/test.html

@@ -13,6 +13,8 @@
             var svgaStage = new SvgaPlayer.SvgaStage(canvas)
             //加载动画数据
             SvgaPlayer.loadSvga("./angel.svga", function (videoItem) {
+                console.log(videoItem)
+
                 //实例化动画
                 var mv = new SvgaPlayer.MovieClip(videoItem);
                 //添加进动画容器
@@ -29,6 +31,7 @@
                     mv.startAniRange(1, mv.totalFrames / 2, 2, () => {
                         console.log(112)
                     })
+                    mv.setImage("GuangHuan","https://cdn2.jianshu.io/assets/default_avatar/6-fd30f34c8641f6f32f5494df5d6b8f3c.jpg")
                 }, 2000)
 
                 // mv.rotation = 45