动画期间的标签跳汰

Question

大家好
这是我遇到的一个小问题：标签在动画过程中抖动，如codepen所示。

let board = JXG.JSXGraph.initBoard('jxgbox', {axis: false,});
let dummy = {t:0};
for(let i = 0; i < 4; i++){
  board.create('point', [()=> -4 + dummy.t, ()=> 4 -dummy.t - i], {
    showInfobox:false,
    label: {
      anchorX: 'left', 
      anchorY: 'top',
      fontSize: 30,
    },
  });
}
gsap.to(dummy, {
  ease: 'power2.inOut',
  duration:10,
  t:3,
  onUpdate: ()=> board.update()
})

https://codepen.io/ywlee/pen/yLbgxpV

我能想到的唯一办法就是缩短动画时间

有人知道怎么解决吗？感谢您阅读我的问题:)

Answer 1

我的印象是，如果将 SVG 文本用于点标签（即内部文本），抖动会稍微减少：

board.create('point', [()=> -4 + dummy.t, ()=> 4 -dummy.t - i], {
    showInfobox:false,
    label: {
        display: 'internal', // <-- SVG texts instead of HTML texts
        anchorX: 'left', 
        anchorY: 'top',
        fontSize: 30,
    }
});

动画期间的标签跳汰

Label jigging during animation

jsxgraph