l

SVGA.d.ts

@@ -72,7 +72,7 @@ export class EgretMovieClip extends egret.DisplayObjectContainer {
      * 帧数范围播放
      * @param beginFrame 开始播放的帧序号，默认第一帧
      * @param endFrame 结束播放的帧序号，默认最后一帧
-     * @param loops 循环次数， 默认1次，0表示无限循环，无限循环callback无效，因为永远不会完成，用正常的complete监听最后一帧或第一帧
+     * @param loops 循环次数， 默认1次，无限循环callback无效，因为永远不会完成，用正常的complete监听最后一帧或第一帧
      * @param callback 所有播放完的回调 
      */
     startAniRange(beginFrame: number, endFrame: number, loops: number, callback?: Function): void

src/Egret/MovieClip.js

@@ -152,6 +152,7 @@ export class MovieClip extends egret.DisplayObjectContainer {
         this.initChildren(mv.sprites);
         //到时找替代的方法，用这个去循环好像，移除了还在执行
         this.addEventListener(egret.Event.ENTER_FRAME, function () {
+            if (!this.stage) return
             this.updateFrame()
         }, this)
     }
@@ -308,7 +309,7 @@ export class MovieClip extends egret.DisplayObjectContainer {
      * 播放范围动画，
      * @param beginFrame 开始帧
      * @param endFrame 结束帧
-     * @param loops 0一直循环 默认一次
+     * @param loops 默认一次
      * @param callback 
      */
     startAniRange(
@@ -354,24 +355,28 @@ export class MovieClip extends egret.DisplayObjectContainer {
         let func;
         let loopCount = loops > 0 ? (loops + 0.5 >> 0) : Infinity;
         this.addEventListener(egret.Event.ENTER_FRAME, func = function (e) {
+            if (!this.stage) return;
             if (e.target._isFront) {
-                if (e.target.currentFrame >= endFrame /*&& e.target.isInTimeFrame*/) {
-                    e.target.gotoAndPlay(beginFrame)
+                //多判断个锁步的时候怎么算loopCount-- 到时实在不行就定时器
+                if (e.target.currentFrame >= endFrame || e.target._endMark) {
                     loopCount--
-                    if (loopCount == 0) {
+                    if (loopCount <= 0) {
                         e.target.gotoAndStop(endFrame);
                         e.target.removeEventListener(egret.Event.ENTER_FRAME, func, this);
                         callback && callback();
+                    } else {
+                        e.target.gotoAndPlay(beginFrame)
                     }
                 }
             } else {
-                if (e.target.currentFrame <= beginFrame /*&& e.target.isInTimeFrame*/) {
-                    e.target.gotoAndPlay(endFrame, false);
+                if (e.target.currentFrame <= beginFrame || e.target._endMark) {
                     loopCount--
-                    if (loopCount == 0) {
+                    if (loopCount <= 0) {
                         e.target.gotoAndStop(beginFrame);
                         e.target.removeEventListener(egret.Event.ENTER_FRAME, func, this);
                         callback && callback();
+                    } else {
+                        e.target.gotoAndPlay(endFrame, false);
                     }
                 }
             }
@@ -405,6 +410,12 @@ export class MovieClip extends egret.DisplayObjectContainer {
             //帧不相等
             isNeedUpdate = true;
             s._lastFrame = s._curFrame;
+
+            s.startTime = Date.now();
+            s.startFrame = s._curFrame;
+
+            //锁步的时候
+            s._endMark = false;
         } else {
             if (s._isPlaying) {
                 if (s.lockStep) {

src/parser.js

@@ -47,7 +47,6 @@ export class Parser {
                     htmlImages[key] = backCanvas || imgTag;
                     if (count == countAll) {
                         let videoItem = new VideoEntity(movie, htmlImages);
-                        console.log(videoItem)
                         success(videoItem);
                     }
                 }

tests/fileSave.js

+/*
+* FileSaver.js
+* A saveAs() FileSaver implementation.
+*
+* By Eli Grey, http://eligrey.com
+*
+* License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
+* source  : http://purl.eligrey.com/github/FileSaver.js
+*/
+
+// The one and only way of getting global scope in all environments
+// https://stackoverflow.com/q/3277182/1008999
+var _global = typeof window === 'object' && window.window === window
+  ? window : typeof self === 'object' && self.self === self
+  ? self : typeof global === 'object' && global.global === global
+  ? global
+  : this
+
+function bom (blob, opts) {
+  if (typeof opts === 'undefined') opts = { autoBom: false }
+  else if (typeof opts !== 'object') {
+    console.warn('Deprecated: Expected third argument to be a object')
+    opts = { autoBom: !opts }
+  }
+
+  // prepend BOM for UTF-8 XML and text/* types (including HTML)
+  // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
+  if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
+    return new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type })
+  }
+  return blob
+}
+
+function download (url, name, opts) {
+  var xhr = new XMLHttpRequest()
+  xhr.open('GET', url)
+  xhr.responseType = 'blob'
+  xhr.onload = function () {
+    saveAs(xhr.response, name, opts)
+  }
+  xhr.onerror = function () {
+    console.error('could not download file')
+  }
+  xhr.send()
+}
+
+function corsEnabled (url) {
+  var xhr = new XMLHttpRequest()
+  // use sync to avoid popup blocker
+  xhr.open('HEAD', url, false)
+  try {
+    xhr.send()
+  } catch (e) {}
+  return xhr.status >= 200 && xhr.status <= 299
+}
+
+// `a.click()` doesn't work for all browsers (#465)
+function click (node) {
+  try {
+    node.dispatchEvent(new MouseEvent('click'))
+  } catch (e) {
+    var evt = document.createEvent('MouseEvents')
+    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80,
+                          20, false, false, false, false, 0, null)
+    node.dispatchEvent(evt)
+  }
+}
+
+var saveAs = _global.saveAs || (
+  // probably in some web worker
+  (typeof window !== 'object' || window !== _global)
+    ? function saveAs () { /* noop */ }
+
+  // Use download attribute first if possible (#193 Lumia mobile)
+  : 'download' in HTMLAnchorElement.prototype
+  ? function saveAs (blob, name, opts) {
+    var URL = _global.URL || _global.webkitURL
+    var a = document.createElement('a')
+    name = name || blob.name || 'download'
+
+    a.download = name
+    a.rel = 'noopener' // tabnabbing
+
+    // TODO: detect chrome extensions & packaged apps
+    // a.target = '_blank'
+
+    if (typeof blob === 'string') {
+      // Support regular links
+      a.href = blob
+      if (a.origin !== location.origin) {
+        corsEnabled(a.href)
+          ? download(blob, name, opts)
+          : click(a, a.target = '_blank')
+      } else {
+        click(a)
+      }
+    } else {
+      // Support blobs
+      a.href = URL.createObjectURL(blob)
+      setTimeout(function () { URL.revokeObjectURL(a.href) }, 4E4) // 40s
+      setTimeout(function () { click(a) }, 0)
+    }
+  }
+
+  // Use msSaveOrOpenBlob as a second approach
+  : 'msSaveOrOpenBlob' in navigator
+  ? function saveAs (blob, name, opts) {
+    name = name || blob.name || 'download'
+
+    if (typeof blob === 'string') {
+      if (corsEnabled(blob)) {
+        download(blob, name, opts)
+      } else {
+        var a = document.createElement('a')
+        a.href = blob
+        a.target = '_blank'
+        setTimeout(function () { click(a) })
+      }
+    } else {
+      navigator.msSaveOrOpenBlob(bom(blob, opts), name)
+    }
+  }
+
+  // Fallback to using FileReader and a popup
+  : function saveAs (blob, name, opts, popup) {
+    // Open a popup immediately do go around popup blocker
+    // Mostly only available on user interaction and the fileReader is async so...
+    popup = popup || open('', '_blank')
+    if (popup) {
+      popup.document.title =
+      popup.document.body.innerText = 'downloading...'
+    }
+
+    if (typeof blob === 'string') return download(blob, name, opts)
+
+    var force = blob.type === 'application/octet-stream'
+    var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari
+    var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent)
+
+    if ((isChromeIOS || (force && isSafari)) && typeof FileReader !== 'undefined') {
+      // Safari doesn't allow downloading of blob URLs
+      var reader = new FileReader()
+      reader.onloadend = function () {
+        var url = reader.result
+        url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;')
+        if (popup) popup.location.href = url
+        else location = url
+        popup = null // reverse-tabnabbing #460
+      }
+      reader.readAsDataURL(blob)
+    } else {
+      var URL = _global.URL || _global.webkitURL
+      var url = URL.createObjectURL(blob)
+      if (popup) popup.location = url
+      else location.href = url
+      popup = null // reverse-tabnabbing #460
+      setTimeout(function () { URL.revokeObjectURL(url) }, 4E4) // 40s
+    }
+  }
+)
+
+_global.saveAs = saveAs.saveAs = saveAs
+
+if (typeof module !== 'undefined') {
+  module.exports = saveAs;
+}
\ No newline at end of file

tests/show.html

+<html>
+<style>
+    .p {
+        border-width: thick;
+        border-style: solid;
+        border-color: white rgb(100%, 100%, 100%) #ffffff white;
+    }
+</style>
+
+<body style="text-align: center">
+    <div>
+        <div id="testCanvas" style="background-color: #000000; width: 500px; height: 500px; margin: auto"></div>
+        <!-- <canvas id="testCanvas" width="500" height="500" style="background-color: #000000; "></canvas> -->
+    </div>
+    <script src="./fileSave.js"></script>
+    <script src="./zepto.min.js"></script>
+    <script src="../build/svga.min.js"></script>
+    <!--<![endif]-->
+    <script>
+        var parser = new SVGA.Parser('#testCanvas')
+        var player = new SVGA.Player('#testCanvas')
+        var URL = window.webkitURL || window.URL;
+        var container = document.getElementById("testCanvas");
+        /*拖拽的目标对象------ document 监听drop 并防止浏览器打开客户端的图片*/
+        document.ondragover = function (e) {
+            e.preventDefault();  //只有在ondragover中阻止默认行为才能触发 ondrop 而不是 ondragleave
+        };
+        document.ondrop = function (e) {
+            e.preventDefault();  //阻止 document.ondrop的默认行为  *** 在新窗口中打开拖进的图片
+        };
+        /*拖拽的源对象----- 客户端的一张图片 */
+        /*拖拽目标对象-----div#container  若图片释放在此元素上方，则需要在其中显示*/
+        container.ondragover = function (e) {
+            e.preventDefault();
+        };
+
+        var name;
+
+        container.ondrop = function (e) {
+
+            var files = [];
+            [].forEach.call(e.dataTransfer.files, function (file) {
+                files.push(file);
+            }, false);
+            name = files[0].name;
+            var src = URL.createObjectURL(files[0]);
+            parser.load(src, function (videoItem) {
+                console.log(videoItem)
+                // player.setImage('./samples/avatar.png', '99')
+                player.setVideoItem(videoItem);
+                player.startAnimation();
+
+                $("canvas").addClass("p")
+
+                // exportFile(videoItem)
+                // player.startAnimationWithRange({location: 20, length: 1}, false); 
+            }, function (error) {
+                alert(error.message);
+            })
+
+        };
+
+        function exportFile(videoItem) {
+            var file = new File([JSON.stringify(aaa(videoItem))], name.split(".")[0] + ".json", { type: "text/plain;charset=utf-8" });
+            saveAs(file);
+        }
+
+        function aaa(videoItem) {
+            var obj = {};
+            obj.FPS = videoItem.FPS;
+            obj.frames = videoItem.frames;
+            obj.videoSize = videoItem.videoSize;
+            obj.sprites = [];
+            for (var i = 0; i < videoItem.sprites.length; i++) {
+                var sprite = videoItem.sprites[i];
+                var s = {};
+                s.imageKey = sprite.imageKey;
+                s.frames = [];
+                for (var j = 0; j < sprite.frames.length; j++) {
+                    var frame = sprite.frames[j];
+                    var f = {};
+                    f.alpha = frame.alpha;
+                    f.transform = [
+                        frame.transform.a,
+                        frame.transform.b,
+                        frame.transform.c,
+                        frame.transform.d,
+                        frame.transform.tx,
+                        frame.transform.ty,
+                    ];
+                    s.frames.push(f)
+                }
+                obj.sprites.push(s)
+            }
+            // obj.sprites = videoItem.sprites
+            return obj
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file