@leafer-game/miniapp 1.3.1 → 1.3.3

package/dist/miniapp.module.js

@@ -1533,10 +1533,10 @@ const DataHelper = {
         Object.keys(merge).forEach(key => {
             var _a, _b;
             value = merge[key];
-            if ((value === null || value === void 0 ? void 0 : value.constructor) === Object && ((_a = t[key]) === null || _a === void 0 ? void 0 : _a.constructor) === Object)
+            if ((value === null || value === undefined ? undefined : value.constructor) === Object && ((_a = t[key]) === null || _a === undefined ? undefined : _a.constructor) === Object)
                 return assign$1(t[key], merge[key], exclude && exclude[key]);
             if (exclude && (key in exclude)) {
-                if (((_b = exclude[key]) === null || _b === void 0 ? void 0 : _b.constructor) === Object)
+                if (((_b = exclude[key]) === null || _b === undefined ? undefined : _b.constructor) === Object)
                     assign$1(t[key] = {}, merge[key], exclude[key]);
                 return;
             }
@@ -1705,7 +1705,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 function __decorate(decorators, target, key, desc) {
@@ -1773,7 +1773,7 @@ let Canvas$1 = class Canvas {
     }
     setTransform(_a, _b, _c, _d, _e, _f) { }
     resetTransform() { }
-    getTransform() { return void 0; }
+    getTransform() { return undefined; }
     save() { }
     restore() { }
     transform(a, b, c, d, e, f) {
@@ -1830,12 +1830,12 @@ let Canvas$1 = class Canvas {
     ellipse(_x, _y, _radiusX, _radiusY, _rotation, _startAngle, _endAngle, _anticlockwise) { }
     rect(_x, _y, _width, _height) { }
     roundRect(_x, _y, _width, _height, _radius) { }
-    createConicGradient(_startAngle, _x, _y) { return void 0; }
-    createLinearGradient(_x0, _y0, _x1, _y1) { return void 0; }
-    createPattern(_image, _repetition) { return void 0; }
-    createRadialGradient(_x0, _y0, _r0, _x1, _y1, _r1) { return void 0; }
+    createConicGradient(_startAngle, _x, _y) { return undefined; }
+    createLinearGradient(_x0, _y0, _x1, _y1) { return undefined; }
+    createPattern(_image, _repetition) { return undefined; }
+    createRadialGradient(_x0, _y0, _r0, _x1, _y1, _r1) { return undefined; }
     fillText(_text, _x, _y, _maxWidth) { }
-    measureText(_text) { return void 0; }
+    measureText(_text) { return undefined; }
     strokeText(_text, _x, _y, _maxWidth) { }
     destroy() {
         this.context = null;
@@ -1843,79 +1843,79 @@ let Canvas$1 = class Canvas {
 };
 __decorate([
     contextAttr('imageSmoothingEnabled')
-], Canvas$1.prototype, "smooth", void 0);
+], Canvas$1.prototype, "smooth", undefined);
 __decorate([
     contextAttr('imageSmoothingQuality')
-], Canvas$1.prototype, "smoothLevel", void 0);
+], Canvas$1.prototype, "smoothLevel", undefined);
 __decorate([
     contextAttr('globalAlpha')
-], Canvas$1.prototype, "opacity", void 0);
+], Canvas$1.prototype, "opacity", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "fillStyle", void 0);
+], Canvas$1.prototype, "fillStyle", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "strokeStyle", void 0);
+], Canvas$1.prototype, "strokeStyle", undefined);
 __decorate([
     contextAttr('lineWidth')
-], Canvas$1.prototype, "strokeWidth", void 0);
+], Canvas$1.prototype, "strokeWidth", undefined);
 __decorate([
     contextAttr('lineCap')
-], Canvas$1.prototype, "strokeCap", void 0);
+], Canvas$1.prototype, "strokeCap", undefined);
 __decorate([
     contextAttr('lineJoin')
-], Canvas$1.prototype, "strokeJoin", void 0);
+], Canvas$1.prototype, "strokeJoin", undefined);
 __decorate([
     contextAttr('lineDashOffset')
-], Canvas$1.prototype, "dashOffset", void 0);
+], Canvas$1.prototype, "dashOffset", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "miterLimit", void 0);
+], Canvas$1.prototype, "miterLimit", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "shadowBlur", void 0);
+], Canvas$1.prototype, "shadowBlur", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "shadowColor", void 0);
+], Canvas$1.prototype, "shadowColor", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "shadowOffsetX", void 0);
+], Canvas$1.prototype, "shadowOffsetX", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "shadowOffsetY", void 0);
+], Canvas$1.prototype, "shadowOffsetY", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "filter", void 0);
+], Canvas$1.prototype, "filter", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "font", void 0);
+], Canvas$1.prototype, "font", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "fontKerning", void 0);
+], Canvas$1.prototype, "fontKerning", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "fontStretch", void 0);
+], Canvas$1.prototype, "fontStretch", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "fontVariantCaps", void 0);
+], Canvas$1.prototype, "fontVariantCaps", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "textAlign", void 0);
+], Canvas$1.prototype, "textAlign", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "textBaseline", void 0);
+], Canvas$1.prototype, "textBaseline", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "textRendering", void 0);
+], Canvas$1.prototype, "textRendering", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "wordSpacing", void 0);
+], Canvas$1.prototype, "wordSpacing", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "letterSpacing", void 0);
+], Canvas$1.prototype, "letterSpacing", undefined);
 __decorate([
     contextAttr()
-], Canvas$1.prototype, "direction", void 0);
+], Canvas$1.prototype, "direction", undefined);
 __decorate([
     contextMethod()
 ], Canvas$1.prototype, "setTransform", null);
