@galacean/effects-core 2.1.5 → 2.2.0

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime core for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.1.5
+ * Version: v2.2.0
  */
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -59,12 +59,8 @@ function __generator(thisArg, body) {
         },
         trys: [],
         ops: []
-    }, f, y, t, g;
-    return g = {
-        next: verb(0),
-        "throw": verb(1),
-        "return": verb(2)
-    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+    }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
         return this;
     }), g;
     function verb(n) {
@@ -12752,8 +12748,8 @@ var BezierCurve = /*#__PURE__*/ function(ValueGetter) {
         return data;
     };
     _proto.getMaxTime = function getMaxTime() {
-        var keyTimeData = Object.keys(this.curveMap);
-        return Number(keyTimeData[keyTimeData.length - 1].split("&")[1]);
+        var keyTimeData = this.keyTimeData;
+        return this.curveMap[keyTimeData[keyTimeData.length - 1]].timeEnd;
     };
     return BezierCurve;
 }(ValueGetter);
@@ -12831,19 +12827,22 @@ var BezierCurvePath = /*#__PURE__*/ function(ValueGetter) {
                 timeInterval: timeInterval,
                 valueInterval: valueInterval,
                 easingCurve: easingCurve,
-                pathCurve: pathCurve
+                pathCurve: pathCurve,
+                timeStart: Number(s.x),
+                timeEnd: Number(e.x)
             };
         }
