leafer-game 1.3.1 → 1.3.2

package/dist/web.module.js

@@ -6007,7 +6007,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.3.1";
+const version = "1.3.2";
 
 const debug$5 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6226,7 +6226,7 @@ function useCanvas(_canvasType, _power) {
         },
         loadImage(src) {
             return new Promise((resolve, reject) => {
-                const img = new Image();
+                const img = new Platform.origin.Image();
                 const { crossOrigin } = Platform.image;
                 if (crossOrigin) {
                     img.setAttribute('crossOrigin', crossOrigin);
@@ -6236,7 +6236,10 @@ function useCanvas(_canvasType, _power) {
                 img.onerror = (e) => { reject(e); };
                 img.src = Platform.image.getRealURL(src);
             });
-        }
+        },
+        Image,
+        PointerEvent,
+        DragEvent
     };
     Platform.event = {
         stopDefault(origin) { origin.preventDefault(); },
@@ -6712,7 +6715,7 @@ class Renderer {
     partRender() {
         const { canvas, updateBlocks: list } = this;
         if (!list)
-            return debug$3.warn('PartRender: need update attr');
+            return;
         this.mergeBlocks();
         list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
             this.clipRender(block); });
@@ -7568,7 +7571,7 @@ let UI = UI_1 = class UI extends Leaf {
     animate(_keyframe, _options, _type, _isTemp) {
         return Plugin.need('animate');
     }
-    killAnimate(_type, _killStyle) { }
+    killAnimate(_type, _nextStyle) { }
     export(_filename, _options) {
         return Plugin.need('export');
     }
@@ -8064,8 +8067,6 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         this.created = true;
     }
     __onReady() {
-        if (this.ready)
-            return;
         this.ready = true;
         this.emitLeafer(LeaferEvent.BEFORE_READY);
         this.emitLeafer(LeaferEvent.READY);
@@ -8079,6 +8080,20 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         this.emitLeafer(LeaferEvent.VIEW_READY);
         WaitHelper.run(this.__viewReadyWait);
     }
+    __onLayoutEnd() {
+        const { grow, growWidth, growHeight } = this.config;
+        if (grow) {
+            let { width, height, pixelRatio } = this;
+            const bounds = grow === 'box' ? this.worldBoxBounds : this.__world;
+            if (growWidth !== false)
+                width = Math.max(1, bounds.x + bounds.width);
+            if (growHeight !== false)
+                height = Math.max(1, bounds.y + bounds.height);
+            this.__doResize({ width, height, pixelRatio });
+        }
+        if (!this.ready)
+            this.__onReady();
+    }
     __onNextRender() {
         if (this.viewReady) {
             WaitHelper.run(this.__nextRenderWait);
@@ -8172,10 +8187,9 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         const runId = Run.start('FirstCreate ' + this.innerName);
         this.once(LeaferEvent.START, () => Run.end(runId));
         this.once(LayoutEvent.START, () => this.updateLazyBounds());
-        this.once(LayoutEvent.END, () => this.__onReady());
         this.once(RenderEvent.START, () => this.__onCreated());
         this.once(RenderEvent.END, () => this.__onViewReady());
-        this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(RenderEvent.NEXT, this.__onNextRender, this));
+        this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(LayoutEvent.END, this.__onLayoutEnd, this), this.on_(RenderEvent.NEXT, this.__onNextRender, this));
     }
     __removeListenEvents() {
         this.off_(this.__eventIds);
@@ -9104,34 +9118,34 @@ class UIEvent extends Event {
     }
 }
 
-let PointerEvent = class PointerEvent extends UIEvent {
+let PointerEvent$1 = class PointerEvent extends UIEvent {
 };
-PointerEvent.POINTER = 'pointer';
-PointerEvent.BEFORE_DOWN = 'pointer.before_down';
-PointerEvent.BEFORE_MOVE = 'pointer.before_move';
-PointerEvent.BEFORE_UP = 'pointer.before_up';
-PointerEvent.DOWN = 'pointer.down';
-PointerEvent.MOVE = 'pointer.move';
-PointerEvent.UP = 'pointer.up';
-PointerEvent.OVER = 'pointer.over';
-PointerEvent.OUT = 'pointer.out';
-PointerEvent.ENTER = 'pointer.enter';
-PointerEvent.LEAVE = 'pointer.leave';
-PointerEvent.TAP = 'tap';
-PointerEvent.DOUBLE_TAP = 'double_tap';
-PointerEvent.CLICK = 'click';
-PointerEvent.DOUBLE_CLICK = 'double_click';
-PointerEvent.LONG_PRESS = 'long_press';
-PointerEvent.LONG_TAP = 'long_tap';
-PointerEvent.MENU = 'pointer.menu';
-PointerEvent.MENU_TAP = 'pointer.menu_tap';
-PointerEvent = __decorate([
+PointerEvent$1.POINTER = 'pointer';
+PointerEvent$1.BEFORE_DOWN = 'pointer.before_down';
+PointerEvent$1.BEFORE_MOVE = 'pointer.before_move';
+PointerEvent$1.BEFORE_UP = 'pointer.before_up';
+PointerEvent$1.DOWN = 'pointer.down';
+PointerEvent$1.MOVE = 'pointer.move';
+PointerEvent$1.UP = 'pointer.up';
+PointerEvent$1.OVER = 'pointer.over';
+PointerEvent$1.OUT = 'pointer.out';
+PointerEvent$1.ENTER = 'pointer.enter';
+PointerEvent$1.LEAVE = 'pointer.leave';
+PointerEvent$1.TAP = 'tap';
+PointerEvent$1.DOUBLE_TAP = 'double_tap';
+PointerEvent$1.CLICK = 'click';
+PointerEvent$1.DOUBLE_CLICK = 'double_click';
+PointerEvent$1.LONG_PRESS = 'long_press';
+PointerEvent$1.LONG_TAP = 'long_tap';
+PointerEvent$1.MENU = 'pointer.menu';
+PointerEvent$1.MENU_TAP = 'pointer.menu_tap';
+PointerEvent$1 = __decorate([
     registerUIEvent()
-], PointerEvent);
-const MyPointerEvent = PointerEvent;
+], PointerEvent$1);
+const MyPointerEvent = PointerEvent$1;
 
 const tempMove = {};
-let DragEvent = class DragEvent extends PointerEvent {
+let DragEvent$1 = class DragEvent extends PointerEvent$1 {
     static setList(data) {
         this.list = data instanceof LeafList ? data : new LeafList(data);
     }
@@ -9212,25 +9226,25 @@ let DragEvent = class DragEvent extends PointerEvent {
         tempMove.y = total ? this.totalY : this.moveY;
     }
 };
-DragEvent.BEFORE_DRAG = 'drag.before_drag';
-DragEvent.START = 'drag.start';
-DragEvent.DRAG = 'drag';
-DragEvent.END = 'drag.end';
-DragEvent.OVER = 'drag.over';
-DragEvent.OUT = 'drag.out';
-DragEvent.ENTER = 'drag.enter';
-DragEvent.LEAVE = 'drag.leave';
-DragEvent = __decorate([
+DragEvent$1.BEFORE_DRAG = 'drag.before_drag';
+DragEvent$1.START = 'drag.start';
+DragEvent$1.DRAG = 'drag';
+DragEvent$1.END = 'drag.end';
+DragEvent$1.OVER = 'drag.over';
+DragEvent$1.OUT = 'drag.out';
+DragEvent$1.ENTER = 'drag.enter';
+DragEvent$1.LEAVE = 'drag.leave';
+DragEvent$1 = __decorate([
     registerUIEvent()
-], DragEvent);
-const MyDragEvent = DragEvent;
+], DragEvent$1);
+const MyDragEvent = DragEvent$1;
 
-let DropEvent = class DropEvent extends PointerEvent {
+let DropEvent = class DropEvent extends PointerEvent$1 {
     static setList(data) {
-        DragEvent.setList(data);
+        DragEvent$1.setList(data);
     }
     static setData(data) {
-        DragEvent.setData(data);
+        DragEvent$1.setData(data);
     }
 };
 DropEvent.DROP = 'drop';
@@ -9238,7 +9252,7 @@ DropEvent = __decorate([
     registerUIEvent()
 ], DropEvent);
 
-let MoveEvent = class MoveEvent extends DragEvent {
+let MoveEvent = class MoveEvent extends DragEvent$1 {
 };
 MoveEvent.BEFORE_MOVE = 'move.before_move';
 MoveEvent.START = 'move.start';
@@ -9258,7 +9272,7 @@ RotateEvent = __decorate([
     registerUIEvent()
 ], RotateEvent);
 
-let SwipeEvent = class SwipeEvent extends DragEvent {
+let SwipeEvent = class SwipeEvent extends DragEvent$1 {
 };
 SwipeEvent.SWIPE = 'swipe';
 SwipeEvent.LEFT = 'swipe.left';
@@ -9338,7 +9352,7 @@ const InteractionHelper = {
         return find;
     },
     pathCanDrag(path) {
-        return path && path.list.some(item => item.draggable || item.editable || (!item.isLeafer && item.hasEvent(DragEvent.DRAG)));
+        return path && path.list.some(item => item.draggable || item.editable || (!item.isLeafer && item.hasEvent(DragEvent$1.DRAG)));
     },
     pathHasOutside(path) {
         return path && path.list.some(item => item.isOutside);
@@ -9361,7 +9375,7 @@ class Dragger {
     }
     getList(realDraggable, hover) {
         const { proxy } = this.interaction.selector;
-        const hasProxyList = proxy && proxy.list.length, dragList = DragEvent.list || this.draggableList || emptyList;
+        const hasProxyList = proxy && proxy.list.length, dragList = DragEvent$1.list || this.draggableList || emptyList;
         return this.dragging && (hasProxyList ? (realDraggable ? emptyList : new LeafList(hover ? [...proxy.list, ...proxy.dragHoverExclude] : proxy.list)) : dragList);
     }
     checkDrag(data, canDrag) {
@@ -9385,7 +9399,7 @@ class Dragger {
         if (!this.dragging) {
             this.dragging = canDrag && PointerButton.left(data);
             if (this.dragging) {
-                this.interaction.emit(DragEvent.START, this.dragData);
+                this.interaction.emit(DragEvent$1.START, this.dragData);
                 this.getDraggableList(this.dragData.path);
                 this.setDragStartPoints(this.realDraggableList = this.getList(true));
             }
@@ -9419,8 +9433,8 @@ class Dragger {
         }
         else if (this.dragging) {
             this.dragReal();
-            interaction.emit(DragEvent.BEFORE_DRAG, this.dragData);
-            interaction.emit(DragEvent.DRAG, this.dragData);
+            interaction.emit(DragEvent$1.BEFORE_DRAG, this.dragData);
+            interaction.emit(DragEvent$1.DRAG, this.dragData);
         }
     }
     dragReal() {
@@ -9428,7 +9442,7 @@ class Dragger {
         const list = this.realDraggableList;
         if (list.length && running) {
             const { totalX, totalY } = this.dragData;
-            list.forEach(leaf => leaf.draggable && leaf.move(DragEvent.getValidMove(leaf, this.dragStartPoints[leaf.innerId], { x: totalX, y: totalY })));
+            list.forEach(leaf => leaf.draggable && leaf.move(DragEvent$1.getValidMove(leaf, this.dragStartPoints[leaf.innerId], { x: totalX, y: totalY })));
         }
     }
     dragOverOrOut(data) {
@@ -9438,19 +9452,19 @@ class Dragger {
         this.dragOverPath = path;
         if (dragOverPath) {
             if (path.indexAt(0) !== dragOverPath.indexAt(0)) {
-                interaction.emit(DragEvent.OUT, data, dragOverPath);
-                interaction.emit(DragEvent.OVER, data, path);
+                interaction.emit(DragEvent$1.OUT, data, dragOverPath);
+                interaction.emit(DragEvent$1.OVER, data, path);
             }
         }
         else
-            interaction.emit(DragEvent.OVER, data, path);
+            interaction.emit(DragEvent$1.OVER, data, path);
     }
     dragEnterOrLeave(data) {
         const { interaction } = this;
         const { dragEnterPath } = this;
         const { path } = data;
-        interaction.emit(DragEvent.LEAVE, data, dragEnterPath, path);
-        interaction.emit(DragEvent.ENTER, data, path, dragEnterPath);
+        interaction.emit(DragEvent$1.LEAVE, data, dragEnterPath, path);
+        interaction.emit(DragEvent$1.ENTER, data, path, dragEnterPath);
         this.dragEnterPath = path;
     }
     dragEnd(data, speed) {
@@ -9477,7 +9491,7 @@ class Dragger {
         if (this.dragging) {
             const dropList = this.getList();
             this.dragging = false;
-            interaction.emit(DragEvent.END, endDragData);
+            interaction.emit(DragEvent$1.END, endDragData);
             this.swipe(data, downData, dragData, endDragData);
             this.drop(data, dropList, this.dragEnterPath);
         }
@@ -9493,13 +9507,13 @@ class Dragger {
         }
     }
     drop(data, dropList, dragEnterPath) {
-        const dropData = getDropEventData(data, dropList, DragEvent.data);
+        const dropData = getDropEventData(data, dropList, DragEvent$1.data);
         dropData.path = dragEnterPath;
         this.interaction.emit(DropEvent.DROP, dropData);
-        this.interaction.emit(DragEvent.LEAVE, data, dragEnterPath);
+        this.interaction.emit(DragEvent$1.LEAVE, data, dragEnterPath);
     }
     dragReset() {
-        DragEvent.list = DragEvent.data = this.draggableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
+        DragEvent$1.list = DragEvent$1.data = this.draggableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
     }
     checkDragEndAnimate(_data, _speed) { return false; }
     animate(_func, _off) { }
@@ -9646,8 +9660,8 @@ class InteractionBase {
         this.updateDownData(data);
         this.checkPath(data, useDefaultPath);
         this.downTime = Date.now();
-        this.emit(PointerEvent.BEFORE_DOWN, data);
-        this.emit(PointerEvent.DOWN, data);
+        this.emit(PointerEvent$1.BEFORE_DOWN, data);
+        this.emit(PointerEvent$1.DOWN, data);
         if (PointerButton.left(data)) {
             this.tapWait();
             this.longPressWait(data);
@@ -9674,7 +9688,7 @@ class InteractionBase {
     }
     pointerMoveReal(data) {
         const { dragHover, dragDistance } = this.p;
-        this.emit(PointerEvent.BEFORE_MOVE, data, this.defaultPath);
+        this.emit(PointerEvent$1.BEFORE_MOVE, data, this.defaultPath);
         if (this.downData) {
             const canDrag = PointHelper.getDistance(this.downData, data) > dragDistance;
             if (canDrag) {
@@ -9687,7 +9701,7 @@ class InteractionBase {
         if (!this.dragger.moving) {
             this.updateHoverData(data);
             this.checkPath(data);
-            this.emit(PointerEvent.MOVE, data);
+            this.emit(PointerEvent$1.MOVE, data);
             if (!(this.dragging && !dragHover))
                 this.pointerHover(data);
             if (this.dragger.dragging) {
@@ -9710,8 +9724,8 @@ class InteractionBase {
         data.path.addList(downData.path.list);
         this.checkPath(data);
         this.downData = null;
-        this.emit(PointerEvent.BEFORE_UP, data);
-        this.emit(PointerEvent.UP, data);
+        this.emit(PointerEvent$1.BEFORE_UP, data);
+        this.emit(PointerEvent$1.UP, data);
         this.touchLeave(data);
         if (!data.isCancel) {
             this.tap(data);
@@ -9727,14 +9741,14 @@ class InteractionBase {
     }
     menu(data) {
         this.findPath(data);
-        this.emit(PointerEvent.MENU, data);
+        this.emit(PointerEvent$1.MENU, data);
         this.waitMenuTap = true;
         if (!this.downData && this.waitRightTap)
             this.menuTap(data);
     }
     menuTap(data) {
         if (this.waitRightTap && this.waitMenuTap) {
-            this.emit(PointerEvent.MENU_TAP, data);
+            this.emit(PointerEvent$1.MENU_TAP, data);
             this.waitRightTap = this.waitMenuTap = false;
         }
     }
@@ -9782,12 +9796,12 @@ class InteractionBase {
         this.overPath = path;
         if (overPath) {
             if (path.indexAt(0) !== overPath.indexAt(0)) {
-                this.emit(PointerEvent.OUT, data, overPath);
-                this.emit(PointerEvent.OVER, data, path);
+                this.emit(PointerEvent$1.OUT, data, overPath);
+                this.emit(PointerEvent$1.OVER, data, path);
             }
         }
         else {
-            this.emit(PointerEvent.OVER, data, path);
+            this.emit(PointerEvent$1.OVER, data, path);
         }
     }
     pointerEnterOrLeave(data) {
@@ -9798,13 +9812,13 @@ class InteractionBase {
         }
         const { enterPath } = this;
         this.enterPath = path;
-        this.emit(PointerEvent.LEAVE, data, enterPath, path);
-        this.emit(PointerEvent.ENTER, data, path, enterPath);
+        this.emit(PointerEvent$1.LEAVE, data, enterPath, path);
+        this.emit(PointerEvent$1.ENTER, data, path, enterPath);
     }
     touchLeave(data) {
         if (data.pointerType === 'touch') {
             if (this.enterPath) {
-                this.emit(PointerEvent.LEAVE, data);
+                this.emit(PointerEvent$1.LEAVE, data);
                 if (this.dragger.dragging)
                     this.emit(DropEvent.LEAVE, data);
             }
@@ -9820,7 +9834,7 @@ class InteractionBase {
         if (pointer.tapMore)
             this.emitTap(data);
         const useTime = Date.now() - this.downTime;
-        const hasDouble = [PointerEvent.DOUBLE_TAP, PointerEvent.DOUBLE_CLICK].some(type => pathHasEventType(data.path, type));
+        const hasDouble = [PointerEvent$1.DOUBLE_TAP, PointerEvent$1.DOUBLE_CLICK].some(type => pathHasEventType(data.path, type));
         if (useTime < pointer.tapTime + 50 && hasDouble) {
             this.tapCount++;
             if (this.tapCount === 2) {
@@ -9904,7 +9918,7 @@ class InteractionBase {
             data = this.hoverData;
         if (!data)
             return;
-        this.findPath(data, { exclude: this.dragger.getList(false, true), name: PointerEvent.MOVE });
+        this.findPath(data, { exclude: this.dragger.getList(false, true), name: PointerEvent$1.MOVE });
         this.hoverData = data;
     }
     updateCursor(data) {
@@ -9940,12 +9954,12 @@ class InteractionBase {
         return { x: clientPoint.clientX - clientBounds.x, y: clientPoint.clientY - clientBounds.y };
     }
     emitTap(data) {
-        this.emit(PointerEvent.TAP, data);
-        this.emit(PointerEvent.CLICK, data);
+        this.emit(PointerEvent$1.TAP, data);
+        this.emit(PointerEvent$1.CLICK, data);
     }
     emitDoubleTap(data) {
-        this.emit(PointerEvent.DOUBLE_TAP, data);
-        this.emit(PointerEvent.DOUBLE_CLICK, data);
+        this.emit(PointerEvent$1.DOUBLE_TAP, data);
+        this.emit(PointerEvent$1.DOUBLE_CLICK, data);
     }
     pointerWaitCancel() {
         this.tapWaitCancel();
@@ -9964,14 +9978,14 @@ class InteractionBase {
         clearTimeout(this.longPressTimer);
         this.longPressTimer = setTimeout(() => {
             this.longPressed = true;
-            this.emit(PointerEvent.LONG_PRESS, data);
+            this.emit(PointerEvent$1.LONG_PRESS, data);
         }, this.p.longPressTime);
     }
     longTap(data) {
         let hasLong;
         if (this.longPressed) {
-            this.emit(PointerEvent.LONG_TAP, data);
-            if (pathHasEventType(data.path, PointerEvent.LONG_TAP) || pathHasEventType(data.path, PointerEvent.LONG_PRESS))
+            this.emit(PointerEvent$1.LONG_TAP, data);
+            if (pathHasEventType(data.path, PointerEvent$1.LONG_TAP) || pathHasEventType(data.path, PointerEvent$1.LONG_PRESS))
                 hasLong = true;
         }
         this.longPressWaitCancel();
@@ -11726,7 +11740,7 @@ function layoutChar(drawData, style, width, _height) {
     rows.forEach(row => {
         if (row.words) {
             indentWidth = paraIndent && row.paraStart ? paraIndent : 0;
-            addWordWidth = (width && textAlign === 'justify' && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
+            addWordWidth = (width && (textAlign === 'justify' || textAlign === 'both') && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
             mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : TextMode);
             if (row.isOverflow && !letterSpacing)
                 row.textMode = true;
@@ -11748,7 +11762,7 @@ function layoutChar(drawData, style, width, _height) {
                     else {
                         charX = toChar(word.data, charX, row.data, row.isOverflow);
                     }
-                    if (!row.paraEnd && addWordWidth) {
+                    if (addWordWidth && (!row.paraEnd || textAlign === 'both')) {
                         charX += addWordWidth;
                         row.width += addWordWidth;
                     }
@@ -12223,7 +12237,9 @@ function updateStyle(leaf, style, type) {
         type = null;
     let transition = type ? getTransition(type, style, leaf) : false;
     const fromStyle = transition ? getFromStyle(leaf, style) : undefined;
-    leaf.killAnimate('transition');
+    const nextStyle = State.canAnimate && getStyle(leaf);
+    if (nextStyle)
+        leaf.killAnimate('transition');
     if (normalStyle)
         leaf.set(normalStyle, 'temp');
     const statesStyle = getStyle(leaf);
@@ -12384,16 +12400,16 @@ function unsetChildrenState(children, stateType, state) {
 
 function updateEventStyle(leaf, eventType) {
     switch (eventType) {
-        case PointerEvent.ENTER:
+        case PointerEvent$1.ENTER:
             setPointerState(leaf, 'hoverStyle');
             break;
-        case PointerEvent.LEAVE:
+        case PointerEvent$1.LEAVE:
             unsetPointerState(leaf, 'hoverStyle');
             break;
-        case PointerEvent.DOWN:
+        case PointerEvent$1.DOWN:
             setPointerState(leaf, 'pressStyle');
             break;
-        case PointerEvent.UP:
+        case PointerEvent$1.UP:
             unsetPointerState(leaf, 'pressStyle');
             break;
     }
@@ -12596,8 +12612,11 @@ function animationType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
             this.__setAttr(key, value);
-            if (this.leafer)
-                value ? this.animate(value, undefined, 'animation') : this.killAnimate('animation');
+            if (this.leafer) {
+                this.killAnimate('animation');
+                if (value)
+                    this.animate(value, undefined, 'animation');
+            }
         }
     }));
 }
@@ -12634,6 +12653,7 @@ let Animate = class Animate extends Eventer {
     get completed() { return this.time >= this.duration && !this.started; }
     get frame() { return this.frames[this.nowIndex]; }
     get frameTotalTime() { return this.frame.totalTime || this.frame.duration || 0; }
+    get nowReverse() { return (this.mainReverse ? 1 : 0) + (this.frameReverse ? 1 : 0) === 1; }
     get realEnding() {
         let count;
         const { ending, reverse, loop } = this;
@@ -12650,6 +12670,12 @@ let Animate = class Animate extends Eventer {
     }
     constructor(target, keyframe, options, isTemp) {
         super();
+        if (keyframe) {
+            if (keyframe.keyframes)
+                options = keyframe, keyframe = keyframe.keyframes;
+            else if (keyframe.style)
+                options = keyframe, keyframe = keyframe.style;
+        }
         this.init(target, keyframe, options, isTemp);
     }
     init(target, keyframe, options, isTemp) {
@@ -12665,16 +12691,14 @@ let Animate = class Animate extends Eventer {
                 break;
             case 'object': this.config = options, options.event && (this.event = options.event);
         }
-        if (!keyframe)
-            return;
-        this.keyframes = keyframe instanceof Array ? keyframe : [keyframe];
+        this.keyframes = keyframe instanceof Array ? keyframe : (keyframe ? [keyframe] : []);
         const { easing, attrs } = this;
         this.easingFn = AnimateEasing.get(easing);
         if (attrs || this.attrsMap)
             this.attrsMap = attrs ? attrs.reduce((map, value) => { map[value] = true; return map; }, {}) : undefined;
         this.frames = [];
         this.create();
-        if (this.autoplay)
+        if (this.autoplay && this.frames.length)
             this.timer = setTimeout(() => {
                 this.timer = 0;
                 this.play();
@@ -12723,7 +12747,7 @@ let Animate = class Animate extends Eventer {
     }
     create() {
         const { target, frames, keyframes, config } = this, { length } = keyframes, joinBefore = length > 1 ? this.join : true;
-        let addedDuration = 0, totalAutoDuration = 0, before, keyframe, item, style;
+        let totalTime = 0, totalAutoTime = 0, before, keyframe, item, style, times;
         if (length > 1)
             this.fromStyle = {}, this.toStyle = {};
         for (let i = 0; i < length; i++) {
@@ -12732,27 +12756,32 @@ let Animate = class Animate extends Eventer {
             if (!before)
                 before = joinBefore ? target : style;
             item = { style, beforeStyle: {} };
+            times = 1;
             if (keyframe.style) {
-                const { duration, autoDuration, delay, autoDelay, easing } = keyframe;
+                const { duration, autoDuration, delay, autoDelay, easing, swing, loop } = keyframe;
+                if (swing)
+                    item.swing = typeof swing === 'number' ? swing : 2, times = item.swing * 2 - 1;
+                if (loop)
+                    item.loop = times = typeof loop === 'number' ? loop : 2;
                 if (duration) {
-                    item.duration = duration, addedDuration += duration;
+                    item.duration = duration, totalTime += duration * times;
                     if (delay)
                         item.totalTime = duration + delay;
                 }
                 else {
                     if (autoDuration)
-                        item.autoDuration = autoDuration, totalAutoDuration += autoDuration;
+                        item.autoDuration = autoDuration, totalAutoTime += autoDuration * times;
                 }
                 if (delay)
-                    item.delay = delay, addedDuration += delay;
+                    item.delay = delay, totalTime += delay * times;
                 else if (autoDelay)
-                    item.autoDelay = autoDelay, totalAutoDuration += autoDelay;
+                    item.autoDelay = autoDelay, totalAutoTime += autoDelay * times;
                 if (easing)
                     item.easingFn = AnimateEasing.get(easing);
             }
             if (!item.autoDuration && item.duration === undefined) {
                 if (length > 1)
-                    (i > 0 || joinBefore) ? totalAutoDuration++ : item.duration = 0;
+                    (i > 0 || joinBefore) ? totalAutoTime += times : item.duration = 0;
                 else
                     item.duration = this.duration;
             }
@@ -12768,14 +12797,14 @@ let Animate = class Animate extends Eventer {
             before = style;
             frames.push(item);
         }
-        if (totalAutoDuration) {
-            if (this.duration <= addedDuration || !(config && config.duration))
-                this.changeDuration(addedDuration + frameDuration * totalAutoDuration);
-            this.allocateTime((this.duration - addedDuration) / totalAutoDuration);
+        if (totalAutoTime) {
+            if (this.duration <= totalTime || !(config && config.duration))
+                this.changeDuration(totalTime + frameDuration * totalAutoTime);
+            this.allocateTime((this.duration - totalTime) / totalAutoTime);
         }
         else {
-            if (addedDuration)
-                this.changeDuration(addedDuration);
+            if (totalTime)
+                this.changeDuration(totalTime);
         }
         this.emit(AnimateEvent.CREATED, this);
     }
@@ -12802,7 +12831,7 @@ let Animate = class Animate extends Eventer {
                 if (frame.autoDelay)
                     frame.delay = frame.autoDelay * partTime;
                 if (frame.delay)
-                    frame.totalTime = frame.duration, frame.totalTime += frame.delay;
+                    frame.totalTime = frame.duration + frame.delay;
             }
         }
     }
@@ -12820,7 +12849,7 @@ let Animate = class Animate extends Eventer {
         if (realTime < duration) {
             while (realTime - this.playedTotalTime > this.frameTotalTime) {
                 this.transition(1);
-                this.nowReverse ? this.reverseNextFrame() : this.nextFrame();
+                this.mainReverse ? this.reverseNextFrame() : this.nextFrame();
             }
             const itemDelay = this.nowReverse ? 0 : (this.frame.delay || 0);
             const itemPlayedTime = realTime - this.playedTotalTime - itemDelay;
@@ -12844,9 +12873,9 @@ let Animate = class Animate extends Eventer {
                 const { loop, loopDelay, swing } = this;
                 if (loop !== false || swing) {
                     this.looped ? this.looped++ : this.looped = 1;
-                    if (!(typeof loop === 'number' && (!loop || this.looped >= loop))) {
+                    if (this.needLoop(this.looped, loop, swing)) {
                         if (swing)
-                            this.nowReverse = !this.nowReverse;
+                            this.mainReverse = !this.mainReverse;
                         if (loopDelay)
                             this.timer = setTimeout(() => { this.timer = 0, this.begin(); }, loopDelay / this.speed * 1000);
                         else
@@ -12861,8 +12890,8 @@ let Animate = class Animate extends Eventer {
     start(seek) {
         this.requestAnimateTime = 1;
         const { reverse } = this;
-        if (reverse || this.nowReverse)
-            this.nowReverse = reverse;
+        if (reverse || this.mainReverse)
+            this.mainReverse = reverse;
         if (this.looped)
             this.looped = 0;
         if (seek)
@@ -12880,12 +12909,12 @@ let Animate = class Animate extends Eventer {
     }
     begin(seek) {
         this.playedTotalTime = this.time = 0;
-        this.nowReverse ? this.setTo() : this.setFrom();
+        this.mainReverse ? this.setTo() : this.setFrom();
         if (!seek)
             this.requestAnimate();
     }
     end() {
-        this.nowReverse ? this.setFrom() : this.setTo();
+        this.mainReverse ? this.setFrom() : this.setTo();
     }
     complete() {
         this.requestAnimateTime = 0;
@@ -12908,15 +12937,19 @@ let Animate = class Animate extends Eventer {
         this.setStyle(this.toStyle);
     }
     nextFrame() {
+        if (this.needLoopFrame())
+            return this.increaseTime();
         if (this.nowIndex + 1 >= this.frames.length)
             return;
-        this.playedTotalTime += this.frameTotalTime;
+        this.increaseTime();
         this.nowIndex++;
     }
     reverseNextFrame() {
+        if (this.needLoopFrame())
+            return this.increaseTime();
         if (this.nowIndex - 1 < 0)
             return;
-        this.playedTotalTime += this.frameTotalTime;
+        this.increaseTime();
         this.nowIndex--;
     }
     transition(t) {
@@ -12952,6 +12985,27 @@ let Animate = class Animate extends Eventer {
             target.__ ? target.set(style, this.isTemp ? 'temp' : false) : Object.assign(target, style);
         }
     }
+    increaseTime() {
+        this.playedTotalTime += this.frameTotalTime;
+    }
+    needLoop(looped, loop, swing) {
+        return !(this.needStopLoop(looped, loop) || this.needStopLoop(looped, swing, true));
+    }
+    needStopLoop(looped, times, swing) {
+        return typeof times === 'number' && (!times || looped >= (swing ? times * 2 - 1 : times));
+    }
+    needLoopFrame() {
+        const { loop, swing } = this.frame;
+        if (loop || swing) {
+            this.frameLooped ? this.frameLooped++ : this.frameLooped = 1;
+            if (swing)
+                this.frameReverse = !this.frameReverse;
+            if (this.needLoop(this.frameLooped, loop, swing))
+                return true;
+            this.frameLooped = this.frameReverse = undefined;
+        }
+        return false;
+    }
     clearTimer(fn) {
         if (this.timer) {
             clearTimeout(this.timer), this.timer = 0;
@@ -13011,6 +13065,64 @@ Animate = __decorate([
     useModule(LeafEventer)
 ], Animate);
 
+let AnimateList = class AnimateList extends Animate {
+    get completed() { return this.list.every(item => item.completed); }
+    get endingStyle() { return this._endingStyle; }
+    constructor(target, animation, isTemp) {
+        super(target, null);
+        this.list = [];
+        this.updateList(animation, isTemp);
+    }
+    updateList(animation, isTemp) {
+        this.fromStyle = {};
+        this.toStyle = {};
+        this._endingStyle = {};
+        if (!animation)
+            animation = this.list.filter(item => {
+                const { completed } = item;
+                if (completed)
+                    item.destroy();
+                return !completed;
+            });
+        this.list = animation.map(item => {
+            const animate = item.target ? item : new Animate(this.target, item, isTemp);
+            Object.assign(this.fromStyle, animate.fromStyle);
+            Object.assign(this.toStyle, animate.toStyle);
+            Object.assign(this._endingStyle, animate.endingStyle);
+            return animate;
+        });
+    }
+    play() {
+        this.each(item => item.play());
+    }
+    pause() {
+        this.each(item => item.pause());
+    }
+    stop() {
+        this.each(item => item.stop());
+    }
+    seek(time) {
+        this.each(item => item.seek(time));
+    }
+    kill(complete, killStyle) {
+        this.each(item => item.kill(complete, killStyle));
+        this.destroy();
+    }
+    each(func) {
+        this.list.forEach(func);
+    }
+    destroy(complete) {
+        const { list } = this;
+        if (list.length) {
+            this.each(item => item.destroy(complete));
+            list.length = 0;
+        }
+    }
+};
+AnimateList = __decorate([
+    useModule(LeafEventer)
+], AnimateList);
+
 const colorNames = {
     transparent: 'FFF0',
     aliceblue: 'F0F8FF',
@@ -13391,23 +13503,40 @@ dataType()(ui$2, 'transitionOut');
 ui$2.animate = function (keyframe, options, kill, isTemp) {
     if (keyframe === undefined)
         return this.__animate;
-    if (typeof keyframe === 'object') {
-        if (keyframe.keyframes)
-            options = keyframe, keyframe = keyframe.keyframes;
-        else if (keyframe.style)
-            options = keyframe, keyframe = keyframe.style;
-    }
-    const animate = new Animate(this, keyframe, options, isTemp);
-    this.killAnimate(kill, animate.toStyle);
-    return this.__animate = animate;
+    const isAnimationList = keyframe instanceof Array && !options && kill;
+    let nextAnimate = isAnimationList ? new AnimateList(this, keyframe, isTemp) : new Animate(this, keyframe, options, isTemp);
+    this.killAnimate(kill, nextAnimate.toStyle);
+    const animate = this.__animate;
+    if (animate) {
+        if (nextAnimate instanceof AnimateList)
+            nextAnimate.list.unshift(animate);
+        else
+            nextAnimate = new AnimateList(this, [animate, nextAnimate]);
+    }
+    return this.__animate = nextAnimate;
 };
-ui$2.killAnimate = function (_type, killStyle) {
+ui$2.killAnimate = function (_type, nextStyle) {
     const animate = this.__animate;
-    if (animate)
-        animate.kill(true, killStyle), this.__animate = null;
+    if (animate) {
+        let kill = false;
+        if (nextStyle && !animate.completed) {
+            if (animate instanceof AnimateList)
+                animate.updateList();
+            const { toStyle } = animate;
+            for (let key in nextStyle)
+                if (key in toStyle) {
+                    kill = true;
+                    break;
+                }
+        }
+        else
+            kill = true;
+        if (kill)
+            animate.kill(true, nextStyle), this.__animate = null;
+    }
 };
 ui$2.__runAnimation = function (type, complete) {
-    this.animate(type === 'in' ? this.animation : this.animationOut);
+    this.animate(type === 'in' ? this.animation : this.animationOut, undefined, 'animation');
     if (complete)
         this.__animate.on(AnimateEvent.COMPLETED, complete);
 };
@@ -13901,4 +14030,4 @@ Creator.finder = function (target) {
     return new Finder(target);
 };
 
-export { AlignHelper, Animate, AnimateEasing, AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Finder, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Robot, RobotData, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isNull, layoutProcessor, maskType, motionPathType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$4 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Animate, AnimateEasing, AnimateEvent, AnimateList, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Finder, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Robot, RobotData, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isNull, layoutProcessor, maskType, motionPathType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$4 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };