fix(bar-race): fix lines glitch with sub-pixel optimization in animations #14679

src/component/axis/AxisBuilder.ts

@@ -270,7 +270,7 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
 
         const line = new graphic.Line({
             // Id for animation
-            subPixelOptimize: true,
+            subPixelOptimize: false,
             shape: {
                 x1: pt1[0],
                 y1: pt1[1],
@@ -343,7 +343,6 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
     },
 
     axisTickLabel(opt, axisModel, group, transformGroup) {
-
         const ticksEls = buildAxisMajorTicks(group, transformGroup, axisModel, opt);
         const labelEls = buildAxisLabel(group, transformGroup, axisModel, opt);
 
@@ -630,7 +629,7 @@ function createTicks(
         }
         // Tick line, Not use group transform to have better line draw
         const tickEl = new graphic.Line({
-            subPixelOptimize: true,
+            subPixelOptimize: false,
             shape: {
                 x1: pt1[0],
                 y1: pt1[1],

src/component/axis/AxisView.ts

@@ -24,6 +24,8 @@ import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../core/ExtensionAPI';
 import { Payload, Dictionary } from '../../util/types';
 import type BaseAxisPointer from '../axisPointer/BaseAxisPointer';
+import Element from 'zrender/src/Element';
+import * as graphic from '../../util/graphic';
 
 const axisPointerClazz: Dictionary<AxisPointerConstructor> = {};
 

src/component/axis/CartesianAxisView.ts

@@ -96,7 +96,9 @@ class CartesianAxisView extends AxisView {
         const isInitialSortFromBarRacing = payload && payload.type === 'changeAxisOrder' && payload.isInitSort;
 
         if (!isInitialSortFromBarRacing) {
-            graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel);
+            graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel, () => {
+                graphic.setGroupSubPixelOptimize(this._axisGroup, true);
+            });
         }
 
         super.render(axisModel, ecModel, api, payload);
@@ -139,6 +141,7 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
         const p2 = [];
 
         const lineStyle = lineStyleModel.getLineStyle();
+
         for (let i = 0; i < ticksCoords.length; i++) {
             const tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
 
@@ -159,7 +162,7 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
             const tickValue = ticksCoords[i].tickValue;
             axisGroup.add(new graphic.Line({
                 anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
-                subPixelOptimize: true,
+                subPixelOptimize: false,
                 autoBatch: true,
                 shape: {
                     x1: p1[0],
@@ -193,7 +196,6 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
 
         const lineStyle = lineStyleModel.getLineStyle();
 
-
         for (let i = 0; i < minorTicksCoords.length; i++) {
             for (let k = 0; k < minorTicksCoords[i].length; k++) {
                 const tickCoord = axis.toGlobalCoord(minorTicksCoords[i][k].coord);
@@ -213,7 +215,7 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
 
                 axisGroup.add(new graphic.Line({
                     anid: 'minor_line_' + minorTicksCoords[i][k].tickValue,
-                    subPixelOptimize: true,
+                    subPixelOptimize: false,
                     autoBatch: true,
                     shape: {
                         x1: p1[0],

src/component/axis/ParallelAxisView.ts

@@ -102,7 +102,9 @@ class ParallelAxisView extends ComponentView {
             builderOpt, areaSelectStyle, axisModel, coordSysModel, areaWidth, api
         );
 
-        graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel);
+        graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel, () => {
+            graphic.setGroupSubPixelOptimize(this._axisGroup, true);
+        });
     }
 
     // /**

src/component/axis/RadiusAxisView.ts

@@ -67,7 +67,9 @@ class RadiusAxisView extends AxisView {
         zrUtil.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
         newAxisGroup.add(axisBuilder.getGroup());
 
-        graphic.groupTransition(oldAxisGroup, newAxisGroup, radiusAxisModel);
+        graphic.groupTransition(oldAxisGroup, newAxisGroup, radiusAxisModel, () => {
+            graphic.setGroupSubPixelOptimize(this._axisGroup, true);
+        });
 
         zrUtil.each(selfBuilderAttrs, function (name) {
             if (radiusAxisModel.get([name, 'show']) && !radiusAxis.scale.isBlank()) {

src/component/axis/SingleAxisView.ts

@@ -67,7 +67,9 @@ class SingleAxisView extends AxisView {
             }
         }, this);
 
-        graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel);
+        graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel, () => {
+            graphic.setGroupSubPixelOptimize(this._axisGroup, true);
+        });
 
         super.render(axisModel, ecModel, api, payload);
     }
@@ -126,7 +128,7 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
             const colorIndex = (lineCount++) % lineColors.length;
             splitLines[colorIndex] = splitLines[colorIndex] || [];
             splitLines[colorIndex].push(new graphic.Line({
-                subPixelOptimize: true,
+                subPixelOptimize: false,
                 shape: {
                     x1: p1[0],
                     y1: p1[1],

src/util/graphic.ts

@@ -280,6 +280,14 @@ export function subPixelOptimizeLine(param: {
     return param;
 }
 
+export function setGroupSubPixelOptimize(group: Group, useSubPixelOptimize: boolean) {
+    group.traverse((el: Element) => {
+        if (el.type === 'line') {
+            (el as Line).attr('subPixelOptimize', useSubPixelOptimize);
+        }
+    });
+}
+
 /**
  * Sub pixel optimize rect for canvas
  */
@@ -391,7 +399,8 @@ function isPath(el: Displayable): el is Path {
 export function groupTransition(
     g1: Group,
     g2: Group,
-    animatableModel: Model<AnimationOptionMixin>
+    animatableModel: Model<AnimationOptionMixin>,
+    done?: () => void
 ) {
     if (!g1 || !g2) {
         return;
@@ -419,13 +428,15 @@ export function groupTransition(
     }
     const elMap1 = getElMap(g1);
 
+    let isFirstElement = true;
     g2.traverse(function (el) {
         if (isNotGroup(el) && el.anid) {
             const oldEl = elMap1[el.anid];
             if (oldEl) {
                 const newProp = getAnimatableProps(el);
                 el.attr(getAnimatableProps(oldEl));
-                updateProps(el, newProp, animatableModel, getECData(el).dataIndex);
+                updateProps(el, newProp, animatableModel, getECData(el).dataIndex, isFirstElement ? done : null);
+                isFirstElement = false;
             }
         }
     });