在react-konva中使用tween动画填充渐变矩形

首先，我们需要使用Konva.Rect渲染矩形。然后，我们需要使用Konva.Tween动画来改变矩形的填充渐变。我们可以使用Konva的api设置线性渐变的停靠点，以及颜色。最后在Tween动画的onUpdate函数中更新这些停靠点，使得填充颜色渐变。以下是代码示例：

import React, { useState, useEffect, useRef } from 'react';
import { render } from 'react-dom';
import { Stage, Layer, Rect } from 'react-konva';
import Konva from 'konva';

const App = () => {
  const [rect, setRect] = useState(null);
  const [tween, setTween] = useState(null);

  useEffect(() => {
    const rectNode = rect?.node();
    const gradient = new Konva.LinearGradient({
      x: 0,
      y: 0,
      points: [0, 0, 100, 0],
      stops: [0, 'red', 1, 'yellow'],
    });

    rectNode.fillLinearGradient(gradient);
    const newTween = new Konva.Tween({
      nodes: rectNode,
      duration: 2,
      points: [0, 0, 200, 0],
      onUpdate: () => {
        gradient.stops([0, 'red', tween.progress(), 'yellow', 1]);
        rectNode.fillLinearGradient(gradient);
      },
    });

    setTween(newTween);
  }, [rect]);

  const handleClick = () => {
    tween?.play();
  };

  return (
    
      
         setRect(node)}
          onClick={handleClick}
        />
      
    
  );
};

render(, document.getElementById('root'));

在上面的示例代码中，我们首先创建了一个LinearGradient对象，它表示渲染矩形的渐变颜色。然后我们使用fillLinearGradient函数将这个渐变应用到矩形中。在点击矩形时，我们开始一个Tween动画，并在onUpdate函数中更新渐变的停靠点来实现颜色渐变的效果。