@galacean/effects-core 2.1.5 → 2.2.0

package/dist/index.js

@@ -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
  */
 
 'use strict';
@@ -63,12 +63,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) {
@@ -12756,8 +12752,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);
@@ -12835,19 +12831,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);
@@ -12859,7 +12858,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);
@@ -12878,8 +12878,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);
@@ -13032,15 +13032,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) {
@@ -15904,6 +15907,7 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         if (this.animated) {
             this.buildPath(this.data);
             this.buildGeometryFromPath(this.path.shapePath);
+            this.animated = false;
         }
     };
     _proto.buildGeometryFromPath = function buildGeometryFromPath(shapePath) {
@@ -17011,14 +17015,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);
@@ -17027,12 +17027,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) {
@@ -17047,24 +17047,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() {
@@ -17087,56 +17078,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;
     };
@@ -17152,18 +17093,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() {};
@@ -17175,76 +17112,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;
 }();
 /**
@@ -17252,20 +17119,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;
@@ -17291,11 +17152,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;
@@ -17948,7 +17804,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
     };
     /**
    * 添加组件
-   * @param classConstructor - 要添加的组件类型
+   * @param classConstructor - 要添加的组件
    */ _proto.addComponent = function addComponent(classConstructor) {
         var newComponent = new classConstructor(this.engine);
         this.components.push(newComponent);
@@ -18191,7 +18047,7 @@ exports.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;
@@ -18253,8 +18109,6 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
                 this.rendererComponents.push(component.renderer);
             }
         }
-        // renderOrder 在 component 初始化后设置。确保能拿到 rendererComponent。
-        this.renderOrder = listIndex;
     };
     _proto.toData = function toData() {
         var _this_parent;
@@ -22800,12 +22654,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;
 }();
 
@@ -23140,266 +22988,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;
-}();
-exports.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, exports.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)
-], exports.TrackAsset.prototype, "clips", void 0);
-__decorate([
-    serialize()
-], exports.TrackAsset.prototype, "children", void 0);
-exports.TrackAsset = __decorate([
-    effectsClass(DataType.TrackAsset)
-], exports.TrackAsset);
-exports.TrackType = void 0;
-(function(TrackType) {
-    TrackType[TrackType["MasterTrack"] = 0] = "MasterTrack";
-    TrackType[TrackType["ObjectTrack"] = 1] = "ObjectTrack";
-})(exports.TrackType || (exports.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, exports.VFXItem)) {
-            this.particleSystem = this.track.boundObject.getComponent(exports.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, exports.VFXItem) && exports.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, exports.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);
-
-exports.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;
-}(exports.TrackAsset);
-exports.ActivationTrack = __decorate([
-    effectsClass(DataType.ActivationTrack)
-], exports.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;
@@ -23407,10 +23136,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;
@@ -23426,7 +23155,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() {}
@@ -23918,7 +23667,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() {
@@ -24051,6 +23801,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;
@@ -24097,21 +23861,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;
             }
@@ -24123,18 +23887,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;
@@ -24146,10 +23920,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;
@@ -24168,52 +23942,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;
+}();
+exports.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)
+], exports.TrackAsset.prototype, "clips", void 0);
+__decorate([
+    serialize()
+], exports.TrackAsset.prototype, "children", void 0);
+exports.TrackAsset = __decorate([
+    effectsClass(DataType.TrackAsset)
+], exports.TrackAsset);
+exports.TrackType = void 0;
+(function(TrackType) {
+    TrackType[TrackType["MasterTrack"] = 0] = "MasterTrack";
+    TrackType[TrackType["ObjectTrack"] = 1] = "ObjectTrack";
+})(exports.TrackType || (exports.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, exports.VFXItem)) {
+            this.particleSystem = this.track.boundObject.getComponent(exports.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, exports.VFXItem) && exports.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;
+}();
+
+exports.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;
+}(exports.TrackAsset);
+exports.ActivationTrack = __decorate([
+    effectsClass(DataType.ActivationTrack)
+], exports.ActivationTrack);
 
 var PropertyTrack = /*#__PURE__*/ function(TrackAsset) {
     _inherits(PropertyTrack, TrackAsset);
@@ -24286,6 +24223,10 @@ exports.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;
 }(exports.TrackAsset);
 exports.SpriteColorTrack = __decorate([
@@ -24318,6 +24259,10 @@ exports.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;
 }(exports.TrackAsset);
 exports.TransformTrack = __decorate([
@@ -24346,6 +24291,18 @@ exports.MaterialTrack = __decorate([
     effectsClass("MaterialTrack")
 ], exports.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;
+}(exports.TrackAsset);
+
 exports.Vector4PropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
     _inherits(Vector4PropertyTrack, PropertyTrack);
     function Vector4PropertyTrack() {
@@ -24474,7 +24431,6 @@ exports.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, exports.ObjectBindingTrack)) {
@@ -24555,9 +24511,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
@@ -24574,11 +24528,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;
@@ -24639,10 +24592,10 @@ exports.Vector4PropertyPlayableAsset = __decorate([
     effectsClass("Vector4PropertyPlayableAsset")
 ], exports.Vector4PropertyPlayableAsset);
 
-exports.ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
-    _inherits(ObjectBindingTrack, TrackAsset1);
+exports.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() {};
@@ -24653,7 +24606,7 @@ exports.ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
         var boundItem = this.boundObject;
         // 添加粒子动画 clip // TODO 待移除
         if (boundItem.getComponent(exports.ParticleSystem)) {
-            var particleTrack = timelineAsset.createTrack(exports.TrackAsset, this, "ParticleTrack");
+            var particleTrack = timelineAsset.createTrack(ParticleTrack, this, "ParticleTrack");
             particleTrack.boundObject = this.boundObject;
             var particleClip = particleTrack.createClip(ParticleBehaviourPlayableAsset);
             particleClip.start = boundItem.start;
@@ -24676,14 +24629,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;
@@ -27673,11 +27626,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;
@@ -27688,9 +27641,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,
@@ -28379,7 +28332,6 @@ var tmpScale = new Vector3(1, 1, 1);
     return Camera;
 }();
 
-var listOrder = 0;
 /**
  * 合成资源管理
  */ var CompositionSourceManager = /*#__PURE__*/ function() {
@@ -28412,7 +28364,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;
@@ -28443,7 +28394,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;){
@@ -28746,6 +28696,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;
     }
@@ -31385,7 +31336,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem, true);
 registerPlugin("particle", ParticleLoader, exports.VFXItem, true);
 registerPlugin("cal", CalculateLoader, exports.VFXItem, true);
 registerPlugin("interact", InteractLoader, exports.VFXItem, true);
-var version = "2.1.5";
+var version = "2.2.0";
 logger.info("Core version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -31448,6 +31399,7 @@ exports.ParticleBehaviourPlayableAsset = ParticleBehaviourPlayableAsset;
 exports.ParticleLoader = ParticleLoader;
 exports.ParticleMesh = ParticleMesh;
 exports.ParticleSystemRenderer = ParticleSystemRenderer;
+exports.ParticleTrack = ParticleTrack;
 exports.PassTextureCache = PassTextureCache;
 exports.PathSegments = PathSegments;
 exports.PluginSystem = PluginSystem;