动画外半径和内半径答案

【问题标题】：Animating outerRadius and innerRadius动画外半径和内半径
【发布时间】：2021-09-28 06:19:50
【问题描述】：

我创建了一些悬停和单击更改，以增加和减少圆环图上的 outerRadius 和 innerRadius 属性。但我希望运动更顺畅。

const config = {
  type: 'doughnut',
  data: data,
  options: {
    animation: {
      duration: 2000
    },
    interactions: {
      intersect: false,
      mode: 'index',
    },
    onHover: (evt, item) => {
      if (item && item.length) {
        if (clicked && clicked.index == item[0].index) {
          return;
        }
        
        if(!hover) {
          hover = item[0];
          hover.element.outerRadius += 18;
          return;
        }
        
        if (hover.index !== item[0].index) {
          hover.element.outerRadius -= 18;
          item[0].element.outerRadius += 18;
          hover = item[0];
        }
      } else {
        if (hover) {
          hover.element.outerRadius -= 18;
        }
        
        hover = null;
      }
    },
    onClick: (evt, item) => {
      hover.element.outerRadius -= 18;
      hover = null;
      
      if(clicked) {
        clicked.element.innerRadius += 40;
      }
      
      item[0].element.innerRadius -= 40;
      clicked = item[0];
    },
  }
};

Codepen

【问题讨论】：

该链接指向文档，而不是 codepen
@CharlesBamford 已修复！
您能否在您的问题中详细说明“运动更顺畅”？比如当前的问题是什么，您希望它是什么？
@LakshyaThakur 当鼠标悬停在图表的一部分并且外半径大小发生变化时，没有过渡/缓动。

标签： javascript chart.js chart.js3

【解决方案1】：

您可以通过使用超时来更改半径部分的值来绕过它

if (!hover) {
    hover = item[0];
    for (let i = 0; i < 18; i++) {
        setTimeout(() => {
            hover.element.outerRadius++;
        }, timeoutMS * i)
    }
    return;
}

具有段增长动画的 Codepen：https://codepen.io/leelenaleee/pen/bGWrMQx?editors=0110

【讨论】：