如何使用 React 和 Konva 实现画布动画？

Konva 本身提供两种动画方式： Tween 和 Animation。你可以手动将它们应用到节点上。

对于简单的使用场景，建议使用 node.to() 方法。对于更复杂的动画，可以参考 复杂的 react-konva 动画示例。

该示例使用 refs API 直接访问形状实例。

操作指南：尝试拖拽矩形以查看动画效果。

import React, { Component } from 'react';
import { Stage, Layer, Rect } from 'react-konva';

class MyRect extends React.Component {
  changeSize = () => {
    // to() 是 `Konva.Node` 实例的方法
    this.rect.to({
      scaleX: Math.random() + 0.8,
      scaleY: Math.random() + 0.8,
      duration: 0.2,
    });
  };

  render() {
    return (
      <Rect
        ref={(node) => {
          this.rect = node;
        }}
        width={50}
        height={50}
        fill="green"
        draggable
        onDragEnd={this.changeSize}
        onDragStart={this.changeSize}
      />
    );
  }
}

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <MyRect />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox