targetj 1.0.255 → 1.0.257

package/build/AnimationManager.js

@@ -94,16 +94,17 @@ var AnimationManager = /*#__PURE__*/function () {
         _iterator.f();
       }
       var transformAnimation = false;
+      var baseTfMap = {};
+      for (var _i = 0, _Object$keys = Object.keys(tmodel.tfMap); _i < _Object$keys.length; _i++) {
+        var key = _Object$keys[_i];
+        baseTfMap[key] = tmodel.val(key);
+      }
       var keyframes = batch.frames.map(function (frame) {
         var out = _objectSpread({}, frame.styleMap);
         out.offset = frame.keyTime / totalDuration;
         if (Object.keys(frame.tfMap).length) {
-          Object.keys(tmodel.tfMap).forEach(function (key) {
-            tmodel.tfMap[key] = tmodel.val(key);
-          });
-          var tfMap = _objectSpread(_objectSpread({}, tmodel.tfMap), frame.tfMap);
+          var tfMap = _objectSpread(_objectSpread({}, baseTfMap), frame.tfMap);
           out.transform = TModelUtil.getTransformString(tmodel, tfMap);
-          frame.tfMap = tfMap;
           transformAnimation = true;
         }
         AnimationUtil.addUnitsToFrame(out);
@@ -179,6 +180,7 @@ var AnimationManager = /*#__PURE__*/function () {
   }, {
     key: "finalizeAnimation",
     value: function finalizeAnimation(anim) {
+      var finalized = false;
       var _iterator3 = _createForOfIteratorHelper(this.recordMap),
         _step3;
       try {
@@ -192,6 +194,7 @@ var AnimationManager = /*#__PURE__*/function () {
           if (rec.status === 'playing' || rec.status === 'canceled') {
             continue;
           }
+          finalized = true;
           var tmodel = rec.tmodel,
             originalKey = rec.originalKey,
             cleanKey = rec.cleanKey;
@@ -199,10 +202,8 @@ var AnimationManager = /*#__PURE__*/function () {
           this.recordMap.delete(recId);
           this.completeRecord(tmodel, rec, cleanKey, originalKey);
           if (!tmodel.hasAnimatingTargets()) {
-            if (tmodel.finalKeyframe) {
-              if (tmodel.hasDom()) {
-                AnimationUtil.fixStyleByAnimation(tmodel, tmodel.finalKeyframe);
-              }
+            if (tmodel.finalKeyframe && tmodel.hasDom()) {
+              AnimationUtil.fixStyleByAnimation(tmodel, tmodel.finalKeyframe);
             }
             tmodel.lastBatch = undefined;
           }
@@ -215,7 +216,12 @@ var AnimationManager = /*#__PURE__*/function () {
       } finally {
         _iterator3.f();
       }
-      getRunScheduler().schedule(35, "finalizeAnimation");
+      if (finalized) {
+        try {
+          anim.cancel();
+        } catch (_unused) {}
+      }
+      getRunScheduler().schedule(35, 'finalizeAnimation');
     }
   }, {
     key: "startProgressPoller",
@@ -333,10 +339,9 @@ var AnimationManager = /*#__PURE__*/function () {
         tmodel.val(originalKey, value);
         var targetValue = tmodel.targetValues[originalKey];
         if (targetValue) {
-          var _targetValue$valueLis, _targetValue$valueLis2;
+          var _targetValue$valueLis;
           targetValue.step = tmodel.getTargetSteps(originalKey);
-          targetValue.valuePointer = (_targetValue$valueLis = (_targetValue$valueLis2 = targetValue.valueList) === null || _targetValue$valueLis2 === void 0 ? void 0 : _targetValue$valueLis2.length) !== null && _targetValue$valueLis !== void 0 ? _targetValue$valueLis : 0;
-          targetValue.value = value;
+          targetValue.valuePointer = (_targetValue$valueLis = targetValue.valueList) !== null && _targetValue$valueLis !== void 0 && _targetValue$valueLis.length ? targetValue.valueList.length - 1 : 0;
           tmodel.setActual(originalKey, value);
           if (tmodel.isTargetImperative(originalKey)) {
             targetValue.cycle = targetValue.cycles;
@@ -377,8 +382,8 @@ var AnimationManager = /*#__PURE__*/function () {
             continue;
           }
           var previousLogicalStep = baseStepOffset;
-          for (var _i = i0 + 1; _i < i1; _i++) {
-            var frame = frames[_i];
+          for (var _i2 = i0 + 1; _i2 < i1; _i2++) {
+            var frame = frames[_i2];
             var progress = TUtil.limit((frame.keyTime - t0) / spanTime, 0, 1);
             var localStep = Math.round(progress * spanSteps);
             var logicalStep = TUtil.limit(baseStepOffset + localStep, 0, segmentSteps);
@@ -405,8 +410,8 @@ var AnimationManager = /*#__PURE__*/function () {
           return;
         }
         var _segmentSteps = (_ref = (_lastMeta$segmentStep = lastMeta.segmentSteps) !== null && _lastMeta$segmentStep !== void 0 ? _lastMeta$segmentStep : lastMeta.steps) !== null && _ref !== void 0 ? _ref : 0;
-        for (var _i2 = lastIndex + 1; _i2 < frames.length; _i2++) {
-          var _frame = frames[_i2];
+        for (var _i3 = lastIndex + 1; _i3 < frames.length; _i3++) {
+          var _frame = frames[_i3];
           this.setAt(_frame, cleanKey, lastValue);
           _frame.keyMeta.set(cleanKey, _objectSpread(_objectSpread({}, lastMeta), {}, {
             steps: 0,
@@ -436,16 +441,6 @@ var AnimationManager = /*#__PURE__*/function () {
       AnimationUtil.addUnitsToFrame(out);
       AnimationUtil.fixStyleByAnimation(tmodel, out);
     }
-  }, {
-    key: "freezeTModelAtCurrentTime",
-    value: function freezeTModelAtCurrentTime(tmodel) {
-      if (!tmodel.lastBatch) {
-        return;
-      }
-      var cutTime = Math.min(TUtil.now() - tmodel.lastBatch.startTime, tmodel.lastBatch.totalDuration);
-      tmodel.lastBatch = this.cutLastBatch(tmodel, tmodel.lastBatch, cutTime);
-      this.fixTModelStyleFromFrame(tmodel, tmodel.lastBatch.frames[0]);
-    }
   }, {
     key: "collectFramesForKey",
     value: function collectFramesForKey(batch, cleanKey) {
@@ -468,6 +463,7 @@ var AnimationManager = /*#__PURE__*/function () {
             steps: meta === null || meta === void 0 ? void 0 : meta.steps,
             segmentSteps: meta === null || meta === void 0 ? void 0 : meta.segmentSteps,
             interval: meta === null || meta === void 0 ? void 0 : meta.interval,
+            easing: meta === null || meta === void 0 ? void 0 : meta.easing,
             stepOffset: (meta === null || meta === void 0 ? void 0 : meta.stepOffset) || 0,
             valuePointer: meta === null || meta === void 0 ? void 0 : meta.valuePointer,
             cycle: meta === null || meta === void 0 ? void 0 : meta.cycle,
@@ -503,16 +499,14 @@ var AnimationManager = /*#__PURE__*/function () {
   }, {
     key: "deleteAnimation",
     value: function deleteAnimation(tmodel) {
-      var _iterator8 = _createForOfIteratorHelper(this.recordMap),
+      var records = [];
+      var _iterator8 = _createForOfIteratorHelper(this.recordMap.values()),
         _step8;
       try {
         for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-          var _step8$value = _slicedToArray(_step8.value, 2),
-            recId = _step8$value[0],
-            record = _step8$value[1];
-          if (recId.startsWith("".concat(tmodel.oid, "-"))) {
-            ;
-            this.delete(record);
+          var _record = _step8.value;
+          if (_record.tmodel === tmodel) {
+            records.push(_record);
           }
         }
       } catch (err) {
@@ -520,10 +514,37 @@ var AnimationManager = /*#__PURE__*/function () {
       } finally {
         _iterator8.f();
       }
+      if (!records.length) {
+        return false;
+      }
+      var keys = new Set();
+      var animations = new Set();
+      for (var _i4 = 0, _records = records; _i4 < _records.length; _i4++) {
+        var record = _records[_i4];
+        keys.add(record.originalKey);
+        animations.add(record.anim);
+      }
+      TModelUtil.commitAnimatedStyles(tmodel, keys);
+      var _iterator9 = _createForOfIteratorHelper(animations),
+        _step9;
+      try {
+        for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+          var animation = _step9.value;
+          try {
+            animation.cancel();
+          } catch (_unused2) {}
+        }
+      } catch (err) {
+        _iterator9.e(err);
+      } finally {
+        _iterator9.f();
+      }
+      tmodel.clearAnimatingMap();
       tmodel.lastBatch = undefined;
+      tmodel.waapiBatch = undefined;
       tmodel.finalKeyframe = undefined;
       tmodel.finalRawFrame = undefined;
-      tmodel.clearAnimatingMap();
+      return true;
     }
   }, {
     key: "cancelKey",
@@ -538,7 +559,7 @@ var AnimationManager = /*#__PURE__*/function () {
     key: "deleteAll",
     value: function () {
       var _deleteAll = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var tmodels, _iterator9, _step9, _step9$value, record, _iterator10, _step10, tmodel;
+        var animations, keysByTModel, _iterator10, _step10, record, keys, _iterator11, _step11, _step11$value, tmodel, _keys2, _iterator12, _step12, _record2, _iterator13, _step13, animation;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -548,39 +569,92 @@ var AnimationManager = /*#__PURE__*/function () {
                 this.waapiPoller.rafId = 0;
                 this.waapiPoller.alive = false;
               }
-              tmodels = new Set();
-              _iterator9 = _createForOfIteratorHelper(this.recordMap);
+              animations = new Set();
+              keysByTModel = new Map();
+              _iterator10 = _createForOfIteratorHelper(this.recordMap.values());
+              _context.prev = 5;
+              _iterator10.s();
+            case 7:
+              if ((_step10 = _iterator10.n()).done) {
+                _context.next = 18;
+                break;
+              }
+              record = _step10.value;
+              if (!(record.status === "canceled" || record.status === "detached")) {
+                _context.next = 11;
+                break;
+              }
+              return _context.abrupt("continue", 16);
+            case 11:
+              AnimationUtil.updateTModelFromRecord(record);
+              animations.add(record.anim);
+              keys = keysByTModel.get(record.tmodel);
+              if (!keys) {
+                keys = new Set();
+                keysByTModel.set(record.tmodel, keys);
+              }
+              keys.add(record.originalKey);
+            case 16:
+              _context.next = 7;
+              break;
+            case 18:
+              _context.next = 23;
+              break;
+            case 20:
+              _context.prev = 20;
+              _context.t0 = _context["catch"](5);
+              _iterator10.e(_context.t0);
+            case 23:
+              _context.prev = 23;
+              _iterator10.f();
+              return _context.finish(23);
+            case 26:
+              _iterator11 = _createForOfIteratorHelper(keysByTModel);
               try {
-                for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-                  _step9$value = _slicedToArray(_step9.value, 2), record = _step9$value[1];
-                  tmodels.add(record.tmodel);
+                for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
+                  _step11$value = _slicedToArray(_step11.value, 2), tmodel = _step11$value[0], _keys2 = _step11$value[1];
+                  TModelUtil.commitAnimatedStyles(tmodel, _keys2);
+                  AnimationUtil.addToUpdatingTargets(tmodel, _keys2);
+                  tmodel.lastBatch = undefined;
+                  tmodel.waapiBatch = undefined;
+                  tmodel.finalKeyframe = undefined;
+                  tmodel.finalRawFrame = undefined;
                 }
               } catch (err) {
-                _iterator9.e(err);
+                _iterator11.e(err);
               } finally {
-                _iterator9.f();
+                _iterator11.f();
               }
-              _iterator10 = _createForOfIteratorHelper(tmodels);
+              _iterator12 = _createForOfIteratorHelper(this.recordMap.values());
               try {
-                for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-                  tmodel = _step10.value;
-                  this.freezeTModelAtCurrentTime(tmodel);
-                  AnimationUtil.detachAnimationsOnDeleteDom(tmodel);
-                  tmodel.lastBatch = undefined;
-                  tmodel.finalKeyframe = undefined;
-                  tmodel.finalRawFrame = undefined;
+                for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
+                  _record2 = _step12.value;
+                  _record2.status = "detached";
+                }
+              } catch (err) {
+                _iterator12.e(err);
+              } finally {
+                _iterator12.f();
+              }
+              _iterator13 = _createForOfIteratorHelper(animations);
+              try {
+                for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
+                  animation = _step13.value;
+                  try {
+                    animation.cancel();
+                  } catch (_unused3) {}
                 }
               } catch (err) {
-                _iterator10.e(err);
+                _iterator13.e(err);
               } finally {
-                _iterator10.f();
+                _iterator13.f();
               }
               this.recordMap.clear();
-            case 8:
+            case 33:
             case "end":
               return _context.stop();
           }
-        }, _callee, this);
+        }, _callee, this, [[5, 20, 23, 26]]);
       }));
       function deleteAll() {
         return _deleteAll.apply(this, arguments);
@@ -609,17 +683,121 @@ var AnimationManager = /*#__PURE__*/function () {
       }
       return flushOneFrame;
     }()
+  }, {
+    key: "cancelTModelAnimation",
+    value: function cancelTModelAnimation(tmodel) {
+      var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        _ref2$mode = _ref2.mode,
+        mode = _ref2$mode === void 0 ? "resume" : _ref2$mode,
+        _ref2$commitStyle = _ref2.commitStyle,
+        commitStyle = _ref2$commitStyle === void 0 ? true : _ref2$commitStyle;
+      var records = [];
+      var _iterator14 = _createForOfIteratorHelper(this.recordMap.values()),
+        _step14;
+      try {
+        for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
+          var _record4 = _step14.value;
+          if (_record4.tmodel === tmodel) {
+            records.push(_record4);
+          }
+        }
+      } catch (err) {
+        _iterator14.e(err);
+      } finally {
+        _iterator14.f();
+      }
+      if (!records.length) {
+        return false;
+      }
+      var keys = new Set();
+      var animations = new Set();
+      for (var _i5 = 0, _records2 = records; _i5 < _records2.length; _i5++) {
+        var record = _records2[_i5];
+        if (record.status !== "canceled" && record.status !== "detached") {
+          AnimationUtil.updateTModelFromRecord(record);
+        }
+        keys.add(record.originalKey);
+        animations.add(record.anim);
+      }
+      if (commitStyle) {
+        TModelUtil.commitAnimatedStyles(tmodel, keys);
+      }
+      for (var _i6 = 0, _records3 = records; _i6 < _records3.length; _i6++) {
+        var _record3 = _records3[_i6];
+        _record3.status = "detached";
+        this.recordMap.delete(_record3.recId);
+      }
+      var _iterator15 = _createForOfIteratorHelper(animations),
+        _step15;
+      try {
+        for (_iterator15.s(); !(_step15 = _iterator15.n()).done;) {
+          var animation = _step15.value;
+          try {
+            animation.cancel();
+          } catch (_unused4) {}
+        }
+      } catch (err) {
+        _iterator15.e(err);
+      } finally {
+        _iterator15.f();
+      }
+      tmodel.clearAnimatingMap();
+      this.applyCanceledTargetMode(tmodel, keys, mode);
+      tmodel.lastBatch = undefined;
+      tmodel.waapiBatch = undefined;
+      tmodel.finalKeyframe = undefined;
+      tmodel.finalRawFrame = undefined;
+      return true;
+    }
+  }, {
+    key: "applyCanceledTargetMode",
+    value: function applyCanceledTargetMode(tmodel, keys, mode) {
+      var _iterator16 = _createForOfIteratorHelper(keys),
+        _step16;
+      try {
+        for (_iterator16.s(); !(_step16 = _iterator16.n()).done;) {
+          var key = _step16.value;
+          var targetValue = tmodel.targetValues[key];
+          if (!targetValue) {
+            continue;
+          }
+          if (mode === "resume") {
+            tmodel.setTargetStatus(key, "updating");
+            continue;
+          }
+          if (mode === "finish") {
+            this.finishCanceledTarget(tmodel, key);
+            continue;
+          }
+        }
+      } catch (err) {
+        _iterator16.e(err);
+      } finally {
+        _iterator16.f();
+      }
+    }
+  }, {
+    key: "finishCanceledTarget",
+    value: function finishCanceledTarget(tmodel, key) {
+      var record = this.recordMap.get(this.getRecordId(tmodel, key));
+      if (!record) {
+        return;
+      }
+      this.completeRecord(tmodel, record, record.cleanKey, key);
+      tmodel.removeFromAnimatingMap(key);
+      record.hooks.fireOnEnd(tmodel, key);
+    }
   }, {
     key: "fillCutFrameFromRecords",
     value: function fillCutFrameFromRecords(tmodel, cutFrame, cutTime, totalDuration) {
       var progress = totalDuration > 0 ? TUtil.limit(cutTime / totalDuration, 0, 1) : 1;
-      var _iterator11 = _createForOfIteratorHelper(this.recordMap),
-        _step11;
+      var _iterator17 = _createForOfIteratorHelper(this.recordMap),
+        _step17;
       try {
-        for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-          var _ref2, _ref3, _result$remainingStep, _ref4, _result$steps, _targetValue$interval, _result$step;
-          var _step11$value = _slicedToArray(_step11.value, 2),
-            record = _step11$value[1];
+        for (_iterator17.s(); !(_step17 = _iterator17.n()).done;) {
+          var _ref3, _ref4, _result$remainingStep, _ref5, _result$steps, _targetValue$interval, _result$step;
+          var _step17$value = _slicedToArray(_step17.value, 2),
+            record = _step17$value[1];
           if (record.tmodel !== tmodel) {
             continue;
           }
@@ -635,8 +813,8 @@ var AnimationManager = /*#__PURE__*/function () {
           var targetValue = tmodel.targetValues[originalKey];
           this.setAt(cutFrame, cleanKey, result.value);
           cutFrame.keyMeta.set(cleanKey, {
-            steps: (_ref2 = (_ref3 = (_result$remainingStep = result.remainingSteps) !== null && _result$remainingStep !== void 0 ? _result$remainingStep : result.steps) !== null && _ref3 !== void 0 ? _ref3 : targetValue === null || targetValue === void 0 ? void 0 : targetValue.steps) !== null && _ref2 !== void 0 ? _ref2 : 0,
-            segmentSteps: (_ref4 = (_result$steps = result.steps) !== null && _result$steps !== void 0 ? _result$steps : targetValue === null || targetValue === void 0 ? void 0 : targetValue.steps) !== null && _ref4 !== void 0 ? _ref4 : 0,
+            steps: (_ref3 = (_ref4 = (_result$remainingStep = result.remainingSteps) !== null && _result$remainingStep !== void 0 ? _result$remainingStep : result.steps) !== null && _ref4 !== void 0 ? _ref4 : targetValue === null || targetValue === void 0 ? void 0 : targetValue.steps) !== null && _ref3 !== void 0 ? _ref3 : 0,
+            segmentSteps: (_ref5 = (_result$steps = result.steps) !== null && _result$steps !== void 0 ? _result$steps : targetValue === null || targetValue === void 0 ? void 0 : targetValue.steps) !== null && _ref5 !== void 0 ? _ref5 : 0,
             interval: (_targetValue$interval = targetValue === null || targetValue === void 0 ? void 0 : targetValue.interval) !== null && _targetValue$interval !== void 0 ? _targetValue$interval : 8,
             stepOffset: (_result$step = result.step) !== null && _result$step !== void 0 ? _result$step : 0,
             valuePointer: result.valuePointer,
@@ -645,9 +823,9 @@ var AnimationManager = /*#__PURE__*/function () {
           });
         }
       } catch (err) {
-        _iterator11.e(err);
+        _iterator17.e(err);
       } finally {
-        _iterator11.f();
+        _iterator17.f();
       }
     }
   }, {
@@ -671,17 +849,17 @@ var AnimationManager = /*#__PURE__*/function () {
         var originalKeys = _toConsumableArray(new Set(Object.values(batch.keyMap).flatMap(function (set) {
           return _toConsumableArray(set);
         })));
-        var _iterator12 = _createForOfIteratorHelper(originalKeys),
-          _step12;
+        var _iterator18 = _createForOfIteratorHelper(originalKeys),
+          _step18;
         try {
-          for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
-            var originalKey = _step12.value;
+          for (_iterator18.s(); !(_step18 = _iterator18.n()).done;) {
+            var originalKey = _step18.value;
             this.backfillKeyAcrossFramesUsingMorph(tmodel, originalKey, batch.frames);
           }
         } catch (err) {
-          _iterator12.e(err);
+          _iterator18.e(err);
         } finally {
-          _iterator12.f();
+          _iterator18.f();
         }
         batch.frames = batch.frames.slice(i);
       }
@@ -696,8 +874,8 @@ var AnimationManager = /*#__PURE__*/function () {
     value: function callFireOnEndOnConflict(tmodel, lastBatch, newBatch) {
       var oldMap = lastBatch.keyMap; // cleanKey -> Set
       var newMap = newBatch.keyMap;
-      for (var _i3 = 0, _Object$keys = Object.keys(newMap); _i3 < _Object$keys.length; _i3++) {
-        var cleanKey = _Object$keys[_i3];
+      for (var _i7 = 0, _Object$keys2 = Object.keys(newMap); _i7 < _Object$keys2.length; _i7++) {
+        var cleanKey = _Object$keys2[_i7];
         var oldSet = oldMap[cleanKey];
         var newSet = newMap[cleanKey];
         if (!oldSet || !newSet) {
@@ -705,11 +883,11 @@ var AnimationManager = /*#__PURE__*/function () {
         }
 
         // Any old originalKey that’s not present anymore should be completed/canceled.
-        var _iterator13 = _createForOfIteratorHelper(oldSet),
-          _step13;
+        var _iterator19 = _createForOfIteratorHelper(oldSet),
+          _step19;
         try {
-          for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
-            var oldOriginal = _step13.value;
+          for (_iterator19.s(); !(_step19 = _iterator19.n()).done;) {
+            var oldOriginal = _step19.value;
             if (newSet.has(oldOriginal)) {
               continue;
             }
@@ -724,9 +902,9 @@ var AnimationManager = /*#__PURE__*/function () {
             }
           }
         } catch (err) {
-          _iterator13.e(err);
+          _iterator19.e(err);
         } finally {
-          _iterator13.f();
+          _iterator19.f();
         }
       }
     }
@@ -734,87 +912,103 @@ var AnimationManager = /*#__PURE__*/function () {
     key: "mergeBatches",
     value: function mergeBatches(lastBatch, newBatch) {
       var newCleanKeys = new Set(Object.keys(newBatch.keyMap));
-      var oldFrames = [];
-      var _iterator14 = _createForOfIteratorHelper(lastBatch.frames),
-        _step14;
-      try {
-        for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
-          var frame = _step14.value;
-          var _iterator16 = _createForOfIteratorHelper(newCleanKeys),
-            _step16;
-          try {
-            for (_iterator16.s(); !(_step16 = _iterator16.n()).done;) {
-              var _frame$keyMeta;
-              var _key = _step16.value;
-              delete frame.styleMap[_key];
-              delete frame.tfMap[_key];
-              (_frame$keyMeta = frame.keyMeta) === null || _frame$keyMeta === void 0 || _frame$keyMeta.delete(_key);
-            }
-          } catch (err) {
-            _iterator16.e(err);
-          } finally {
-            _iterator16.f();
-          }
-          if (Object.keys(frame.styleMap).length || Object.keys(frame.tfMap).length) {
-            oldFrames.push(frame);
-          }
-        }
-      } catch (err) {
-        _iterator14.e(err);
-      } finally {
-        _iterator14.f();
-      }
       var oldKeyMap = {};
-      for (var _i4 = 0, _Object$entries = Object.entries(lastBatch.keyMap); _i4 < _Object$entries.length; _i4++) {
-        var _Object$entries$_i = _slicedToArray(_Object$entries[_i4], 2),
+      for (var _i8 = 0, _Object$entries = Object.entries(lastBatch.keyMap); _i8 < _Object$entries.length; _i8++) {
+        var _Object$entries$_i = _slicedToArray(_Object$entries[_i8], 2),
           key = _Object$entries$_i[0],
-          set = _Object$entries$_i[1];
+          originalKeys = _Object$entries$_i[1];
         if (!newCleanKeys.has(key)) {
-          oldKeyMap[key] = set;
+          oldKeyMap[key] = originalKeys;
         }
       }
-      newBatch.frames = [].concat(oldFrames, _toConsumableArray(newBatch.frames));
-      newBatch.frames.sort(function (a, b) {
+      var oldCleanKeys = Object.keys(oldKeyMap);
+      var oldFrames = [];
+      if (oldCleanKeys.length) {
+        var _iterator20 = _createForOfIteratorHelper(lastBatch.frames),
+          _step20;
+        try {
+          for (_iterator20.s(); !(_step20 = _iterator20.n()).done;) {
+            var frame = _step20.value;
+            var oldFrame = {
+              keyTime: frame.keyTime,
+              tfMap: {},
+              styleMap: {},
+              keyMeta: new Map()
+            };
+            var _iterator21 = _createForOfIteratorHelper(oldCleanKeys),
+              _step21;
+            try {
+              for (_iterator21.s(); !(_step21 = _iterator21.n()).done;) {
+                var _frame$keyMeta;
+                var _key = _step21.value;
+                if (TUtil.isDefined(frame.tfMap[_key])) {
+                  oldFrame.tfMap[_key] = frame.tfMap[_key];
+                }
+                if (TUtil.isDefined(frame.styleMap[_key])) {
+                  oldFrame.styleMap[_key] = frame.styleMap[_key];
+                }
+                var meta = (_frame$keyMeta = frame.keyMeta) === null || _frame$keyMeta === void 0 ? void 0 : _frame$keyMeta.get(_key);
+                if (meta) {
+                  oldFrame.keyMeta.set(_key, meta);
+                }
+              }
+            } catch (err) {
+              _iterator21.e(err);
+            } finally {
+              _iterator21.f();
+            }
+            if (Object.keys(oldFrame.tfMap).length || Object.keys(oldFrame.styleMap).length) {
+              oldFrames.push(oldFrame);
+            }
+          }
+        } catch (err) {
+          _iterator20.e(err);
+        } finally {
+          _iterator20.f();
+        }
+      }
+      var frames = [].concat(oldFrames, _toConsumableArray(newBatch.frames));
+      frames.sort(function (a, b) {
         return a.keyTime - b.keyTime;
       });
       var merged = [];
-      var _iterator15 = _createForOfIteratorHelper(newBatch.frames),
-        _step15;
+      var _iterator22 = _createForOfIteratorHelper(frames),
+        _step22;
       try {
-        for (_iterator15.s(); !(_step15 = _iterator15.n()).done;) {
-          var f = _step15.value;
+        for (_iterator22.s(); !(_step22 = _iterator22.n()).done;) {
+          var _frame2 = _step22.value;
           var last = merged[merged.length - 1];
-          if (last && Math.abs(last.keyTime - f.keyTime) < 0.0001) {
-            Object.assign(last.styleMap, f.styleMap);
-            Object.assign(last.tfMap, f.tfMap);
-            if (f.keyMeta) {
-              var _iterator17 = _createForOfIteratorHelper(f.keyMeta),
-                _step17;
-              try {
-                for (_iterator17.s(); !(_step17 = _iterator17.n()).done;) {
-                  var _step17$value = _slicedToArray(_step17.value, 2),
-                    k = _step17$value[0],
-                    v = _step17$value[1];
-                  last.keyMeta.set(k, v);
-                }
-              } catch (err) {
-                _iterator17.e(err);
-              } finally {
-                _iterator17.f();
+          if (last && Math.abs(last.keyTime - _frame2.keyTime) < 0.0001) {
+            Object.assign(last.styleMap, _frame2.styleMap);
+            Object.assign(last.tfMap, _frame2.tfMap);
+            var _iterator23 = _createForOfIteratorHelper(_frame2.keyMeta),
+              _step23;
+            try {
+              for (_iterator23.s(); !(_step23 = _iterator23.n()).done;) {
+                var _step23$value = _slicedToArray(_step23.value, 2),
+                  _key2 = _step23$value[0],
+                  _meta = _step23$value[1];
+                last.keyMeta.set(_key2, _meta);
               }
+            } catch (err) {
+              _iterator23.e(err);
+            } finally {
+              _iterator23.f();
             }
           } else {
-            merged.push(f);
+            merged.push(_frame2);
           }
         }
       } catch (err) {
-        _iterator15.e(err);
+        _iterator22.e(err);
       } finally {
-        _iterator15.f();
+        _iterator22.f();
       }
-      newBatch.keyMap = _objectSpread(_objectSpread({}, oldKeyMap), newBatch.keyMap);
       newBatch.frames = merged;
-      newBatch.totalDuration = newBatch.frames.length ? newBatch.frames[newBatch.frames.length - 1].keyTime : 0;
+      newBatch.keyMap = _objectSpread(_objectSpread({}, oldKeyMap), newBatch.keyMap);
+      newBatch.totalDuration = merged.reduce(function (duration, frame) {
+        return Math.max(duration, frame.keyTime);
+      }, 0);
     }
   }, {
     key: "areFramesEqual",
@@ -824,8 +1018,8 @@ var AnimationManager = /*#__PURE__*/function () {
       if (keysA.length !== keysB.length) {
         return false;
       }
-      for (var _i5 = 0, _keysA = keysA; _i5 < _keysA.length; _i5++) {
-        var k = _keysA[_i5];
+      for (var _i9 = 0, _keysA = keysA; _i9 < _keysA.length; _i9++) {
+        var k = _keysA[_i9];
         if (k === 'offset') {
           continue;
         }
@@ -861,25 +1055,25 @@ var AnimationManager = /*#__PURE__*/function () {
       var cutTime = Math.min(TUtil.now() - tmodel.lastBatch.startTime, tmodel.lastBatch.totalDuration);
       var batch = this.cutLastBatch(tmodel, tmodel.lastBatch, cutTime);
       AnimationUtil.rebaseCutBatchMeta(tmodel, batch);
-      var _iterator18 = _createForOfIteratorHelper(batch.frames),
-        _step18;
+      var _iterator24 = _createForOfIteratorHelper(batch.frames),
+        _step24;
       try {
-        for (_iterator18.s(); !(_step18 = _iterator18.n()).done;) {
-          var frame = _step18.value;
-          for (var _i7 = 0, _Object$entries3 = Object.entries(tfUpdates); _i7 < _Object$entries3.length; _i7++) {
-            var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i7], 2),
-              _key2 = _Object$entries3$_i[0],
+        for (_iterator24.s(); !(_step24 = _iterator24.n()).done;) {
+          var frame = _step24.value;
+          for (var _i11 = 0, _Object$entries3 = Object.entries(tfUpdates); _i11 < _Object$entries3.length; _i11++) {
+            var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i11], 2),
+              _key3 = _Object$entries3$_i[0],
               _value = _Object$entries3$_i[1];
-            frame.tfMap[_key2] = _value;
+            frame.tfMap[_key3] = _value;
           }
         }
       } catch (err) {
-        _iterator18.e(err);
+        _iterator24.e(err);
       } finally {
-        _iterator18.f();
+        _iterator24.f();
       }
-      for (var _i6 = 0, _Object$entries2 = Object.entries(tfUpdates); _i6 < _Object$entries2.length; _i6++) {
-        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i6], 2),
+      for (var _i10 = 0, _Object$entries2 = Object.entries(tfUpdates); _i10 < _Object$entries2.length; _i10++) {
+        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i10], 2),
           key = _Object$entries2$_i[0],
           value = _Object$entries2$_i[1];
         tmodel.tfMap[key] = value;