+        this.keyTimeData = Object.keys(this.curveSegments);
     };
     _proto.getValue = function getValue(time) {
         var t = numberToFix(time, 5);
         var perc = 0, point = new Vector3();
-        var keyTimeData = Object.keys(this.curveSegments);
+        var keyTimeData = this.keyTimeData;
         if (!keyTimeData.length) {
             return point;
         }
-        var keyTimeStart = Number(keyTimeData[0].split("&")[0]);
-        var keyTimeEnd = Number(keyTimeData[keyTimeData.length - 1].split("&")[1]);
+        var keyTimeStart = this.curveSegments[keyTimeData[0]].timeStart;
+        var keyTimeEnd = this.curveSegments[keyTimeData[keyTimeData.length - 1]].timeEnd;
         if (t <= keyTimeStart) {
             var pathCurve = this.curveSegments[keyTimeData[0]].pathCurve;
             point = pathCurve.getPointInPercent(0);
@@ -12855,7 +12854,8 @@ var BezierCurvePath = /*#__PURE__*/ function(ValueGetter) {
             return point;
         }
         for(var i = 0; i < keyTimeData.length; i++){
-            var _keyTimeData_i_split = keyTimeData[i].split("&"), xMin = _keyTimeData_i_split[0], xMax = _keyTimeData_i_split[1];
+            var xMin = this.curveSegments[keyTimeData[i]].timeStart;
+            var xMax = this.curveSegments[keyTimeData[i]].timeEnd;
             if (t >= Number(xMin) && t < Number(xMax)) {
                 var bezierPath = this.curveSegments[keyTimeData[i]].pathCurve;
                 perc = this.getPercValue(keyTimeData[i], t);
@@ -12874,8 +12874,8 @@ var BezierCurvePath = /*#__PURE__*/ function(ValueGetter) {
         return clamp$1(value, 0, 1);
     };
     _proto.getMaxTime = function getMaxTime() {
-        var keyTimeData = Object.keys(this.curveSegments);
-        return Number(keyTimeData[keyTimeData.length - 1].split("&")[1]);
+        var keyTimeData = this.keyTimeData;
+        return this.curveSegments[keyTimeData[keyTimeData.length - 1]].timeEnd;
     };
     return BezierCurvePath;
 }(ValueGetter);
@@ -13028,15 +13028,18 @@ function createKeyFrameMeta() {
 }
 
 function _is_native_reflect_construct() {
-    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-    if (Reflect.construct.sham) return false;
-    if (typeof Proxy === "function") return true;
+    // Since Reflect.construct can't be properly polyfilled, some
+    // implementations (e.g. core-js@2) don't set the correct internal slots.
+    // Those polyfills don't allow us to subclass built-ins, so we need to
+    // use our fallback implementation.
     try {
-        Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
-        return true;
-    } catch (e) {
-        return false;
-    }
+        // If the internal slots aren't set, this throws an error similar to
+        //   TypeError: this is not a Boolean object.
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function _is_native_reflect_construct() {
+        return !!result;
+    })();
 }
 
 function _construct(Parent, args, Class) {
@@ -15900,6 +15903,7 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         if (this.animated) {
             this.buildPath(this.data);
             this.buildGeometryFromPath(this.path.shapePath);
+            this.animated = false;
         }
     };
     _proto.buildGeometryFromPath = function buildGeometryFromPath(shapePath) {
@@ -17007,14 +17011,10 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
             var playableOutput2 = _step2.value;
             this.processFrameWithRoot(playableOutput2);
         }
-        // 更新节点时间
-        for(var _iterator3 = _create_for_of_iterator_helper_loose(this.playables), _step3; !(_step3 = _iterator3()).done;){
-            var playable = _step3.value;
-            this.updatePlayableTime(playable, dt / 1000);
-        }
-    };
-    _proto.connect = function connect(source, sourceOutputPort, destination, destinationInputPort) {
-        destination.connectInput(destinationInputPort, source, sourceOutputPort);
+    // 更新节点时间
+    // for (const playable of this.playables) {
+    //   this.updatePlayableTime(playable, dt / 1000);
+    // }
     };
     _proto.addOutput = function addOutput(output) {
         this.playableOutputs.push(output);
@@ -17023,12 +17023,12 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
         this.playables.push(playable);
     };
     _proto.processFrameWithRoot = function processFrameWithRoot(output) {
-        output.sourcePlayable.processFrameRecursive(output.context, output.getSourceOutputPort());
+        output.sourcePlayable.processFrame(output.context);
         output.processFrame();
     };
     _proto.prepareFrameWithRoot = function prepareFrameWithRoot(output) {
-        output.sourcePlayable.prepareFrameRecursive(output.context, output.getSourceOutputPort());
         output.prepareFrame();
+        output.sourcePlayable.prepareFrame(output.context);
     };
     _proto.updatePlayableTime = function updatePlayableTime(playable, deltaTime) {
         if (playable.getPlayState() !== 0) {
@@ -17043,24 +17043,15 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
  * @since 2.0.0
  */ var Playable = /*#__PURE__*/ function() {
     function Playable(graph, inputCount) {
-        if (inputCount === void 0) inputCount = 0;
         this.onPlayablePlayFlag = true;
         this.onPlayablePauseFlag = false;
         this.duration = 0;
         this.destroyed = false;
-        this.inputs = [];
-        this.inputOuputPorts = [];
-        this.inputWeight = [];
-        this.outputs = [];
         this.playState = 0;
-        this.traversalMode = 0;
         /**
    * 当前本地播放的时间
    */ this.time = 0;
         graph.addPlayable(this);
-        this.inputs = new Array(inputCount);
-        this.inputOuputPorts = new Array(inputCount);
-        this.inputWeight = new Array(inputCount);
     }
     var _proto = Playable.prototype;
     _proto.play = function play() {
@@ -17083,56 +17074,6 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
                 break;
         }
     };
-    _proto.connectInput = function connectInput(inputPort, sourcePlayable, sourceOutputPort, weight) {
-        if (weight === void 0) weight = 1.0;
-        this.setInput(sourcePlayable, inputPort);
-        this.setInputWeight(inputPort, weight);
-        sourcePlayable.setOutput(this, sourceOutputPort);
-        if (this.inputOuputPorts.length < inputPort + 1) {
-            this.inputOuputPorts.length = inputPort + 1;
-        }
-        this.inputOuputPorts[inputPort] = sourceOutputPort;
-    };
-    _proto.addInput = function addInput(sourcePlayable, sourceOutputPort, weight) {
-        if (weight === void 0) weight = 1.0;
-        this.connectInput(this.getInputCount(), sourcePlayable, sourceOutputPort, weight);
-    };
-    _proto.getInputCount = function getInputCount() {
-        return this.inputs.length;
-    };
-    _proto.getInputs = function getInputs() {
-        return this.inputs;
-    };
-    _proto.getInput = function getInput(index) {
-        return this.inputs[index];
-    };
-    _proto.getOutputCount = function getOutputCount() {
-        return this.outputs.length;
-    };
-    _proto.getOutputs = function getOutputs() {
-        return this.outputs;
-    };
-    _proto.getOutput = function getOutput(index) {
-        return this.outputs[index];
-    };
-    _proto.getInputWeight = function getInputWeight(inputIndex) {
-        return this.inputWeight[inputIndex];
-    };
-    _proto.setInputWeight = function setInputWeight(playableOrIndex, weight) {
-        if (_instanceof1(playableOrIndex, Playable)) {
-            for(var i = 0; i < this.inputs.length; i++){
-                if (this.inputs[i] === playableOrIndex) {
-                    this.inputWeight[i] = weight;
-                    return;
-                }
-            }
-        } else {
-            if (this.inputWeight.length < playableOrIndex + 1) {
-                this.inputWeight.length = playableOrIndex + 1;
-            }
-            this.inputWeight[playableOrIndex] = weight;
-        }
-    };
     _proto.setTime = function setTime(time) {
         this.time = time;
     };
@@ -17148,18 +17089,14 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
     _proto.getPlayState = function getPlayState() {
         return this.playState;
     };
-    _proto.setTraversalMode = function setTraversalMode(mode) {
-        this.traversalMode = mode;
-    };
-    _proto.getTraversalMode = function getTraversalMode() {
-        return this.traversalMode;
-    };
     // onGraphStart () {
     // }
     // onGraphStop () {
     // }
-    _proto.onPlayablePlay = function onPlayablePlay(context) {};
-    _proto.onPlayablePause = function onPlayablePause(context) {};
+    // onPlayablePlay (context: FrameContext) {
+    // }
+    // onPlayablePause (context: FrameContext) {
+    // }
     _proto.prepareFrame = function prepareFrame(context) {};
     _proto.processFrame = function processFrame(context) {};
     _proto.onPlayableDestroy = function onPlayableDestroy() {};
@@ -17171,76 +17108,6 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
         // TODO 将节点从动画图中移除
         this.destroyed = true;
     };
-    /**
-   * @internal
-   */ _proto.prepareFrameRecursive = function prepareFrameRecursive(context, passthroughPort) {
-        if (this.destroyed || this.playState !== 0) {
-            return;
-        }
-        if (this.onPlayablePlayFlag) {
-            this.onPlayablePlay(context);
-            this.onPlayablePlayFlag = false;
-        }
-        if (this.onPlayablePauseFlag) {
-            this.onPlayablePause(context);
-            this.onPlayablePauseFlag = false;
-        }
-        if (passthroughPort === 0) {
-            this.prepareFrame(context);
-        }
-        // 前序遍历，用于设置节点的初始状态，weight etc.
-        switch(this.getTraversalMode()){
-            case 0:
-                for(var i = 0; i < this.getInputCount(); i++){
-                    var input = this.getInput(i);
-                    input.prepareFrameRecursive(context, this.inputOuputPorts[i]);
-                }
-                break;
-            case 1:
-                {
-                    var input1 = this.getInput(passthroughPort);
-                    input1.prepareFrameRecursive(context, this.inputOuputPorts[passthroughPort]);
-                    break;
-                }
-        }
-    };
-    /**
-   * @internal
-   */ _proto.processFrameRecursive = function processFrameRecursive(context, passthroughPort) {
-        if (this.destroyed || this.playState !== 0) {
-            return;
-        }
-        // 后序遍历，保证 playable 拿到的 input 节点的估计数据是最新的
-        switch(this.getTraversalMode()){
-            case 0:
-                {
-                    for(var i = 0; i < this.getInputCount(); i++){
-                        var input = this.getInput(i);
-                        input.processFrameRecursive(context, this.inputOuputPorts[i]);
-                    }
-                    break;
-                }
-            case 1:
-                {
-                    var input1 = this.getInput(passthroughPort);
-                    input1.processFrameRecursive(context, this.inputOuputPorts[passthroughPort]);
-                    break;
-                }
-        }
-        this.processFrame(context);
-    };
-    _proto.setOutput = function setOutput(outputPlayable, outputPort) {
-        if (this.outputs.length < outputPort + 1) {
-            this.outputs.length = outputPort + 1;
-        }
-        this.outputs[outputPort] = outputPlayable;
-    };
-    _proto.setInput = function setInput(inputPlayable, inputPort) {
-        if (this.inputs.length < inputPort + 1) {
-            this.inputs.length = inputPort + 1;
-        }
-        this.inputs[inputPort] = inputPlayable;
-    };
     return Playable;
 }();
 /**
@@ -17248,20 +17115,14 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
  * @since 2.0.0
  */ var PlayableOutput = /*#__PURE__*/ function() {
     function PlayableOutput() {
-        this.sourceOutputPort = 0;
         this.context = {
             deltaTime: 0,
             output: this
         };
     }
     var _proto = PlayableOutput.prototype;
-    _proto.setSourcePlayable = function setSourcePlayable(playable, port) {
-        if (port === void 0) port = 0;
+    _proto.setSourcePlayable = function setSourcePlayable(playable) {
         this.sourcePlayable = playable;
-        this.sourceOutputPort = port;
-    };
-    _proto.getSourceOutputPort = function getSourceOutputPort() {
-        return this.sourceOutputPort;
     };
     _proto.setUserData = function setUserData(value) {
         this.userData = value;
@@ -17287,11 +17148,6 @@ var PlayState;
     PlayState[PlayState["Playing"] = 0] = "Playing";
     PlayState[PlayState["Paused"] = 1] = "Paused";
 })(PlayState || (PlayState = {}));
-var PlayableTraversalMode;
-(function(PlayableTraversalMode) {
-    PlayableTraversalMode[PlayableTraversalMode["Mix"] = 0] = "Mix";
-    PlayableTraversalMode[PlayableTraversalMode["Passthrough"] = 1] = "Passthrough";
-})(PlayableTraversalMode || (PlayableTraversalMode = {}));
 
 var tempQuat$1 = new Quaternion();
 var seed$3 = 1;
@@ -17944,7 +17800,7 @@ var VFXItem = /*#__PURE__*/ function(EffectsObject) {
     };
     /**
    * 添加组件
-   * @param classConstructor - 要添加的组件类型
+   * @param classConstructor - 要添加的组件
    */ _proto.addComponent = function addComponent(classConstructor) {
         var newComponent = new classConstructor(this.engine);
         this.components.push(newComponent);
@@ -18187,7 +18043,7 @@ var VFXItem = /*#__PURE__*/ function(EffectsObject) {
     };
     _proto.fromData = function fromData(data) {
         EffectsObject.prototype.fromData.call(this, data);
-        var id = data.id, name = data.name, delay = data.delay, parentId = data.parentId, endBehavior = data.endBehavior, transform = data.transform, _data_listIndex = data.listIndex, listIndex = _data_listIndex === void 0 ? 0 : _data_listIndex, _data_duration = data.duration, duration = _data_duration === void 0 ? 0 : _data_duration;
+        var id = data.id, name = data.name, delay = data.delay, parentId = data.parentId, endBehavior = data.endBehavior, transform = data.transform, _data_duration = data.duration, duration = _data_duration === void 0 ? 0 : _data_duration;
         this.props = data;
         //@ts-expect-error
         this.type = data.type;
@@ -18249,8 +18105,6 @@ var VFXItem = /*#__PURE__*/ function(EffectsObject) {
                 this.rendererComponents.push(component.renderer);
             }
         }
-        // renderOrder 在 component 初始化后设置。确保能拿到 rendererComponent。
-        this.renderOrder = listIndex;
     };
     _proto.toData = function toData() {
         var _this_parent;
@@ -22796,12 +22650,6 @@ var AnimationStream = /*#__PURE__*/ function() {
     _proto.findCurveValue = function findCurveValue(componentType, propertyName) {
         return this.curveValues[componentType + propertyName];
     };
-    _proto.getInputStream = function getInputStream(index) {
-        var inputPlayable = this.playable.getInput(index);
-        if (_instanceof1(inputPlayable, AnimationPlayable)) {
-            return inputPlayable.animationStream;
-        }
-    };
     return AnimationStream;
 }();
 
@@ -23136,266 +22984,147 @@ var AnimationClipPlayable = /*#__PURE__*/ function(Playable) {
     return AnimationClipPlayable;
 }(Playable);
 
-/**
- * @since 2.0.0
- */ var TimelineClip = /*#__PURE__*/ function() {
-    function TimelineClip() {
-        this.start = 0;
-        this.duration = 0;
-    }
-    var _proto = TimelineClip.prototype;
-    _proto.toLocalTime = function toLocalTime(time) {
-        var localTime = time - this.start;
-        var duration = this.duration;
-        if (localTime - duration > 0) {
-            if (this.endBehavior === EndBehavior.restart) {
-                localTime = localTime % duration;
-            } else if (this.endBehavior === EndBehavior.freeze) {
-                localTime = Math.min(duration, localTime);
-            }
-        }
-        return localTime;
-    };
-    return TimelineClip;
-}();
-var TrackAsset = /*#__PURE__*/ function(PlayableAsset) {
-    _inherits(TrackAsset, PlayableAsset);
-    function TrackAsset() {
+var TrackMixerPlayable = /*#__PURE__*/ function(Playable1) {
+    _inherits(TrackMixerPlayable, Playable1);
+    function TrackMixerPlayable() {
         var _this;
-        _this = PlayableAsset.apply(this, arguments) || this;
-        _this.trackType = 0;
-        _this.clipSeed = 0;
-        _this.clips = [];
-        _this.children = [];
+        _this = Playable1.apply(this, arguments) || this;
+        _this.clipPlayables = [];
+        _this.clipWeights = [];
         return _this;
     }
-    var _proto = TrackAsset.prototype;
-    /**
-   * 重写该方法以获取自定义对象绑定
-   */ _proto.updateAnimatedObject = function updateAnimatedObject() {
-        if (this.parent) {
-            this.boundObject = this.parent.boundObject;
-        }
-    };
-    /**
-   * 重写该方法以创建自定义混合器
-   */ _proto.createTrackMixer = function createTrackMixer(graph) {
-        return new Playable(graph);
-    };
-    _proto.createOutput = function createOutput() {
-        var output = new PlayableOutput();
-        return output;
-    };
-    _proto.createPlayableGraph = function createPlayableGraph(graph, runtimeClips) {
-        var mixerPlayable = this.createMixerPlayableGraph(graph, runtimeClips);
-        return mixerPlayable;
-    };
-    _proto.createMixerPlayableGraph = function createMixerPlayableGraph(graph, runtimeClips) {
-        var clips = [];
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
-            var clip = _step.value;
-            clips.push(clip);
+    var _proto = TrackMixerPlayable.prototype;
+    _proto.processFrame = function processFrame(context) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.clipPlayables), _step; !(_step = _iterator()).done;){
+            var clipPlayable = _step.value;
+            clipPlayable.processFrame(context);
         }
-        var mixerPlayable = this.compileClips(graph, clips, runtimeClips);
-        return mixerPlayable;
+        this.evaluate(context);
     };
-    _proto.compileClips = function compileClips(graph, timelineClips, runtimeClips) {
-        var mixer = this.createTrackMixer(graph);
-        for(var _iterator = _create_for_of_iterator_helper_loose(timelineClips), _step; !(_step = _iterator()).done;){
-            var timelineClip = _step.value;
-            var clipPlayable = this.createClipPlayable(graph, timelineClip);
-            clipPlayable.setDuration(timelineClip.duration);
-            var clip = new RuntimeClip(timelineClip, clipPlayable, mixer, this);
-            runtimeClips.push(clip);
-            mixer.addInput(clipPlayable, 0);
-            mixer.setInputWeight(clipPlayable, 0.0);
+    _proto.setClipWeight = function setClipWeight(playableOrIndex, weight) {
+        if (_instanceof1(playableOrIndex, Playable)) {
+            for(var i = 0; i < this.clipPlayables.length; i++){
+                if (this.clipPlayables[i] === playableOrIndex) {
+                    this.clipWeights[i] = weight;
+                    return;
+                }
+            }
+        } else {
+            if (this.clipWeights.length < playableOrIndex + 1) {
+                this.clipWeights.length = playableOrIndex + 1;
+            }
+            this.clipWeights[playableOrIndex] = weight;
         }
-        return mixer;
-    };
-    _proto.createPlayable = function createPlayable(graph) {
-        return new Playable(graph);
-    };
-    _proto.getChildTracks = function getChildTracks() {
-        return this.children;
     };
-    _proto.addChild = function addChild(child) {
-        this.children.push(child);
-        child.parent = this;
+    _proto.getClipWeight = function getClipWeight(inputIndex) {
+        return this.clipWeights[inputIndex];
     };
-    _proto.createClip = function createClip(classConstructor, name) {
-        var newClip = new TimelineClip();
-        newClip.asset = new classConstructor(this.engine);
-        newClip.name = name ? name : "TimelineClip" + newClip.id;
-        this.addClip(newClip);
-        return newClip;
+    _proto.getClipPlayable = function getClipPlayable(index) {
+        return this.clipPlayables[index];
     };
-    _proto.getClips = function getClips() {
-        return this.clips;
+    _proto.evaluate = function evaluate(context) {
+    // Override
     };
-    _proto.findClip = function findClip(name) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
-            var clip = _step.value;
-            if (clip.name === name) {
-                return clip;
+    return TrackMixerPlayable;
+}(Playable);
+
+var ActivationMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(ActivationMixerPlayable, TrackMixerPlayable);
+    function ActivationMixerPlayable() {
+        return TrackMixerPlayable.apply(this, arguments);
+    }
+    var _proto = ActivationMixerPlayable.prototype;
+    _proto.evaluate = function evaluate(context) {
+        var boundObject = context.output.getUserData();
+        if (!_instanceof1(boundObject, VFXItem)) {
+            return;
+        }
+        var boundItem = boundObject;
+        var hasInput = false;
+        for(var i = 0; i < this.clipPlayables.length; i++){
+            if (this.getClipWeight(i) > 0) {
+                hasInput = true;
+                break;
             }
         }
+        if (hasInput) {
+            boundItem.transform.setValid(true);
+            boundItem.setActive(true);
+        } else {
+            boundItem.transform.setValid(false);
+            boundItem.setActive(false);
+        }
     };
-    _proto.addClip = function addClip(clip) {
-        clip.id = (this.clipSeed++).toString();
-        this.clips.push(clip);
-    };
-    _proto.createClipPlayable = function createClipPlayable(graph, clip) {
-        return clip.asset.createPlayable(graph);
+    return ActivationMixerPlayable;
+}(TrackMixerPlayable);
+
+var PropertyClipPlayable = /*#__PURE__*/ function(Playable) {
+    _inherits(PropertyClipPlayable, Playable);
+    function PropertyClipPlayable() {
+        return Playable.apply(this, arguments);
+    }
+    var _proto = PropertyClipPlayable.prototype;
+    _proto.processFrame = function processFrame(context) {
+        this.value = this.curve.getValue(this.time / this.getDuration());
     };
-    _proto.fromData = function fromData(data) {
-        PlayableAsset.prototype.fromData.call(this, data);
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
-            var child = _step.value;
-            child.parent = this;
+    return PropertyClipPlayable;
+}(Playable);
+
+var ColorPropertyMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(ColorPropertyMixerPlayable, TrackMixerPlayable);
+    function ColorPropertyMixerPlayable() {
+        var _this;
+        _this = TrackMixerPlayable.apply(this, arguments) || this;
+        _this.propertyName = "";
+        return _this;
+    }
+    var _proto = ColorPropertyMixerPlayable.prototype;
+    _proto.evaluate = function evaluate(context) {
+        var boundObject = context.output.getUserData();
+        if (!boundObject) {
+            return;
+        }
+        var hasInput = false;
+        var value = boundObject[this.propertyName];
+        if (!_instanceof1(value, Color)) {
+            return;
+        }
+        value.setZero();
+        // evaluate the curve
+        for(var i = 0; i < this.clipPlayables.length; i++){
+            var weight = this.getClipWeight(i);
+            if (weight > 0) {
+                var propertyClipPlayable = this.getClipPlayable(i);
+                if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
+                    console.error("ColorPropertyMixerPlayable received incompatible input");
+                    continue;
+                }
+                var curveValue = propertyClipPlayable.value;
+                value.r += curveValue.r * weight;
+                value.g += curveValue.g * weight;
+                value.b += curveValue.b * weight;
+                value.a += curveValue.a * weight;
+                hasInput = true;
+            }
+        }
+        // set value
+        if (hasInput) {
+            boundObject[this.propertyName] = value;
         }
     };
-    return TrackAsset;
-}(PlayableAsset);
-__decorate([
-    serialize(TimelineClip)
-], TrackAsset.prototype, "clips", void 0);
-__decorate([
-    serialize()
-], TrackAsset.prototype, "children", void 0);
-TrackAsset = __decorate([
-    effectsClass(DataType.TrackAsset)
-], TrackAsset);
-var TrackType;
-(function(TrackType) {
-    TrackType[TrackType["MasterTrack"] = 0] = "MasterTrack";
-    TrackType[TrackType["ObjectTrack"] = 1] = "ObjectTrack";
-})(TrackType || (TrackType = {}));
-var RuntimeClip = /*#__PURE__*/ function() {
-    function RuntimeClip(clip, clipPlayable, parentMixer, track) {
-        this.clip = clip;
-        this.playable = clipPlayable;
-        this.parentMixer = parentMixer;
-        this.track = track;
-        if (_instanceof1(this.track.boundObject, VFXItem)) {
-            this.particleSystem = this.track.boundObject.getComponent(ParticleSystem);
-        }
-    }
-    var _proto = RuntimeClip.prototype;
-    _proto.evaluateAt = function evaluateAt(localTime) {
-        var clip = this.clip;
-        var weight = 1.0;
-        var ended = false;
-        var started = false;
-        var boundObject = this.track.boundObject;
-        if (localTime >= clip.start + clip.duration && clip.endBehavior === EndBehavior.destroy) {
-            if (_instanceof1(boundObject, VFXItem) && VFXItem.isParticle(boundObject) && this.particleSystem && !this.particleSystem.destroyed) {
-                weight = 1.0;
-            } else {
-                weight = 0.0;
-                ended = true;
-            }
-        } else if (localTime - this.clip.start >= 0) {
-            weight = 1.0;
-            started = true;
-        } else if (localTime < clip.start) {
-            weight = 0.0;
-        }
-        if (started && this.playable.getPlayState() !== PlayState.Playing) {
-            this.playable.play();
-        }
-        this.parentMixer.setInputWeight(this.playable, weight);
-        var clipTime = parseFloat(clip.toLocalTime(localTime).toFixed(3));
-        this.playable.setTime(clipTime);
-        // 判断动画是否结束
-        if (ended) {
-            if (this.playable.getPlayState() === PlayState.Playing) {
-                this.playable.pause();
-            }
-        }
-    };
-    _create_class(RuntimeClip, [
-        {
-            key: "enable",
-            set: function set(value) {
-                if (value) {
-                    this.playable.play();
-                } else {
-                    this.parentMixer.setInputWeight(this.playable, 0);
-                    this.playable.pause();
-                }
-            }
-        }
-    ]);
-    return RuntimeClip;
-}();
-
-var ActivationMixerPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(ActivationMixerPlayable, Playable);
-    function ActivationMixerPlayable() {
-        return Playable.apply(this, arguments);
-    }
-    var _proto = ActivationMixerPlayable.prototype;
-    _proto.processFrame = function processFrame(context) {
-        var boundObject = context.output.getUserData();
-        if (!_instanceof1(boundObject, VFXItem)) {
-            return;
-        }
-        var boundItem = boundObject;
-        var hasInput = false;
-        for(var i = 0; i < this.getInputCount(); i++){
-            if (this.getInputWeight(i) > 0) {
-                hasInput = true;
-                break;
-            }
-        }
-        if (hasInput) {
-            boundItem.transform.setValid(true);
-            boundItem.setActive(true);
-        } else {
-            boundItem.transform.setValid(false);
-            boundItem.setActive(false);
-        }
-    };
-    return ActivationMixerPlayable;
-}(Playable);
-
-var ActivationTrack = /*#__PURE__*/ function(TrackAsset) {
-    _inherits(ActivationTrack, TrackAsset);
-    function ActivationTrack() {
-        return TrackAsset.apply(this, arguments);
-    }
-    var _proto = ActivationTrack.prototype;
-    _proto.createTrackMixer = function createTrackMixer(graph) {
-        return new ActivationMixerPlayable(graph);
-    };
-    return ActivationTrack;
-}(TrackAsset);
-ActivationTrack = __decorate([
-    effectsClass(DataType.ActivationTrack)
-], ActivationTrack);
-
-var PropertyClipPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(PropertyClipPlayable, Playable);
-    function PropertyClipPlayable() {
-        return Playable.apply(this, arguments);
-    }
-    var _proto = PropertyClipPlayable.prototype;
-    _proto.processFrame = function processFrame(context) {
-        this.value = this.curve.getValue(this.time / this.getDuration());
-    };
-    return PropertyClipPlayable;
-}(Playable);
+    return ColorPropertyMixerPlayable;
+}(TrackMixerPlayable);
 
-var FloatPropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(FloatPropertyMixerPlayable, Playable);
+var FloatPropertyMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(FloatPropertyMixerPlayable, TrackMixerPlayable);
     function FloatPropertyMixerPlayable() {
         var _this;
-        _this = Playable.apply(this, arguments) || this;
+        _this = TrackMixerPlayable.apply(this, arguments) || this;
         _this.propertyName = "";
         return _this;
     }
     var _proto = FloatPropertyMixerPlayable.prototype;
-    _proto.processFrame = function processFrame(context) {
+    _proto.evaluate = function evaluate(context) {
         var boundObject = context.output.getUserData();
         if (!boundObject) {
             return;
@@ -23403,10 +23132,10 @@ var FloatPropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
         var hasInput = false;
         var value = 0;
         // evaluate the curve
-        for(var i = 0; i < this.getInputCount(); i++){
-            var weight = this.getInputWeight(i);
+        for(var i = 0; i < this.clipPlayables.length; i++){
+            var weight = this.getClipWeight(i);
             if (weight > 0) {
-                var propertyClipPlayable = this.getInput(i);
+                var propertyClipPlayable = this.getClipPlayable(i);
                 if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
                     console.error("FloatPropertyTrack added non-FloatPropertyPlayableAsset");
                     continue;
@@ -23422,7 +23151,27 @@ var FloatPropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
         }
     };
     return FloatPropertyMixerPlayable;
-}(Playable);
+}(TrackMixerPlayable);
+
+var ParticleMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(ParticleMixerPlayable, TrackMixerPlayable);
+    function ParticleMixerPlayable() {
+        return TrackMixerPlayable.apply(this, arguments);
+    }
+    var _proto = ParticleMixerPlayable.prototype;
+    _proto.evaluate = function evaluate(context) {};
+    return ParticleMixerPlayable;
+}(TrackMixerPlayable);
+
+var SpriteColorMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(SpriteColorMixerPlayable, TrackMixerPlayable);
+    function SpriteColorMixerPlayable() {
+        return TrackMixerPlayable.apply(this, arguments);
+    }
+    var _proto = SpriteColorMixerPlayable.prototype;
+    _proto.evaluate = function evaluate(context) {};
+    return SpriteColorMixerPlayable;
+}(TrackMixerPlayable);
 
 var SerializationHelper = /*#__PURE__*/ function() {
     function SerializationHelper() {}
@@ -23914,7 +23663,8 @@ var SerializationHelper = /*#__PURE__*/ function() {
         this.timelinePlayable.setTime(time);
         // The properties of the object may change dynamically,
         // so reset the track binding to avoid invalidation of the previously obtained binding object.
-        this.resolveBindings();
+        // this.resolveBindings();
+        this.timelinePlayable.evaluate();
         this.graph.evaluate(dt);
     };
     _proto.createContent = function createContent() {
@@ -24047,6 +23797,20 @@ var SerializationHelper = /*#__PURE__*/ function() {
         }
         return regions;
     };
+    /**
+   * 设置当前合成子元素的渲染顺序
+   * @internal
+   */ _proto.setChildrenRenderOrder = function setChildrenRenderOrder(startOrder) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.items), _step; !(_step = _iterator()).done;){
+            var item = _step.value;
+            item.renderOrder = startOrder++;
+            var subCompositionComponent = item.getComponent(CompositionComponent);
+            if (subCompositionComponent) {
+                startOrder = subCompositionComponent.setChildrenRenderOrder(startOrder);
+            }
+        }
+        return startOrder;
+    };
     _proto.fromData = function fromData(data) {
         Behaviour.prototype.fromData.call(this, data);
         this.items = data.items;
@@ -24093,21 +23857,21 @@ var SubCompositionClipPlayable = /*#__PURE__*/ function(Playable) {
     return SubCompositionClipPlayable;
 }(Playable);
 
-var SubCompositionMixerPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(SubCompositionMixerPlayable, Playable);
+var SubCompositionMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(SubCompositionMixerPlayable, TrackMixerPlayable);
     function SubCompositionMixerPlayable() {
-        return Playable.apply(this, arguments);
+        return TrackMixerPlayable.apply(this, arguments);
     }
     var _proto = SubCompositionMixerPlayable.prototype;
-    _proto.processFrame = function processFrame(context) {
+    _proto.evaluate = function evaluate(context) {
         var boundObject = context.output.getUserData();
         if (!_instanceof1(boundObject, CompositionComponent)) {
             return;
         }
         var compositionComponent = boundObject;
         var hasInput = false;
-        for(var i = 0; i < this.getInputCount(); i++){
-            if (this.getInputWeight(i) > 0) {
+        for(var i = 0; i < this.clipPlayables.length; i++){
+            if (this.getClipWeight(i) > 0) {
                 hasInput = true;
                 break;
             }
@@ -24119,18 +23883,28 @@ var SubCompositionMixerPlayable = /*#__PURE__*/ function(Playable) {
         }
     };
     return SubCompositionMixerPlayable;
-}(Playable);
+}(TrackMixerPlayable);
+
+var TransformMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(TransformMixerPlayable, TrackMixerPlayable);
+    function TransformMixerPlayable() {
+        return TrackMixerPlayable.apply(this, arguments);
+    }
+    var _proto = TransformMixerPlayable.prototype;
+    _proto.evaluate = function evaluate(context) {};
+    return TransformMixerPlayable;
+}(TrackMixerPlayable);
 
-var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(Vector4PropertyMixerPlayable, Playable);
+var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(Vector4PropertyMixerPlayable, TrackMixerPlayable);
     function Vector4PropertyMixerPlayable() {
         var _this;
-        _this = Playable.apply(this, arguments) || this;
+        _this = TrackMixerPlayable.apply(this, arguments) || this;
         _this.propertyName = "";
         return _this;
     }
     var _proto = Vector4PropertyMixerPlayable.prototype;
-    _proto.processFrame = function processFrame(context) {
+    _proto.evaluate = function evaluate(context) {
         var boundObject = context.output.getUserData();
         if (!boundObject) {
             return;
@@ -24142,10 +23916,10 @@ var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
         }
         value.setZero();
         // evaluate the curve
-        for(var i = 0; i < this.getInputCount(); i++){
-            var weight = this.getInputWeight(i);
+        for(var i = 0; i < this.clipPlayables.length; i++){
+            var weight = this.getClipWeight(i);
             if (weight > 0) {
-                var propertyClipPlayable = this.getInput(i);
+                var propertyClipPlayable = this.getClipPlayable(i);
                 if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
                     console.error("Vector4PropertyTrack added non-Vector4PropertyPlayableAsset");
                     continue;
@@ -24164,52 +23938,215 @@ var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
         }
     };
     return Vector4PropertyMixerPlayable;
-}(Playable);
+}(TrackMixerPlayable);
 
-var ColorPropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(ColorPropertyMixerPlayable, Playable);
-    function ColorPropertyMixerPlayable() {
+/**
+ * @since 2.0.0
+ */ var TimelineClip = /*#__PURE__*/ function() {
+    function TimelineClip() {
+        this.start = 0;
+        this.duration = 0;
+    }
+    var _proto = TimelineClip.prototype;
+    _proto.toLocalTime = function toLocalTime(time) {
+        var localTime = time - this.start;
+        var duration = this.duration;
+        if (localTime - duration > 0) {
+            if (this.endBehavior === EndBehavior.restart) {
+                localTime = localTime % duration;
+            } else if (this.endBehavior === EndBehavior.freeze) {
+                localTime = Math.min(duration, localTime);
+            }
+        }
+        return localTime;
+    };
+    return TimelineClip;
+}();
+var TrackAsset = /*#__PURE__*/ function(PlayableAsset) {
+    _inherits(TrackAsset, PlayableAsset);
+    function TrackAsset() {
         var _this;
-        _this = Playable.apply(this, arguments) || this;
-        _this.propertyName = "";
+        _this = PlayableAsset.apply(this, arguments) || this;
+        _this.trackType = 0;
+        _this.clipSeed = 0;
+        _this.clips = [];
+        _this.children = [];
         return _this;
     }
-    var _proto = ColorPropertyMixerPlayable.prototype;
-    _proto.processFrame = function processFrame(context) {
-        var boundObject = context.output.getUserData();
-        if (!boundObject) {
-            return;
+    var _proto = TrackAsset.prototype;
+    /**
+   * 重写该方法以获取自定义对象绑定
+   */ _proto.updateAnimatedObject = function updateAnimatedObject() {
+        if (this.parent) {
+            this.boundObject = this.parent.boundObject;
         }
-        var hasInput = false;
-        var value = boundObject[this.propertyName];
-        if (!_instanceof1(value, Color)) {
-            return;
+    };
+    /**
+   * 重写该方法以创建自定义混合器
+   */ _proto.createTrackMixer = function createTrackMixer(graph) {
+        return new TrackMixerPlayable(graph);
+    };
+    _proto.createOutput = function createOutput() {
+        var output = new PlayableOutput();
+        return output;
+    };
+    _proto.createPlayableGraph = function createPlayableGraph(graph, runtimeClips) {
+        var mixerPlayable = this.createMixerPlayableGraph(graph, runtimeClips);
+        return mixerPlayable;
+    };
+    _proto.createMixerPlayableGraph = function createMixerPlayableGraph(graph, runtimeClips) {
+        var clips = [];
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
+            var clip = _step.value;
+            clips.push(clip);
         }
-        value.setZero();
-        // evaluate the curve
-        for(var i = 0; i < this.getInputCount(); i++){
-            var weight = this.getInputWeight(i);
-            if (weight > 0) {
-                var propertyClipPlayable = this.getInput(i);
-                if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
-                    console.error("ColorPropertyMixerPlayable received incompatible input");
-                    continue;
-                }
-                var curveValue = propertyClipPlayable.value;
-                value.r += curveValue.r * weight;
-                value.g += curveValue.g * weight;
-                value.b += curveValue.b * weight;
-                value.a += curveValue.a * weight;
-                hasInput = true;
+        var mixerPlayable = this.compileClips(graph, clips, runtimeClips);
+        return mixerPlayable;
+    };
+    _proto.compileClips = function compileClips(graph, timelineClips, runtimeClips) {
+        var mixer = this.createTrackMixer(graph);
+        for(var _iterator = _create_for_of_iterator_helper_loose(timelineClips), _step; !(_step = _iterator()).done;){
+            var timelineClip = _step.value;
+            var clipPlayable = this.createClipPlayable(graph, timelineClip);
+            clipPlayable.setDuration(timelineClip.duration);
+            var clip = new RuntimeClip(timelineClip, clipPlayable, mixer, this);
+            runtimeClips.push(clip);
+            mixer.clipPlayables.push(clipPlayable);
+            mixer.setClipWeight(clipPlayable, 0.0);
+        }
+        return mixer;
+    };
+    _proto.createPlayable = function createPlayable(graph) {
+        return new Playable(graph);
+    };
+    _proto.getChildTracks = function getChildTracks() {
+        return this.children;
+    };
+    _proto.addChild = function addChild(child) {
+        this.children.push(child);
+        child.parent = this;
+    };
+    _proto.createClip = function createClip(classConstructor, name) {
+        var newClip = new TimelineClip();
+        newClip.asset = new classConstructor(this.engine);
+        newClip.name = name ? name : "TimelineClip" + newClip.id;
+        this.addClip(newClip);
+        return newClip;
+    };
+    _proto.getClips = function getClips() {
+        return this.clips;
+    };
+    _proto.findClip = function findClip(name) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
+            var clip = _step.value;
+            if (clip.name === name) {
+                return clip;
             }
         }
-        // set value
-        if (hasInput) {
-            boundObject[this.propertyName] = value;
+    };
+    _proto.addClip = function addClip(clip) {
+        clip.id = (this.clipSeed++).toString();
+        this.clips.push(clip);
+    };
+    _proto.createClipPlayable = function createClipPlayable(graph, clip) {
+        return clip.asset.createPlayable(graph);
+    };
+    _proto.fromData = function fromData(data) {
+        PlayableAsset.prototype.fromData.call(this, data);
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
+            var child = _step.value;
+            child.parent = this;
         }
     };
-    return ColorPropertyMixerPlayable;
-}(Playable);
+    return TrackAsset;
+}(PlayableAsset);
+__decorate([
+    serialize(TimelineClip)
+], TrackAsset.prototype, "clips", void 0);
+__decorate([
+    serialize()
+], TrackAsset.prototype, "children", void 0);
+TrackAsset = __decorate([
+    effectsClass(DataType.TrackAsset)
+], TrackAsset);
+var TrackType;
+(function(TrackType) {
+    TrackType[TrackType["MasterTrack"] = 0] = "MasterTrack";
+    TrackType[TrackType["ObjectTrack"] = 1] = "ObjectTrack";
+})(TrackType || (TrackType = {}));
+var RuntimeClip = /*#__PURE__*/ function() {
+    function RuntimeClip(clip, clipPlayable, parentMixer, track) {
+        this.clip = clip;
+        this.playable = clipPlayable;
+        this.parentMixer = parentMixer;
+        this.track = track;
+        if (_instanceof1(this.track.boundObject, VFXItem)) {
+            this.particleSystem = this.track.boundObject.getComponent(ParticleSystem);
+        }
+    }
+    var _proto = RuntimeClip.prototype;
+    _proto.evaluateAt = function evaluateAt(localTime) {
+        var clip = this.clip;
+        var weight = 1.0;
+        var ended = false;
+        var started = false;
+        var boundObject = this.track.boundObject;
+        if (localTime >= clip.start + clip.duration && clip.endBehavior === EndBehavior.destroy) {
+            if (_instanceof1(boundObject, VFXItem) && VFXItem.isParticle(boundObject) && this.particleSystem && !this.particleSystem.destroyed) {
+                weight = 1.0;
+            } else {
+                weight = 0.0;
+                ended = true;
+            }
+        } else if (localTime - this.clip.start >= 0) {
+            weight = 1.0;
+            started = true;
+        } else if (localTime < clip.start) {
+            weight = 0.0;
+        }
+        if (started && this.playable.getPlayState() !== PlayState.Playing) {
+            this.playable.play();
+        }
+        this.parentMixer.setClipWeight(this.playable, weight);
+        var clipTime = parseFloat(clip.toLocalTime(localTime).toFixed(3));
+        this.playable.setTime(clipTime);
+        // 判断动画是否结束
+        if (ended) {
+            if (this.playable.getPlayState() === PlayState.Playing) {
+                this.playable.pause();
+            }
+        }
+    };
+    _create_class(RuntimeClip, [
+        {
+            key: "enable",
+            set: function set(value) {
+                if (value) {
+                    this.playable.play();
+                } else {
+                    this.parentMixer.setClipWeight(this.playable, 0);
+                    this.playable.pause();
+                }
+            }
+        }
+    ]);
+    return RuntimeClip;
+}();
+
+var ActivationTrack = /*#__PURE__*/ function(TrackAsset) {
+    _inherits(ActivationTrack, TrackAsset);
+    function ActivationTrack() {
+        return TrackAsset.apply(this, arguments);
+    }
+    var _proto = ActivationTrack.prototype;
+    _proto.createTrackMixer = function createTrackMixer(graph) {
+        return new ActivationMixerPlayable(graph);
+    };
+    return ActivationTrack;
+}(TrackAsset);
+ActivationTrack = __decorate([
+    effectsClass(DataType.ActivationTrack)
+], ActivationTrack);
 
 var PropertyTrack = /*#__PURE__*/ function(TrackAsset) {
     _inherits(PropertyTrack, TrackAsset);
@@ -24282,6 +24219,10 @@ var SpriteColorTrack = /*#__PURE__*/ function(TrackAsset) {
     function SpriteColorTrack() {
         return TrackAsset.apply(this, arguments);
     }
+    var _proto = SpriteColorTrack.prototype;
+    _proto.createTrackMixer = function createTrackMixer(graph) {
+        return new SpriteColorMixerPlayable(graph);
+    };
     return SpriteColorTrack;
 }(TrackAsset);
 SpriteColorTrack = __decorate([
@@ -24314,6 +24255,10 @@ var TransformTrack = /*#__PURE__*/ function(TrackAsset) {
     function TransformTrack() {
         return TrackAsset.apply(this, arguments);
     }
+    var _proto = TransformTrack.prototype;
+    _proto.createTrackMixer = function createTrackMixer(graph) {
+        return new TransformMixerPlayable(graph);
+    };
     return TransformTrack;
 }(TrackAsset);
 TransformTrack = __decorate([
@@ -24342,6 +24287,18 @@ MaterialTrack = __decorate([
     effectsClass("MaterialTrack")
 ], MaterialTrack);
 
+var ParticleTrack = /*#__PURE__*/ function(TrackAsset) {
+    _inherits(ParticleTrack, TrackAsset);
+    function ParticleTrack() {
+        return TrackAsset.apply(this, arguments);
+    }
+    var _proto = ParticleTrack.prototype;
+    _proto.createTrackMixer = function createTrackMixer(graph) {
+        return new ParticleMixerPlayable(graph);
+    };
+    return ParticleTrack;
+}(TrackAsset);
+
 var Vector4PropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
     _inherits(Vector4PropertyTrack, PropertyTrack);
     function Vector4PropertyTrack() {
@@ -24470,7 +24427,6 @@ var TimelineAsset = /*#__PURE__*/ function(PlayableAsset) {
     var _proto = TimelineAsset.prototype;
     _proto.createPlayable = function createPlayable(graph) {
         var timelinePlayable = new TimelinePlayable(graph);
-        timelinePlayable.setTraversalMode(PlayableTraversalMode.Passthrough);
         for(var _iterator = _create_for_of_iterator_helper_loose(this.tracks), _step; !(_step = _iterator()).done;){
             var track = _step.value;
             if (_instanceof1(track, ObjectBindingTrack)) {
@@ -24551,9 +24507,7 @@ var TimelinePlayable = /*#__PURE__*/ function(Playable) {
         return _this;
     }
     var _proto = TimelinePlayable.prototype;
-    _proto.prepareFrame = function prepareFrame(context) {
-        this.evaluate();
-    };
+    _proto.prepareFrame = function prepareFrame(context) {};
     _proto.evaluate = function evaluate() {
         var time = this.getTime();
         // TODO search active clips
@@ -24570,11 +24524,10 @@ var TimelinePlayable = /*#__PURE__*/ function(Playable) {
             var track = _step.value;
             // create track mixer and track output
             var trackMixPlayable = track.createPlayableGraph(graph, this.clips);
-            this.addInput(trackMixPlayable, 0);
             var trackOutput = track.createOutput();
             trackOutput.setUserData(track.boundObject);
             graph.addOutput(trackOutput);
-            trackOutput.setSourcePlayable(this, this.getInputCount() - 1);
+            trackOutput.setSourcePlayable(trackMixPlayable);
             // create track instance
             var trackInstance = new TrackInstance(track, trackMixPlayable, trackOutput);
             trackInstanceMap[track.getInstanceId()] = trackInstance;
@@ -24635,10 +24588,10 @@ Vector4PropertyPlayableAsset = __decorate([
     effectsClass("Vector4PropertyPlayableAsset")
 ], Vector4PropertyPlayableAsset);
 
-var ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
-    _inherits(ObjectBindingTrack, TrackAsset1);
+var ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset) {
+    _inherits(ObjectBindingTrack, TrackAsset);
     function ObjectBindingTrack() {
-        return TrackAsset1.apply(this, arguments);
+        return TrackAsset.apply(this, arguments);
     }
     var _proto = ObjectBindingTrack.prototype;
     _proto.updateAnimatedObject = function updateAnimatedObject() {};
@@ -24649,7 +24602,7 @@ var ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
         var boundItem = this.boundObject;
         // 添加粒子动画 clip // TODO 待移除
         if (boundItem.getComponent(ParticleSystem)) {
-            var particleTrack = timelineAsset.createTrack(TrackAsset, this, "ParticleTrack");
+            var particleTrack = timelineAsset.createTrack(ParticleTrack, this, "ParticleTrack");
             particleTrack.boundObject = this.boundObject;
             var particleClip = particleTrack.createClip(ParticleBehaviourPlayableAsset);
             particleClip.start = boundItem.start;
@@ -24672,14 +24625,14 @@ var TextLayout = /*#__PURE__*/ function() {
     function TextLayout(options) {
         this.width = 0;
         this.height = 0;
-        var _options_textHeight = options.textHeight, textHeight = _options_textHeight === void 0 ? 100 : _options_textHeight, _options_textWidth = options.textWidth, textWidth = _options_textWidth === void 0 ? 100 : _options_textWidth, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? TextOverflow.display : _options_textOverflow, _options_textBaseline = options.textBaseline, textBaseline = _options_textBaseline === void 0 ? TextBaseline.top : _options_textBaseline, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? TextAlignment.left : _options_textAlign, _options_text = options.text, text = _options_text === void 0 ? " " : _options_text, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_autoWidth = options.autoWidth, autoWidth = _options_autoWidth === void 0 ? false : _options_autoWidth, fontSize = options.fontSize, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? fontSize : _options_lineHeight;
+        var _options_textHeight = options.textHeight, textHeight = _options_textHeight === void 0 ? 100 : _options_textHeight, _options_textWidth = options.textWidth, textWidth = _options_textWidth === void 0 ? 100 : _options_textWidth, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? TextOverflow.clip : _options_textOverflow, _options_textBaseline = options.textBaseline, textBaseline = _options_textBaseline === void 0 ? TextBaseline.top : _options_textBaseline, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? TextAlignment.left : _options_textAlign, _options_text = options.text, text = _options_text === void 0 ? " " : _options_text, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_autoWidth = options.autoWidth, autoWidth = _options_autoWidth === void 0 ? false : _options_autoWidth, fontSize = options.fontSize, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? fontSize : _options_lineHeight;
         var tempWidth = fontSize + letterSpace;
         this.autoWidth = autoWidth;
         this.maxTextWidth = text.length * tempWidth;
         this.width = textWidth;
         this.height = textHeight;
         this.letterSpace = letterSpace;
-        this.overFlow = textOverflow;
+        this.overflow = textOverflow;
         this.textBaseline = textBaseline;
         this.textAlign = textAlign;
         this.lineHeight = lineHeight;
@@ -27669,11 +27622,11 @@ var seed = 1;
         if (compressedTexture === void 0) compressedTexture = 0;
         var _this = this;
         return _async_to_generator(function() {
-            var _this_options, useCompressedTexture, variables, baseUrl, jobs, loadedImages;
+            var _this_options, useCompressedTexture, variables, disableWebP, disableAVIF, baseUrl, jobs, loadedImages;
             return __generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        _this_options = _this.options, useCompressedTexture = _this_options.useCompressedTexture, variables = _this_options.variables;
+                        _this_options = _this.options, useCompressedTexture = _this_options.useCompressedTexture, variables = _this_options.variables, disableWebP = _this_options.disableWebP, disableAVIF = _this_options.disableAVIF;
                         baseUrl = _this.baseUrl;
                         jobs = images.map(/*#__PURE__*/ _async_to_generator(function(img, idx) {
                             var png, webp, avif, imageURL, webpURL, avifURL, id, template, background, url, isVideo, loadFn, resultImage, e, compressed, src, bufferURL, _ref, url1, image, _tmp;
@@ -27684,9 +27637,9 @@ var seed = 1;
                                         // eslint-disable-next-line compat/compat
                                         imageURL = new URL(png, baseUrl).href;
                                         // eslint-disable-next-line compat/compat
-                                        webpURL = webp && new URL(webp, baseUrl).href;
+                                        webpURL = !disableWebP && webp ? new URL(webp, baseUrl).href : undefined;
                                         // eslint-disable-next-line compat/compat
-                                        avifURL = avif && new URL(avif, baseUrl).href;
+                                        avifURL = !disableAVIF && avif ? new URL(avif, baseUrl).href : undefined;
                                         id = img.id;
                                         if (!("template" in img)) return [
                                             3,
@@ -28375,7 +28328,6 @@ var tmpScale = new Vector3(1, 1, 1);
     return Camera;
 }();
 
-var listOrder = 0;
 /**
  * 合成资源管理
  */ var CompositionSourceManager = /*#__PURE__*/ function() {
@@ -28408,7 +28360,6 @@ var listOrder = 0;
         this.pluginSystem = pluginSystem;
         this.totalTime = totalTime != null ? totalTime : 0;
         this.textures = cachedTextures;
-        listOrder = 0;
         this.sourceContent = this.getContent(this.composition);
     }
     var _proto = CompositionSourceManager.prototype;
@@ -28439,7 +28390,6 @@ var listOrder = 0;
             var sourceItemData = this.engine.jsonSceneData[itemDataPath.id];
             var itemProps = sourceItemData;
             if (passRenderLevel(sourceItemData.renderLevel, this.renderLevel)) {
-                itemProps.listIndex = listOrder++;
                 if (itemProps.type === ItemType.sprite || itemProps.type === ItemType.particle || itemProps.type === ItemType.spine || //@ts-expect-error
                 itemProps.type === ItemType.shape) {
                     for(var _iterator2 = _create_for_of_iterator_helper_loose(itemProps.components), _step2; !(_step2 = _iterator2()).done;){
@@ -28742,6 +28692,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         SerializationHelper.deserialize(sourceContent, _this.rootComposition);
         _this.rootComposition.createContent();
         _this.buildItemTree(_this.rootItem);
+        _this.rootComposition.setChildrenRenderOrder(0);
         _this.pluginSystem.resetComposition(_assert_this_initialized(_this), _this.renderFrame);
         return _this;
     }
@@ -31381,8 +31332,8 @@ registerPlugin("sprite", SpriteLoader, VFXItem, true);
 registerPlugin("particle", ParticleLoader, VFXItem, true);
 registerPlugin("cal", CalculateLoader, VFXItem, true);
 registerPlugin("interact", InteractLoader, VFXItem, true);
-var version = "2.1.5";
+var version = "2.2.0";
 logger.info("Core version: " + version + ".");
 
-export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, Asset, AssetLoader, AssetManager, BYTES_TYPE_MAP, BaseRenderComponent, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, ColorCurve, ColorPropertyPlayableAsset, ColorPropertyTrack, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, DEFAULT_FPS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, EffectsPackage, Engine, EventEmitter, EventSystem, Fake3DAnimationMode, Fake3DComponent, FilterMode, Float16ArrayWrapper, FloatPropertyPlayableAsset, FloatPropertyTrack, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, MaterialTrack, Mesh, MeshCollider, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, PostProcessVolume, PropertyTrack, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, Scene, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderFactory, ShaderType, ShaderVariant, ShapeComponent, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, Vector4Curve, Vector4PropertyPlayableAsset, Vector4PropertyTrack, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, createCopyShader, createGLContext, createKeyFrameMeta, createShape, createValueGetter, decimalEqual, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isIOSByUA, isMiniProgram, isObject, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemFrameFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, passRenderLevel, pluginLoaderMap, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecFill, vecMulCombine, version, vertexFormatType2GLType };
+export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, Asset, AssetLoader, AssetManager, BYTES_TYPE_MAP, BaseRenderComponent, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, ColorCurve, ColorPropertyPlayableAsset, ColorPropertyTrack, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, DEFAULT_FPS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, EffectsPackage, Engine, EventEmitter, EventSystem, Fake3DAnimationMode, Fake3DComponent, FilterMode, Float16ArrayWrapper, FloatPropertyPlayableAsset, FloatPropertyTrack, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, MaterialTrack, Mesh, MeshCollider, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, ParticleTrack, PassTextureCache, PathSegments, PluginSystem, PostProcessVolume, PropertyTrack, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, Scene, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderFactory, ShaderType, ShaderVariant, ShapeComponent, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, Vector4Curve, Vector4PropertyPlayableAsset, Vector4PropertyTrack, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, createCopyShader, createGLContext, createKeyFrameMeta, createShape, createValueGetter, decimalEqual, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isIOSByUA, isMiniProgram, isObject, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemFrameFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, passRenderLevel, pluginLoaderMap, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecFill, vecMulCombine, version, vertexFormatType2GLType };
 //# sourceMappingURL=index.mjs.map