[Bug] the animation of area-chart when update is strange

[xile611]

Version

1.11.x

Link to Minimal Reproduction

no

Steps to Reproduce

const accData =
  // 100km/h
  [
    {
      dist: 19982,
      value: '0',
      t: 1718860378333
    },
    {
      dist: 19962,
      value: '0.15',
      t: 1718860378340
    },
    {
      dist: 19942,
      value: '0.24',
      t: 1718860378349
    },
    {
      dist: 19922,
      value: '0.16',
      t: 1718860378356
    },
    {
      dist: 19903,
      value: '0.14',
      t: 1718860378366
    },
    {
      dist: 19883,
      value: '0.05',
      t: 1718860378373
    },
    {
      dist: 19863,
      value: '0.01',
      t: 1718860378382
    },
    {
      dist: 19843,
      value: '0.11',
      t: 1718860378389
    },
    {
      dist: 19823,
      value: '0.2',
      t: 1718860378398
    },
    {
      dist: 19803,
      value: '0.3',
      t: 1718860378406
    },
    {
      dist: 19783,
      value: '0.18',
      t: 1718860378414
    },
    {
      dist: 19764,
      value: '0.11',
      t: 1718860378421
    },
    {
      dist: 19744,
      value: '0.08',
      t: 1718860378428
    },
    {
      dist: 19724,
      value: '0',
      t: 1718860378437
    },
    {
      dist: 19704,
      value: '0.16',
      t: 1718860378445
    },
    {
      dist: 19684,
      value: '0.21',
      t: 1718860378453
    },
    {
      dist: 19664,
      value: '0.1',
      t: 1718860378460
    },
    {
      dist: 19644,
      value: '0.05',
      t: 1718860378469
    },
    {
      dist: 19624,
      value: '-0.08',
      t: 1718860378477
    },
    {
      dist: 19604,
      value: '-0.06',
      t: 1718860378485
    },
    {
      dist: 19584,
      value: '0.04',
      t: 1718860378493
    },
    {
      dist: 19565,
      value: '0.02',
      t: 1718860378501
    },
    {
      dist: 19545,
      value: '0.04',
      t: 1718860378509
    },
    {
      dist: 19525,
      value: '-0.05',
      t: 1718860378518
    },
    {
      dist: 19505,
      value: '0.04',
      t: 1718860378525
    },
    {
      dist: 19485,
      value: '0.29',
      t: 1718860378533
    },
    {
      dist: 19465,
      value: '0.35',
      t: 1718860378540
    },
    {
      dist: 19445,
      value: '0.25',
      t: 1718860378548
    },
    {
      dist: 19425,
      value: '0.23',
      t: 1718860378558
    },
    {
      dist: 19405,
      value: '-0.07',
      t: 1718860378564
    },
    {
      dist: 19385,
      value: '-0.02',
      t: 1718860378573
    },
    {
      dist: 19365,
      value: '0.1',
      t: 1718860378581
    },
    {
      dist: 19345,
      value: '0.19',
      t: 1718860378589
    },
    {
      dist: 19325,
      value: '0.31',
      t: 1718860378597
    },
    {
      dist: 19305,
      value: '0.24',
      t: 1718860378605
    },
    {
      dist: 19285,
      value: '0.11',
      t: 1718860378613
    },
    {
      dist: 19265,
      value: '0.05',
      t: 1718860378623
    },
    {
      dist: 19245,
      value: '0.04',
      t: 1718860378628
    },
    {
      dist: 19225,
      value: '0.06',
      t: 1718860378638
    },
    {
      dist: 19205,
      value: '0.13',
      t: 1718860378646
    },
    {
      dist: 19185,
      value: '0.03',
      t: 1718860378653
    },
    {
      dist: 19165,
      value: '-0.07',
      t: 1718860378661
    },
    {
      dist: 19145,
      value: '-0.09',
      t: 1718860378669
    },
    {
      dist: 19125,
      value: '-0.11',
      t: 1718860378676
    },
    {
      dist: 19104,
      value: '0.02',
      t: 1718860378686
    },
    {
      dist: 19084,
      value: '0.11',
      t: 1718860378693
    },
    {
      dist: 19064,
      value: '0.07',
      t: 1718860378701
    },
    {
      dist: 19044,
      value: '0.1',
      t: 1718860378709
    },
    {
      dist: 19024,
      value: '0.02',
      t: 1718860378716
    },
    {
      dist: 19004,
      value: '0.07',
      t: 1718860378725
    },
    {
      dist: 18984,
      value: '0.03',
      t: 1718860378733
    },
    {
      dist: 18964,
      value: '-0.04',
      t: 1718860378743
    },
    {
      dist: 18944,
      value: '-0.08',
      t: 1718860378749
    },
    {
      dist: 18924,
      value: '0.05',
      t: 1718860378757
    },
    {
      dist: 18904,
      value: '0.03',
      t: 1718860378766
    },
    {
      dist: 18884,
      value: '0.2',
      t: 1718860378773
    },
    {
      dist: 18863,
      value: '0.23',
      t: 1718860378780
    },
    {
      dist: 18843,
      value: '0.08',
      t: 1718860378789
    },
    {
      dist: 18823,
      value: '0.1',
      t: 1718860378798
    },
    {
      dist: 18803,
      value: '0.11',
      t: 1718860378808
    },
    {
      dist: 18783,
      value: '0.07',
      t: 1718860378813
    },
    {
      dist: 18763,
      value: '0.19',
      t: 1718860378821
    },
    {
      dist: 18743,
      value: '0.15',
      t: 1718860378829
    },
    {
      dist: 18723,
      value: '0.06',
      t: 1718860378837
    },
    {
      dist: 18702,
      value: '0.13',
      t: 1718860378844
    },
    {
      dist: 18682,
      value: '0.11',
      t: 1718860378853
    },
    {
      dist: 18662,
      value: '0.11',
      t: 1718860378861
    },
    {
      dist: 18642,
      value: '0.16',
      t: 1718860378869
    },
    {
      dist: 18622,
      value: '0.06',
      t: 1718860378876
    },
    {
      dist: 18602,
      value: '0.01',
      t: 1718860378888
    },
    {
      dist: 18581,
      value: '0.07',
      t: 1718860378893
    },
    {
      dist: 18541,
      value: '-0.03',
      t: 1718860378903
    },
    {
      dist: 18541,
      value: '0.09',
      t: 1718860378908
    },
    {
      dist: 18521,
      value: '0.12',
      t: 1718860378917
    },
    {
      dist: 18500,
      value: '0.06',
      t: 1718860378924
    },
    {
      dist: 18480,
      value: '0.16',
      t: 1718860378933
    },
    {
      dist: 18460,
      value: '0.22',
      t: 1718860378944
    },
    {
      dist: 18440,
      value: '0.21',
      t: 1718860378949
    },
    {
      dist: 18420,
      value: '0.32',
      t: 1718860378956
    },
    {
      dist: 18399,
      value: '0.32',
      t: 1718860378965
    },
    {
      dist: 18379,
      value: '0.28',
      t: 1718860378975
    },
    {
      dist: 18359,
      value: '0.2',
      t: 1718860378980
    },
    {
      dist: 18338,
      value: '0.09',
      t: 1718860378989
    },
    {
      dist: 18318,
      value: '0.04',
      t: 1718860378997
    },
    {
      dist: 18298,
      value: '0.01',
      t: 1718860379005
    },
    {
      dist: 18277,
      value: '0.16',
      t: 1718860379014
    },
    {
      dist: 18257,
      value: '0.21',
      t: 1718860379022
    },
    {
      dist: 18237,
      value: '0.3',
      t: 1718860379029
    },
    {
      dist: 18216,
      value: '0.23',
      t: 1718860379037
    },
    {
      dist: 18196,
      value: '0.03',
      t: 1718860379045
    },
    {
      dist: 18176,
      value: '-0.07',
      t: 1718860379053
    },
    {
      dist: 18155,
      value: '-0.13',
      t: 1718860379061
    },
    {
      dist: 18135,
      value: '-0.06',
      t: 1718860379068
    },
    {
      dist: 18115,
      value: '-0.01',
      t: 1718860379077
    },
    {
      dist: 18094,
      value: '-0.08',
      t: 1718860379085
    },
    {
      dist: 18074,
      value: '-0.15',
      t: 1718860379093
    },
    {
      dist: 18054,
      value: '-0.08',
      t: 1718860379101
    },
    {
      dist: 18013,
      value: '0.13',
      t: 1718860379112
    },
    {
      dist: 17992,
      value: '0.17',
      t: 1718860379121
    },
    {
      dist: 17992,
      value: '0.24',
      t: 1718860379125
    },
    {
      dist: 17972,
      value: '-0.01',
      t: 1718860379133
    },
    {
      dist: 17952,
      value: '-0.31',
      t: 1718860379142
    },
    {
      dist: 17931,
      value: '-0.03',
      t: 1718860379150
    },
    {
      dist: 17911,
      value: '0.19',
      t: 1718860379157
    },
    {
      dist: 17890,
      value: '0.28',
      t: 1718860379165
    },
    {
      dist: 17870,
      value: '0.4',
      t: 1718860379174
    },
    {
      dist: 17850,
      value: '0.03',
      t: 1718860379181
    },
    {
      dist: 17829,
      value: '-0.22',
      t: 1718860379190
    },
    {
      dist: 17809,
      value: '0.08',
      t: 1718860379197
    },
    {
      dist: 17788,
      value: '0.18',
      t: 1718860379205
    },
    {
      dist: 17768,
      value: '0.25',
      t: 1718860379213
    },
    {
      dist: 17747,
      value: '0.37',
      t: 1718860379221
    },
    {
      dist: 17727,
      value: '0.05',
      t: 1718860379231
    },
    {
      dist: 17707,
      value: '-0.11',
      t: 1718860379237
    },
    {
      dist: 17686,
      value: '0.1',
      t: 1718860379245
    },
    {
      dist: 17666,
      value: '0.03',
      t: 1718860379253
    },
    {
      dist: 17645,
      value: '0.06',
      t: 1718860379261
    },
    {
      dist: 17625,
      value: '0.18',
      t: 1718860379268
    },
    {
      dist: 17604,
      value: '-0.04',
      t: 1718860379276
    },
    {
      dist: 17584,
      value: '0',
      t: 1718860379285
    },
    {
      dist: 17563,
      value: '0.12',
      t: 1718860379294
    },
    {
      dist: 17543,
      value: '0.1',
      t: 1718860379301
    },
    {
      dist: 17522,
      value: '0.18',
      t: 1718860379308
    },
    {
      dist: 17502,
      value: '0.13',
      t: 1718860379316
    },
    {
      dist: 17481,
      value: '0.1',
      t: 1718860379325
    },
    {
      dist: 17461,
      value: '0.01',
      t: 1718860379333
    },
    {
      dist: 17440,
      value: '0.11',
      t: 1718860379343
    },
    {
      dist: 17420,
      value: '0.09',
      t: 1718860379348
    },
    {
      dist: 17399,
      value: '0.13',
      t: 1718860379357
    },
    {
      dist: 17379,
      value: '0.1',
      t: 1718860379364
    },
    {
      dist: 17358,
      value: '0.14',
      t: 1718860379373
    },
    {
      dist: 17338,
      value: '0.09',
      t: 1718860379381
    },
    {
      dist: 17317,
      value: '0.15',
      t: 1718860379389
    },
    {
      dist: 17297,
      value: '0.12',
      t: 1718860379397
    },
    {
      dist: 17276,
      value: '-0.01',
      t: 1718860379405
    },
    {
      dist: 17255,
      value: '0.07',
      t: 1718860379413
    },
    {
      dist: 17235,
      value: '0.13',
      t: 1718860379421
    },
    {
      dist: 17214,
      value: '0.03',
      t: 1718860379430
    },
    {
      dist: 17194,
      value: '0.19',
      t: 1718860379437
    },
    {
      dist: 17173,
      value: '0.08',
      t: 1718860379444
    },
    {
      dist: 17153,
      value: '0.07',
      t: 1718860379453
    },
    {
      dist: 17132,
      value: '0.14',
      t: 1718860379461
    },
    {
      dist: 17111,
      value: '0.06',
      t: 1718860379468
    },
    {
      dist: 17091,
      value: '0.03',
      t: 1718860379479
    },
    {
      dist: 17070,
      value: '0.02',
      t: 1718860379484
    },
    {
      dist: 17050,
      value: '-0.03',
      t: 1718860379493
    },
    {
      dist: 17029,
      value: '0.11',
      t: 1718860379501
    },
    {
      dist: 17008,
      value: '0.14',
      t: 1718860379511
    },
    {
      dist: 16988,
      value: '0.21',
      t: 1718860379516
    },
    {
      dist: 16967,
      value: '0.16',
      t: 1718860379528
    },
    {
      dist: 16946,
      value: '0.05',
      t: 1718860379533
    },
    {
      dist: 16905,
      value: '0',
      t: 1718860379547
    },
    {
      dist: 16905,
      value: '0.03',
      t: 1718860379548
    },
    {
      dist: 16884,
      value: '0.18',
      t: 1718860379556
    },
    {
      dist: 16864,
      value: '0.24',
      t: 1718860379566
    },
    {
      dist: 16843,
      value: '0.29',
      t: 1718860379573
    },
    {
      dist: 16822,
      value: '0.23',
      t: 1718860379581
    },
    {
      dist: 16802,
      value: '0.1',
      t: 1718860379589
    },
    {
      dist: 16781,
      value: '0.09',
      t: 1718860379598
    },
    {
      dist: 16760,
      value: '0.07',
      t: 1718860379605
    },
    {
      dist: 16739,
      value: '0.16',
      t: 1718860379613
    },
    {
      dist: 16719,
      value: '0.16',
      t: 1718860379620
    },
    {
      dist: 16698,
      value: '0.14',
      t: 1718860379628
    },
    {
      dist: 16677,
      value: '0.06',
      t: 1718860379636
    },
    {
      dist: 16656,
      value: '-0.06',
      t: 1718860379646
    },
    {
      dist: 16636,
      value: '0.07',
      t: 1718860379654
    },
    {
      dist: 16615,
      value: '0.06',
      t: 1718860379662
    },
    {
      dist: 16594,
      value: '0',
      t: 1718860379668
    },
    {
      dist: 16573,
      value: '0.02',
      t: 1718860379678
    },
    {
      dist: 16553,
      value: '-0.03',
      t: 1718860379684
    },
    {
      dist: 16532,
      value: '0.05',
      t: 1718860379693
    },
    {
      dist: 16511,
      value: '0.17',
      t: 1718860379700
    },
    {
      dist: 16490,
      value: '0.16',
      t: 1718860379710
    },
    {
      dist: 16469,
      value: '0.08',
      t: 1718860379716
    },
    {
      dist: 16449,
      value: '0.02',
      t: 1718860379724
    },
    {
      dist: 16428,
      value: '0.06',
      t: 1718860379733
    },
    {
      dist: 16407,
      value: '0.26',
      t: 1718860379740
    },
    {
      dist: 16386,
      value: '0.29',
      t: 1718860379750
    },
    {
      dist: 16365,
      value: '0.19',
      t: 1718860379756
    },
    {
      dist: 16345,
      value: '0.04',
      t: 1718860379765
    },
    {
      dist: 16324,
      value: '-0.18',
      t: 1718860379773
    },
    {
      dist: 16303,
      value: '-0.05',
      t: 1718860379781
    },
    {
      dist: 16282,
      value: '0.18',
      t: 1718860379789
    },
    {
      dist: 16240,
      value: '0.22',
      t: 1718860379800
    },
    {
      dist: 16240,
      value: '0.15',
      t: 1718860379805
    },
    {
      dist: 16219,
      value: '-0.06',
      t: 1718860379813
    },
    {
      dist: 16199,
      value: '-0.15',
      t: 1718860379822
    },
    {
      dist: 16178,
      value: '-0.05',
      t: 1718860379828
    },
    {
      dist: 16157,
      value: '-0.01',
      t: 1718860379836
    },
    {
      dist: 16136,
      value: '0.06',
      t: 1718860379846
    },
    {
      dist: 16115,
      value: '0.02',
      t: 1718860379853
    },
    {
      dist: 16094,
      value: '-0.04',
      t: 1718860379860
    },
    {
      dist: 16073,
      value: '0.11',
      t: 1718860379869
    },
    {
      dist: 16052,
      value: '0.14',
      t: 1718860379880
    },
    {
      dist: 16032,
      value: '0.08',
      t: 1718860379884
    },
    {
      dist: 16011,
      value: '0.03',
      t: 1718860379893
    },
    {
      dist: 15990,
      value: '0.03',
      t: 1718860379900
    },
    {
      dist: 15969,
      value: '0.04',
      t: 1718860379910
    },
    {
      dist: 15948,
      value: '0.21',
      t: 1718860379917
    },
    {
      dist: 15927,
      value: '0.24',
      t: 1718860379925
    },
    {
      dist: 15885,
      value: '0.14',
      t: 1718860379937
    },
    {
      dist: 15885,
      value: '0.16',
      t: 1718860379940
    },
    {
      dist: 15864,
      value: '0.1',
      t: 1718860379948
    },
    {
      dist: 15843,
      value: '0.18',
      t: 1718860379956
    },
    {
      dist: 15822,
      value: '0.33',
      t: 1718860379965
    },
    {
      dist: 15801,
      value: '0.24',
      t: 1718860379973
    }

  ];
