Async animate

docs/api.md

@@ -474,7 +474,7 @@ core.ui.getContextByName(name)
 core.clearMap(name)
 清空某个画布图层。
 name为画布名，可以是系统画布之一，也可以是任意自定义动态创建的画布名。
-如果name也可以是'all'，若为all则为清空除色调层外的所有系统画布。
+如果name也可以是'all'，若为all则为清空所有系统画布。
 
 
 core.ui.fillText(name, text, x, y, style, font)

libs/control.js

@@ -127,12 +127,21 @@ control.prototype.setRequestAnimationFrame = function () {
         // Animate
         if (timestamp-core.animateFrame.animateTime>50 && core.isset(core.status.animateObjs) && core.status.animateObjs.length>0) {
             core.clearMap('animate');
-            core.status.animateObjs = core.status.animateObjs.filter(function (obj) {
-                return obj.index < obj.animate.frames.length;
-            });
-            core.status.animateObjs.forEach(function (obj) {
-                core.maps.drawAnimateFrame(obj.animate, obj.centerX, obj.centerY, obj.index++);
-            });
+            // 更新帧
+            var animateObjs = [];
+            for (var i=0;i<core.status.animateObjs.length;i++) {
+                var obj = core.status.animateObjs[i];
+                if (obj.index == obj.animate.frames.length) {
+                    // 绘制完毕
+                    if (core.isset(obj.callback)) obj.callback();
+                    delete core.animateFrame.asyncId[obj.id];
+                }
+                else {
+                    core.maps.drawAnimateFrame(obj.animate, obj.centerX, obj.centerY, obj.index++);
+                    animateObjs.push(obj);
+                }
+            }
+            core.status.animateObjs = animateObjs;
             core.animateFrame.animateTime = timestamp;
         }
 

libs/core.js

@@ -25,7 +25,6 @@ function core() {
         'heroMoveInterval': null,
         "tipAnimate": null,
         'openDoorAnimate': null,
-        'animateInterval': null,
         'onDownInterval': null,
     }
     this.animateFrame = {
@@ -630,6 +629,11 @@ core.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback,
     core.events.changeFloor(floorId, stair, heroLoc, time, callback, fromLoad);
 }
 
+////// 从名字获得画布 //////
+core.prototype.getContextByName = function (name) {
+    return core.ui.getContextByName(name);
+}
+
 ////// 清除地图 //////
 core.prototype.clearMap = function (name, x, y, width, height) {
     core.ui.clearMap(name, x, y, width, height);

libs/maps.js

@@ -1376,34 +1376,22 @@ maps.prototype.drawAnimate = function (name, x, y, callback) {
         return;
     }
 
-    clearInterval(core.interval.animateInterval);
-
     // 开始绘制
     var animate = core.material.animates[name], centerX = 32*x+16, centerY = 32*y+16;
     // 播放音效
     core.playSound(animate.se);
 
-    // 异步绘制：使用requestAnimationFrame进行绘制
-    if (!core.isset(callback)) {
-        core.status.animateObjs.push({"animate": animate, "centerX": centerX, "centerY": centerY, "index": 0});
-        return;
-    }
+    var animateId = parseInt(Math.random() * 100000000);
+    core.status.animateObjs.push({
+        "animate": animate,
+        "centerX": centerX,
+        "centerY": centerY,
+        "index": 0,
+        "id": animateId,
+        "callback": callback
+    });
 
-    var index=0;
-    core.clearMap('animate');
-    core.maps.drawAnimateFrame(animate, centerX, centerY, index++);
-
-    core.interval.animateInterval = setInterval(function (t) {
-        if (index == animate.frames.length) {
-            clearInterval(core.interval.animateInterval);
-            core.clearMap('animate');
-            core.setAlpha('animate', 1);
-            if (core.isset(callback)) callback();
-            return;
-        }
-        core.clearMap('animate');
-        core.maps.drawAnimateFrame(animate, centerX, centerY, index++);
-    }, 50);
+    core.animateFrame.asyncId[animateId] = true;
 }
 
 maps.prototype.setFloorImage = function (type, loc, floorId, callback) {

libs/ui.js

@@ -1816,8 +1816,7 @@ ui.prototype.drawMaps = function (index, x, y) {
         core.status.event.data = null;
         core.clearLastEvent();
 
-        core.clearMap('animate');
-        core.fillRect('animate', 0, 0, 416, 416, 'rgba(0,0,0,0.4)');
+        core.fillRect('ui', 0, 0, 416, 416, 'rgba(0,0,0,0.4)');
 
         core.strokeRect('ui', 66, 2, 284, 60, "#FFD700", 4);
         core.strokeRect('ui', 2, 66, 60, 284);
@@ -1857,8 +1856,6 @@ ui.prototype.drawMaps = function (index, x, y) {
         return;
     }
 
-    core.clearMap('animate');
-
     var damage = (core.status.event.data||{}).damage, paint =  (core.status.event.data||{}).paint;
     var all = (core.status.event.data||{}).all;
     if (core.isset(index.damage)) damage=index.damage;
@@ -1884,8 +1881,7 @@ ui.prototype.drawMaps = function (index, x, y) {
     core.status.event.data = {"index": index, "x": x, "y": y, "damage": damage, "paint": paint, "all": all};
 
     clearTimeout(core.interval.tipAnimate);
-    core.clearMap('ui');
-    core.setAlpha('ui', 1);
+    core.clearLastEvent();
     this.drawThumbnail(floorId, 'ui', core.status.maps[floorId].blocks, 0, 0, 416, x, y);
 
     // 绘图

project/functions.js

@@ -1258,7 +1258,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
 	this.drawLight = function (color, lights, lightDec) {
 		// 清空色调层；也可以修改成其它层比如animate/weather层，或者用自己创建的canvas
 		var canvasName = 'curtain';
-		var ctx = core.ui.getContextByName(canvasName);
+		var ctx = core.getContextByName(canvasName);
 		if (ctx == null) return;
 
 		ctx.mozImageSmoothingEnabled = false;