javascript - 动画外半径和内半径

Question

我创建了一些悬停和单击更改，以增加和减少圆环图上的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];
    },
  }
};

密码笔

Answer 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