@@ -3384,7 +3384,7 @@ class TaskItem {
         this.task = task;
     }
     run() {
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter(this, undefined, undefined, function* () {
             try {
                 if (this.task && !this.isComplete && this.parent.running)
                     yield this.task();
@@ -3696,7 +3696,7 @@ class LeaferImage {
     load(onSuccess, onError) {
         if (!this.loading) {
             this.loading = true;
-            ImageManager.tasker.add(() => __awaiter(this, void 0, void 0, function* () {
+            ImageManager.tasker.add(() => __awaiter(this, undefined, undefined, function* () {
                 return yield Platform.origin.loadImage(this.url).then((img) => {
                     this.ready = true;
                     this.width = img.naturalWidth || img.width;
@@ -5175,8 +5175,7 @@ const LeafBounds = {
     __updateAutoLayout() {
         this.__layout.matrixChanged = true;
         if (this.isBranch) {
-            if (this.leaferIsReady)
-                this.leafer.layouter.addExtra(this);
+            this.__extraUpdate();
             if (this.__.flow) {
                 if (this.__layout.boxChanged)
                     this.__updateFlowLayout();
@@ -5329,7 +5328,7 @@ let Leaf = class Leaf {
     get __worldFlipped() { return this.__world.scaleX < 0 || this.__world.scaleY < 0; }
     get __onlyHitMask() { return this.__hasMask && !this.__.hitChildren; }
     get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
-    get __inLazyBounds() { const { leafer } = this; return leafer && leafer.created && leafer.lazyBounds.hit(this.__world); }
+    get __inLazyBounds() { return this.leaferIsCreated && this.leafer.lazyBounds.hit(this.__world); }
     get pathInputed() { return this.__.__pathInputed; }
     set event(map) { this.on(map); }
     constructor(data) {
@@ -5440,6 +5439,10 @@ let Leaf = class Leaf {
     forceRender(_bounds, _sync) {
         this.forceUpdate('surface');
     }
+    __extraUpdate() {
+        if (this.leaferIsReady)
+            this.leafer.layouter.addExtra(this);
+    }
     __updateWorldMatrix() { }
     __updateLocalMatrix() { }
     __updateWorldBounds() { }
@@ -6007,7 +6010,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.3.1";
+const version = "1.3.3";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return false; }
@@ -6491,7 +6494,7 @@ class Layouter {
     }
     partLayout() {
         var _a;
-        if (!((_a = this.__updatedList) === null || _a === void 0 ? void 0 : _a.length))
+        if (!((_a = this.__updatedList) === null || _a === undefined ? undefined : _a.length))
             return;
         const t = Run.start('PartLayout');
         const { target, __updatedList: updateList } = this;
@@ -6678,7 +6681,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); });
@@ -7062,6 +7065,7 @@ class UIData extends LeafData {
         return t.fill && this.__hasStroke;
     }
     get __clipAfterFill() { const t = this; return (t.cornerRadius || t.innerShadow || t.__pathInputed); }
+    get __hasSurface() { const t = this; return (t.fill || t.stroke); }
     get __autoWidth() { return !this._width; }
     get __autoHeight() { return !this._height; }
     get __autoSide() { return !this._width || !this._height; }
@@ -7534,7 +7538,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');
     }
@@ -7565,199 +7569,199 @@ let UI = UI_1 = class UI extends Leaf {
 };
 __decorate([
     dataProcessor(UIData)
-], UI.prototype, "__", void 0);
+], UI.prototype, "__", undefined);
 __decorate([
     zoomLayerType()
-], UI.prototype, "zoomLayer", void 0);
+], UI.prototype, "zoomLayer", undefined);
 __decorate([
     dataType('')
-], UI.prototype, "id", void 0);
+], UI.prototype, "id", undefined);
 __decorate([
     dataType('')
-], UI.prototype, "name", void 0);
+], UI.prototype, "name", undefined);
 __decorate([
     dataType('')
-], UI.prototype, "className", void 0);
+], UI.prototype, "className", undefined);
 __decorate([
     surfaceType('pass-through')
-], UI.prototype, "blendMode", void 0);
+], UI.prototype, "blendMode", undefined);
 __decorate([
     opacityType(1)
-], UI.prototype, "opacity", void 0);
+], UI.prototype, "opacity", undefined);
 __decorate([
     visibleType(true)
-], UI.prototype, "visible", void 0);
+], UI.prototype, "visible", undefined);
 __decorate([
     surfaceType(false)
-], UI.prototype, "locked", void 0);
+], UI.prototype, "locked", undefined);
 __decorate([
     sortType(0)
-], UI.prototype, "zIndex", void 0);
+], UI.prototype, "zIndex", undefined);
 __decorate([
     maskType(false)
-], UI.prototype, "mask", void 0);
+], UI.prototype, "mask", undefined);
 __decorate([
     eraserType(false)
-], UI.prototype, "eraser", void 0);
+], UI.prototype, "eraser", undefined);
 __decorate([
     positionType(0, true)
-], UI.prototype, "x", void 0);
+], UI.prototype, "x", undefined);
 __decorate([
     positionType(0, true)
-], UI.prototype, "y", void 0);
+], UI.prototype, "y", undefined);
 __decorate([
     boundsType(100, true)
-], UI.prototype, "width", void 0);
+], UI.prototype, "width", undefined);
 __decorate([
     boundsType(100, true)
-], UI.prototype, "height", void 0);
+], UI.prototype, "height", undefined);
 __decorate([
     scaleType(1, true)
-], UI.prototype, "scaleX", void 0);
+], UI.prototype, "scaleX", undefined);
 __decorate([
     scaleType(1, true)
-], UI.prototype, "scaleY", void 0);
+], UI.prototype, "scaleY", undefined);
 __decorate([
     rotationType(0, true)
-], UI.prototype, "rotation", void 0);
+], UI.prototype, "rotation", undefined);
 __decorate([
     rotationType(0, true)
-], UI.prototype, "skewX", void 0);
+], UI.prototype, "skewX", undefined);
 __decorate([
     rotationType(0, true)
-], UI.prototype, "skewY", void 0);
+], UI.prototype, "skewY", undefined);
 __decorate([
     positionType(0, true)
-], UI.prototype, "offsetX", void 0);
+], UI.prototype, "offsetX", undefined);
 __decorate([
     positionType(0, true)
-], UI.prototype, "offsetY", void 0);
+], UI.prototype, "offsetY", undefined);
 __decorate([
     positionType(0, true)
-], UI.prototype, "scrollX", void 0);
+], UI.prototype, "scrollX", undefined);
 __decorate([
     positionType(0, true)
-], UI.prototype, "scrollY", void 0);
+], UI.prototype, "scrollY", undefined);
 __decorate([
     autoLayoutType()
-], UI.prototype, "origin", void 0);
+], UI.prototype, "origin", undefined);
 __decorate([
     autoLayoutType()
-], UI.prototype, "around", void 0);
+], UI.prototype, "around", undefined);
 __decorate([
     dataType(false)
-], UI.prototype, "lazy", void 0);
+], UI.prototype, "lazy", undefined);
 __decorate([
     naturalBoundsType(1)
-], UI.prototype, "pixelRatio", void 0);
+], UI.prototype, "pixelRatio", undefined);
 __decorate([
     pathInputType()
-], UI.prototype, "path", void 0);
+], UI.prototype, "path", undefined);
 __decorate([
     pathType()
-], UI.prototype, "windingRule", void 0);
+], UI.prototype, "windingRule", undefined);
 __decorate([
     pathType(true)
-], UI.prototype, "closed", void 0);
+], UI.prototype, "closed", undefined);
 __decorate([
     boundsType(0)
-], UI.prototype, "padding", void 0);
+], UI.prototype, "padding", undefined);
 __decorate([
     boundsType(false)
-], UI.prototype, "lockRatio", void 0);
+], UI.prototype, "lockRatio", undefined);
 __decorate([
     boundsType()
-], UI.prototype, "widthRange", void 0);
+], UI.prototype, "widthRange", undefined);
 __decorate([
     boundsType()
-], UI.prototype, "heightRange", void 0);
+], UI.prototype, "heightRange", undefined);
 __decorate([
     dataType(false)
-], UI.prototype, "draggable", void 0);
+], UI.prototype, "draggable", undefined);
 __decorate([
     dataType()
-], UI.prototype, "dragBounds", void 0);
+], UI.prototype, "dragBounds", undefined);
 __decorate([
     dataType(false)
-], UI.prototype, "editable", void 0);
+], UI.prototype, "editable", undefined);
 __decorate([
     hitType(true)
-], UI.prototype, "hittable", void 0);
+], UI.prototype, "hittable", undefined);
 __decorate([
     hitType('path')
-], UI.prototype, "hitFill", void 0);
+], UI.prototype, "hitFill", undefined);
 __decorate([
     strokeType('path')
-], UI.prototype, "hitStroke", void 0);
+], UI.prototype, "hitStroke", undefined);
 __decorate([
     hitType(false)
-], UI.prototype, "hitBox", void 0);
+], UI.prototype, "hitBox", undefined);
 __decorate([
     hitType(true)
-], UI.prototype, "hitChildren", void 0);
+], UI.prototype, "hitChildren", undefined);
 __decorate([
     hitType(true)
-], UI.prototype, "hitSelf", void 0);
+], UI.prototype, "hitSelf", undefined);
 __decorate([
     hitType()
-], UI.prototype, "hitRadius", void 0);
+], UI.prototype, "hitRadius", undefined);
 __decorate([
     cursorType('')
-], UI.prototype, "cursor", void 0);
+], UI.prototype, "cursor", undefined);
 __decorate([
     surfaceType()
-], UI.prototype, "fill", void 0);
+], UI.prototype, "fill", undefined);
 __decorate([
     strokeType()
-], UI.prototype, "stroke", void 0);
+], UI.prototype, "stroke", undefined);
 __decorate([
     strokeType('inside')
-], UI.prototype, "strokeAlign", void 0);
+], UI.prototype, "strokeAlign", undefined);
 __decorate([
     strokeType(1)
-], UI.prototype, "strokeWidth", void 0);
+], UI.prototype, "strokeWidth", undefined);
 __decorate([
     strokeType(false)
-], UI.prototype, "strokeWidthFixed", void 0);
+], UI.prototype, "strokeWidthFixed", undefined);
 __decorate([
     strokeType('none')
-], UI.prototype, "strokeCap", void 0);
+], UI.prototype, "strokeCap", undefined);
 __decorate([
     strokeType('miter')
-], UI.prototype, "strokeJoin", void 0);
+], UI.prototype, "strokeJoin", undefined);
 __decorate([
     strokeType()
-], UI.prototype, "dashPattern", void 0);
+], UI.prototype, "dashPattern", undefined);
 __decorate([
     strokeType()
-], UI.prototype, "dashOffset", void 0);
+], UI.prototype, "dashOffset", undefined);
 __decorate([
     strokeType(10)
-], UI.prototype, "miterLimit", void 0);
+], UI.prototype, "miterLimit", undefined);
 __decorate([
     pathType(0)
-], UI.prototype, "cornerRadius", void 0);
+], UI.prototype, "cornerRadius", undefined);
 __decorate([
     pathType()
-], UI.prototype, "cornerSmoothing", void 0);
+], UI.prototype, "cornerSmoothing", undefined);
 __decorate([
     effectType()
-], UI.prototype, "shadow", void 0);
+], UI.prototype, "shadow", undefined);
 __decorate([
     effectType()
-], UI.prototype, "innerShadow", void 0);
+], UI.prototype, "innerShadow", undefined);
 __decorate([
     effectType()
-], UI.prototype, "blur", void 0);
+], UI.prototype, "blur", undefined);
 __decorate([
     effectType()
-], UI.prototype, "backgroundBlur", void 0);
+], UI.prototype, "backgroundBlur", undefined);
 __decorate([
     effectType()
-], UI.prototype, "grayscale", void 0);
+], UI.prototype, "grayscale", undefined);
 __decorate([
     dataType({})
-], UI.prototype, "data", void 0);
+], UI.prototype, "data", undefined);
 __decorate([
     rewrite(Leaf.prototype.reset)
 ], UI.prototype, "reset", null);
@@ -7818,7 +7822,7 @@ let Group = class Group extends UI {
 };
 __decorate([
     dataProcessor(GroupData)
-], Group.prototype, "__", void 0);
+], Group.prototype, "__", undefined);
 Group = __decorate([
     useModule(Branch),
     registerUI()
@@ -7989,8 +7993,6 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     __setAttr(attrName, newValue) {
         if (this.canvas) {
             if (canvasSizeAttrs.includes(attrName)) {
-                if (!newValue)
-                    debug$1.warn(attrName + ' is 0');
                 this.__changeCanvasSize(attrName, newValue);
             }
             else if (attrName === 'fill') {
@@ -8030,8 +8032,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);
@@ -8045,6 +8045,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);
@@ -8138,10 +8152,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);
@@ -8182,10 +8195,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
 Leafer.list = new LeafList();
 __decorate([
     dataProcessor(LeaferData)
-], Leafer.prototype, "__", void 0);
+], Leafer.prototype, "__", undefined);
 __decorate([
     boundsType()
-], Leafer.prototype, "pixelRatio", void 0);
+], Leafer.prototype, "pixelRatio", undefined);
 Leafer = Leafer_1 = __decorate([
     registerUI()
 ], Leafer);
@@ -8198,7 +8211,7 @@ let Rect = class Rect extends UI {
 };
 __decorate([
     dataProcessor(RectData)
-], Rect.prototype, "__", void 0);
+], Rect.prototype, "__", undefined);
 Rect = __decorate([
     useModule(RectRender),
     rewriteAble(),
@@ -8223,6 +8236,8 @@ let Box = class Box extends Group {
         const data = this.__;
         if (this.children.length) {
             if (data.__autoSide) {
+                if (data.__hasSurface)
+                    this.__extraUpdate();
                 super.__updateBoxBounds();
                 const { boxBounds } = this.__layout;
                 if (!data.__autoSize) {
@@ -8287,13 +8302,13 @@ let Box = class Box extends Group {
 };
 __decorate([
     dataProcessor(BoxData)
-], Box.prototype, "__", void 0);
+], Box.prototype, "__", undefined);
 __decorate([
     dataType(false)
-], Box.prototype, "resizeChildren", void 0);
+], Box.prototype, "resizeChildren", undefined);
 __decorate([
     affectRenderBoundsType('show')
-], Box.prototype, "overflow", void 0);
+], Box.prototype, "overflow", undefined);
 __decorate([
     rewrite(rect$1.__updateStrokeSpread)
 ], Box.prototype, "__updateStrokeSpread", null);
@@ -8332,13 +8347,13 @@ let Frame = class Frame extends Box {
 };
 __decorate([
     dataProcessor(FrameData)
-], Frame.prototype, "__", void 0);
+], Frame.prototype, "__", undefined);
 __decorate([
     surfaceType('#FFFFFF')
-], Frame.prototype, "fill", void 0);
+], Frame.prototype, "fill", undefined);
 __decorate([
     affectRenderBoundsType('hide')
-], Frame.prototype, "overflow", void 0);
+], Frame.prototype, "overflow", undefined);
 Frame = __decorate([
     registerUI()
 ], Frame);
@@ -8385,16 +8400,16 @@ let Ellipse = class Ellipse extends UI {
 };
 __decorate([
     dataProcessor(EllipseData)
-], Ellipse.prototype, "__", void 0);
+], Ellipse.prototype, "__", undefined);
 __decorate([
     pathType(0)
-], Ellipse.prototype, "innerRadius", void 0);
+], Ellipse.prototype, "innerRadius", undefined);
 __decorate([
     pathType(0)
-], Ellipse.prototype, "startAngle", void 0);
+], Ellipse.prototype, "startAngle", undefined);
 __decorate([
     pathType(0)
-], Ellipse.prototype, "endAngle", void 0);
+], Ellipse.prototype, "endAngle", undefined);
 Ellipse = __decorate([
     registerUI()
 ], Ellipse);
@@ -8453,22 +8468,22 @@ let Line = class Line extends UI {
 };
 __decorate([
     dataProcessor(LineData)
-], Line.prototype, "__", void 0);
+], Line.prototype, "__", undefined);
 __decorate([
     affectStrokeBoundsType('center')
-], Line.prototype, "strokeAlign", void 0);
+], Line.prototype, "strokeAlign", undefined);
 __decorate([
     boundsType(0)
-], Line.prototype, "height", void 0);
+], Line.prototype, "height", undefined);
 __decorate([
     pathType()
-], Line.prototype, "points", void 0);
+], Line.prototype, "points", undefined);
 __decorate([
     pathType(0)
-], Line.prototype, "curve", void 0);
+], Line.prototype, "curve", undefined);
 __decorate([
     pathType(false)
-], Line.prototype, "closed", void 0);
+], Line.prototype, "closed", undefined);
 Line = __decorate([
     registerUI()
 ], Line);
@@ -8501,16 +8516,16 @@ let Polygon = class Polygon extends UI {
 };
 __decorate([
     dataProcessor(PolygonData)
-], Polygon.prototype, "__", void 0);
+], Polygon.prototype, "__", undefined);
 __decorate([
     pathType(3)
-], Polygon.prototype, "sides", void 0);
+], Polygon.prototype, "sides", undefined);
 __decorate([
     pathType()
-], Polygon.prototype, "points", void 0);
+], Polygon.prototype, "points", undefined);
 __decorate([
     pathType(0)
-], Polygon.prototype, "curve", void 0);
+], Polygon.prototype, "curve", undefined);
 __decorate([
     rewrite(line.__updateRenderPath)
 ], Polygon.prototype, "__updateRenderPath", null);
@@ -8542,13 +8557,13 @@ let Star = class Star extends UI {
 };
 __decorate([
     dataProcessor(StarData)
-], Star.prototype, "__", void 0);
+], Star.prototype, "__", undefined);
 __decorate([
     pathType(5)
-], Star.prototype, "corners", void 0);
+], Star.prototype, "corners", undefined);
 __decorate([
     pathType(0.382)
-], Star.prototype, "innerRadius", void 0);
+], Star.prototype, "innerRadius", undefined);
 Star = __decorate([
     registerUI()
 ], Star);
@@ -8570,10 +8585,10 @@ let Image = class Image extends Rect {
 };
 __decorate([
     dataProcessor(ImageData)
-], Image.prototype, "__", void 0);
+], Image.prototype, "__", undefined);
 __decorate([
     boundsType('')
-], Image.prototype, "url", void 0);
+], Image.prototype, "url", undefined);
 Image = __decorate([
     registerUI()
 ], Image);
@@ -8636,25 +8651,25 @@ let Canvas = class Canvas extends Rect {
 };
 __decorate([
     dataProcessor(CanvasData)
-], Canvas.prototype, "__", void 0);
+], Canvas.prototype, "__", undefined);
 __decorate([
     resizeType(100)
-], Canvas.prototype, "width", void 0);
+], Canvas.prototype, "width", undefined);
 __decorate([
     resizeType(100)
-], Canvas.prototype, "height", void 0);
+], Canvas.prototype, "height", undefined);
 __decorate([
     resizeType(1)
-], Canvas.prototype, "pixelRatio", void 0);
+], Canvas.prototype, "pixelRatio", undefined);
 __decorate([
     resizeType(true)
-], Canvas.prototype, "smooth", void 0);
+], Canvas.prototype, "smooth", undefined);
 __decorate([
     dataType(false)
-], Canvas.prototype, "safeResize", void 0);
+], Canvas.prototype, "safeResize", undefined);
 __decorate([
     resizeType()
-], Canvas.prototype, "contextSettings", void 0);
+], Canvas.prototype, "contextSettings", undefined);
 Canvas = __decorate([
     registerUI()
 ], Canvas);
@@ -8745,76 +8760,76 @@ let Text = class Text extends UI {
 };
 __decorate([
     dataProcessor(TextData)
-], Text.prototype, "__", void 0);
+], Text.prototype, "__", undefined);
 __decorate([
     boundsType(0)
-], Text.prototype, "width", void 0);
+], Text.prototype, "width", undefined);
 __decorate([
     boundsType(0)
-], Text.prototype, "height", void 0);
+], Text.prototype, "height", undefined);
 __decorate([
     dataType(false)
-], Text.prototype, "resizeFontSize", void 0);
+], Text.prototype, "resizeFontSize", undefined);
 __decorate([
     surfaceType('#000000')
-], Text.prototype, "fill", void 0);
+], Text.prototype, "fill", undefined);
 __decorate([
     affectStrokeBoundsType('outside')
-], Text.prototype, "strokeAlign", void 0);
+], Text.prototype, "strokeAlign", undefined);
 __decorate([
     hitType('all')
-], Text.prototype, "hitFill", void 0);
+], Text.prototype, "hitFill", undefined);
 __decorate([
     boundsType('')
-], Text.prototype, "text", void 0);
+], Text.prototype, "text", undefined);
 __decorate([
-    boundsType('L')
-], Text.prototype, "fontFamily", void 0);
+    boundsType('caption')
+], Text.prototype, "fontFamily", undefined);
 __decorate([
     boundsType(12)
-], Text.prototype, "fontSize", void 0);
+], Text.prototype, "fontSize", undefined);
 __decorate([
     boundsType('normal')
-], Text.prototype, "fontWeight", void 0);
+], Text.prototype, "fontWeight", undefined);
 __decorate([
     boundsType(false)
-], Text.prototype, "italic", void 0);
+], Text.prototype, "italic", undefined);
 __decorate([
     boundsType('none')
-], Text.prototype, "textCase", void 0);
+], Text.prototype, "textCase", undefined);
 __decorate([
     boundsType('none')
-], Text.prototype, "textDecoration", void 0);
+], Text.prototype, "textDecoration", undefined);
 __decorate([
     boundsType(0)
-], Text.prototype, "letterSpacing", void 0);
+], Text.prototype, "letterSpacing", undefined);
 __decorate([
     boundsType({ type: 'percent', value: 1.5 })
-], Text.prototype, "lineHeight", void 0);
+], Text.prototype, "lineHeight", undefined);
 __decorate([
     boundsType(0)
-], Text.prototype, "paraIndent", void 0);
+], Text.prototype, "paraIndent", undefined);
 __decorate([
     boundsType(0)
-], Text.prototype, "paraSpacing", void 0);
+], Text.prototype, "paraSpacing", undefined);
 __decorate([
     boundsType('x')
-], Text.prototype, "writingMode", void 0);
+], Text.prototype, "writingMode", undefined);
 __decorate([
     boundsType('left')
-], Text.prototype, "textAlign", void 0);
+], Text.prototype, "textAlign", undefined);
 __decorate([
     boundsType('top')
-], Text.prototype, "verticalAlign", void 0);
+], Text.prototype, "verticalAlign", undefined);
 __decorate([
     boundsType(true)
-], Text.prototype, "autoSizeAlign", void 0);
+], Text.prototype, "autoSizeAlign", undefined);
 __decorate([
     boundsType('normal')
-], Text.prototype, "textWrap", void 0);
+], Text.prototype, "textWrap", undefined);
 __decorate([
     boundsType('show')
-], Text.prototype, "textOverflow", void 0);
+], Text.prototype, "textOverflow", undefined);
 Text = __decorate([
     registerUI()
 ], Text);
@@ -8827,10 +8842,10 @@ let Path = class Path extends UI {
 };
 __decorate([
     dataProcessor(PathData)
-], Path.prototype, "__", void 0);
+], Path.prototype, "__", undefined);
 __decorate([
     affectStrokeBoundsType('center')
-], Path.prototype, "strokeAlign", void 0);
+], Path.prototype, "strokeAlign", undefined);
 Path = __decorate([
     registerUI()
 ], Path);
@@ -8869,10 +8884,10 @@ let Pen = class Pen extends Group {
 };
 __decorate([
     dataProcessor(PenData)
-], Pen.prototype, "__", void 0);
+], Pen.prototype, "__", undefined);
 __decorate([
     penPathType()
-], Pen.prototype, "path", void 0);
+], Pen.prototype, "path", undefined);
 Pen = __decorate([
     useModule(PathCreator, ['set', 'path', 'paint']),
     registerUI()
@@ -10057,9 +10072,9 @@ leaf.__hitWorld = function (point) {
     }
     return this.__hit(inner);
 };
-leaf.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitFill(inner, this.__.windingRule); };
-leaf.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitStroke(inner, strokeWidth); };
-leaf.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
+leaf.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitFill(inner, this.__.windingRule); };
+leaf.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitStroke(inner, strokeWidth); };
+leaf.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === undefined ? undefined : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
 leaf.__drawHitPath = function (canvas) { if (canvas)
     this.__drawRenderPath(canvas); };
 
@@ -10899,7 +10914,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
             }
             else {
                 if (!paint.patternTask) {
-                    paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                    paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, undefined, undefined, function* () {
                         paint.patternTask = null;
                         if (canvas.bounds.hit(ui.__nowWorld))
                             createPattern(ui, paint, pixelRatio);
@@ -11055,7 +11070,7 @@ function shadow$1(ui, current, shape) {
     const end = shadow.length - 1;
     toOffsetOutBounds$1(bounds, offsetOutBounds$1);
     shadow.forEach((item, index) => {
-        other.setWorldShadow((offsetOutBounds$1.offsetX + item.x * scaleX), (offsetOutBounds$1.offsetY + item.y * scaleY), item.blur * scaleX, item.color);
+        other.setWorldShadow((offsetOutBounds$1.offsetX + item.x * scaleX), (offsetOutBounds$1.offsetY + item.y * scaleY), item.blur * scaleX, ColorConvert.string(item.color));
         spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) : 0;
         drawWorldShadow(other, offsetOutBounds$1, spreadScale, shape);
         copyBounds = bounds;
@@ -11131,7 +11146,7 @@ function innerShadow(ui, current, shape) {
             other.copyWorld(shape.canvas, shapeBounds, bounds, 'source-out');
             copyBounds = bounds;
         }
-        other.fillWorld(copyBounds, item.color, 'source-in');
+        other.fillWorld(copyBounds, ColorConvert.string(item.color), 'source-in');
         if (ui.__worldFlipped) {
             current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
         }
@@ -11493,7 +11508,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;
@@ -11515,7 +11530,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;
                     }
@@ -11911,25 +11926,25 @@ let Robot = class Robot extends UI {
 };
 __decorate([
     dataProcessor(RobotData)
-], Robot.prototype, "__", void 0);
+], Robot.prototype, "__", undefined);
 __decorate([
     boundsType()
-], Robot.prototype, "robot", void 0);
+], Robot.prototype, "robot", undefined);
 __decorate([
     dataType()
-], Robot.prototype, "actions", void 0);
+], Robot.prototype, "actions", undefined);
 __decorate([
     dataType('')
-], Robot.prototype, "action", void 0);
+], Robot.prototype, "action", undefined);
 __decorate([
     surfaceType(0)
-], Robot.prototype, "now", void 0);
+], Robot.prototype, "now", undefined);
 __decorate([
     dataType(12)
-], Robot.prototype, "FPS", void 0);
+], Robot.prototype, "FPS", undefined);
 __decorate([
     dataType(true)
-], Robot.prototype, "loop", void 0);
+], Robot.prototype, "loop", undefined);
 Robot = __decorate([
     registerUI()
 ], Robot);
@@ -11997,7 +12012,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);
@@ -12027,7 +12044,8 @@ function updateStyle(leaf, style, type) {
 }
 function getStyle(leaf) {
     let exist;
-    const style = {}, { state } = leaf, button = findParentButton(leaf);
+    const style = {}, button = findParentButton(leaf);
+    const state = button ? (leaf.state || button.state) : leaf.state;
     const stateStyle = state && leaf.states[state];
     if (stateStyle && State.isState(state, leaf, button))
         exist = assign(style, stateStyle);
@@ -12098,7 +12116,7 @@ function setState(leaf, stateName, stateStyle) {
     if (leaf.button)
         setChildrenState(leaf.children, null, stateName);
 }
-function setChildrenState(children, stateType, state) {
+function setChildrenState(children, stateType, stateName) {
     if (!children)
         return;
     let leaf, update;
@@ -12122,10 +12140,10 @@ function setChildrenState(children, stateType, state) {
             if (update)
                 setPointerState(leaf, stateType);
         }
-        else if (state)
-            setState(leaf, state);
+        else if (stateName !== undefined)
+            setState(leaf, stateName);
         if (leaf.isBranch)
-            setChildrenState(leaf.children, stateType, state);
+            setChildrenState(leaf.children, stateType, stateName);
     }
 }
 
@@ -12141,7 +12159,7 @@ function unsetState(leaf, stateName, stateStyle) {
     if (leaf.button)
         unsetChildrenState(leaf.children, null, stateName);
 }
-function unsetChildrenState(children, stateType, state) {
+function unsetChildrenState(children, stateType, stateName) {
     if (!children)
         return;
     let leaf;
@@ -12149,10 +12167,10 @@ function unsetChildrenState(children, stateType, state) {
         leaf = children[i];
         if (stateType)
             unsetPointerState(leaf, stateType);
-        else if (state)
-            unsetState(leaf, state);
+        else if (stateName !== undefined)
+            unsetState(leaf, stateName);
         if (leaf.isBranch)
-            unsetChildrenState(leaf.children, stateType, state);
+            unsetChildrenState(leaf.children, stateType, stateName);
     }
 }
 
@@ -12370,8 +12388,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');
+            }
         }
     }));
 }
@@ -12408,22 +12429,29 @@ 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;
+        const { ending, reverse, swing, loop } = this;
         if (ending === 'from')
             count = 0;
         else if (ending === 'to')
             count = 1;
         else {
             count = reverse ? 0 : 1;
-            if (loop && typeof loop === 'number')
+            if (swing && loop && typeof loop === 'number')
                 count += loop - 1;
         }
         return count % 2 ? 'to' : 'from';
     }
     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) {
@@ -12439,16 +12467,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();
@@ -12497,7 +12523,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++) {
@@ -12506,27 +12532,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;
             }
@@ -12542,14 +12573,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);
     }
@@ -12576,7 +12607,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;
             }
         }
     }
@@ -12594,7 +12625,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;
@@ -12618,9 +12649,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
@@ -12635,8 +12666,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)
@@ -12654,12 +12685,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;
@@ -12682,15 +12713,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) {
@@ -12726,6 +12761,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;
@@ -12747,44 +12803,102 @@ let Animate = class Animate extends Eventer {
 };
 __decorate([
     animateAttr('ease')
-], Animate.prototype, "easing", void 0);
+], Animate.prototype, "easing", undefined);
 __decorate([
     animateAttr(0)
-], Animate.prototype, "delay", void 0);
+], Animate.prototype, "delay", undefined);
 __decorate([
     animateAttr(frameDuration)
-], Animate.prototype, "duration", void 0);
+], Animate.prototype, "duration", undefined);
 __decorate([
     animateAttr('auto')
-], Animate.prototype, "ending", void 0);
+], Animate.prototype, "ending", undefined);
 __decorate([
     animateAttr(false)
-], Animate.prototype, "reverse", void 0);
+], Animate.prototype, "reverse", undefined);
 __decorate([
     animateAttr(false)
-], Animate.prototype, "swing", void 0);
+], Animate.prototype, "swing", undefined);
 __decorate([
     animateAttr(false)
-], Animate.prototype, "loop", void 0);
+], Animate.prototype, "loop", undefined);
 __decorate([
     animateAttr(0)
-], Animate.prototype, "loopDelay", void 0);
+], Animate.prototype, "loopDelay", undefined);
 __decorate([
     animateAttr(1)
-], Animate.prototype, "speed", void 0);
+], Animate.prototype, "speed", undefined);
 __decorate([
     animateAttr(true)
-], Animate.prototype, "autoplay", void 0);
+], Animate.prototype, "autoplay", undefined);
 __decorate([
     animateAttr()
-], Animate.prototype, "join", void 0);
+], Animate.prototype, "join", undefined);
 __decorate([
     animateAttr()
-], Animate.prototype, "attrs", void 0);
+], Animate.prototype, "attrs", undefined);
 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',
@@ -13121,7 +13235,8 @@ function getDecimalLen(num) {
     return decimal ? decimal.length : 0;
 }
 function value(from, to, t) {
-    return (typeof from === 'number' && typeof to === 'number') ? from + (to - from) * t : to;
+    const fromIsNumber = typeof from === 'number', toIsNumber = typeof to === 'number';
+    return (fromIsNumber && toIsNumber) ? from + (to - from) * t : ((toIsNumber || fromIsNumber) ? number(from, to, t) : from);
 }
 function number(from, to, t, roundValue) {
     from || (from = 0), to || (to = 0);
@@ -13165,23 +13280,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);
 };
@@ -13475,12 +13607,12 @@ ui$1.__updateMotionPath = function () {
         data.__pathForMotion = undefined;
     if (this.motionPath) {
         let child;
-        const { children } = this.parent, { leaferIsReady } = this;
+        const { children } = this.parent;
         for (let i = 0; i < children.length; i++) {
             child = children[i];
             if (!isNull(child.motion) && !child.__layout.matrixChanged) {
-                if (leaferIsReady && child !== this)
-                    this.leafer.layouter.addExtra(child);
+                if (child !== this)
+                    child.__extraUpdate();
                 updateMotion(child);
             }
         }
@@ -13699,4 +13831,4 @@ if (platform === 'ios') {
     };
 }
 
-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, 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, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Finder, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, 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 };