const spec = {
  type: 'area',
  animation: true,
  color: {
    specified: {
      A: '#FFA41A',
      B: '#49C9C9'
    }
  },
  padding: {
    right: 27,
    bottom: 54,
    top: 21.6
  },
  stack: false,
  animationAppear: {
    point: false,
    type: 'clipIn',
    duration: 1000,
    easing: 'linear'
  },
  animationEnter: {
    point: false,
    type: 'clipIn',
    duration: 1000,
    easing: 'linear'
  },
  animationUpdate: {
    point: false,
    area: [
      {
        // newPointAnimateType: 'grow',
        type: 'clipIn',
        duration: 2000,
        easing: 'linear'
      }
    ]
  },
  line: {
    style: {
      strokewidth: 2.7
    }
  },
  point: {
    visible: true,
    style: {
      visible: false,
      size: 5,
      fill: '#fff',
      stroke: '#000',
      lineWidth: 1
    },
    state: {
      dimension_hover: {
        visible: true,
        size: 10.8
      }
    }
  },
  data: [
    {
      id: 'id0',
      values: accData.slice(0, 100)
    }
  ],
  area: {
    visible: true
    // style: {
    //   fill: {
    //     gradient: 'linear',
    //     x0: 0,
    //     y0: 1,
    //     x1: 0,
    //     y1: 0,
    //     stops: [
    //       {
    //         offset: 0,
    //         color: 'rgba(255, 164, 26, 0.7)'
    //       },
    //       {
    //         offset: 1,
    //         color: 'rgba(73, 201, 201, 0.2)'
    //       }
    //     ]
    //   }
    // }
  },
  tooltip: {
    visible: true,
    trigger: ['hover', 'click'],
    triggerOff: 'none',
    activeType: ['dimension']
  },
  background: 'transparent',
  xField: 'dist',
  yField: 'value',
  seriesField: 'type',
  crosshair: {
    followTooltip: true,
    xField: {
      visible: true,
      line: {
        type: 'line',
        style: {
          lineWidth: 1,
          opacity: 1,
          stroke: '#fff',
          lineDash: [1, 1]
        }
      },
      bindingAxesIndex: [0],
      label: {
        visible: false
      }
    },
    yuField: {
      visible: false
    }
  },
  axes: [
    {
      type: 'linear',
      orient: 'top',
      max: 0,
      min: 20000,
      visible: false
    },
    {
      type: 'linear',
      orient: 'left',
      nice: true,
      min: -1.5,
      max: 0.5,
      width: 47.25,
      tick: {
        tickCount: 4
      },
      label: {
        style: {
          fontSize: 13.5,
          fontFamily: 'D-DIN Exp'
        }
      },
      grid: {}
    }
  ]
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

setTimeout(() => {
  vchart.updateData('id0', accData.slice(0, 200));
}, 5000);

setTimeout(() => {
  vchart.updateData('id0', accData.slice(0, 400));
}, 10000);

Current Behavior

Expected Behavior

clip animation can start up the first new data

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response