HTML5 Canvas Konva 动画教程

要使用 Konva 创建自定义动画，我们可以使用 Konva.Animation 构造函数，该构造函数接受两个参数：必需的更新函数和一个可选的层或层数组，这些层将在每帧动画中被更新。动画函数会传递一个 frame 对象，其中包含一个 time 属性，这是动画运行的毫秒数，一个 timeDiff 属性，这是自上一个帧经过的毫秒数，以及一个 frameRate 属性，这是当前的帧率（每秒帧数）。

更新函数绝不能重绘舞台或层，因为动画引擎会智能地为我们处理这一点。更新函数应仅包含更新节点属性的逻辑，例如 position、rotation、scale、width、height、radius、colors 等。一旦动画被创建，我们可以随时通过 start() 方法启动它。

有关属性和方法的完整列表，请查看 Konva.Animation 文档。

Vanilla

import Konva from 'konva';

const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});

const layer = new Konva.Layer();
stage.add(layer);

const rect = new Konva.Rect({
x: 50,
y: 50,
width: 50,
height: 50,
fill: 'green',
});
layer.add(rect);

const anim = new Konva.Animation(function(frame) {
const time = frame.time;
const timeDiff = frame.timeDiff;
const frameRate = frame.frameRate;

// 示例：使矩形沿圆形移动

const radius = 50;
const x = radius * Math.cos(frame.time * 2 * Math.PI / 2000) + 100;
const y = radius * Math.sin(frame.time * 2 * Math.PI / 2000) + 100;
rect.position({ x, y });
}, layer);

anim.start();

Open Sandbox

React

import { Stage, Layer, Rect } from 'react-konva';
import { useEffect, useRef } from 'react';

const App = () => {
  const rectRef = useRef(null);

  useEffect(() => {
    const anim = new Konva.Animation((frame) => {
      const time = frame.time;
      const timeDiff = frame.timeDiff;
      const frameRate = frame.frameRate;

      // 示例：使矩形沿圆形移动

      const radius = 50;
      const x = radius * Math.cos(frame.time * 2 * Math.PI / 2000) + 100;
      const y = radius * Math.sin(frame.time * 2 * Math.PI / 2000) + 100;
      rectRef.current.position({ x, y });
    }, rectRef.current.getLayer());

    anim.start();

    return () => {
      anim.stop();
    };
  }, []);

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Rect
          ref={rectRef}
          x={50}
          y={50}
          width={50}
          height={50}
          fill="green"
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer ref="layerRef">
      <v-rect
        ref="rectRef"
        :config="rectConfig"
      />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import Konva from 'konva';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const rectConfig = ref({
  x: 50,
  y: 50,
  width: 50,
  height: 50,
  fill: 'green'
});

const layerRef = ref(null);
const rectRef = ref(null);
let anim = null;

onMounted(() => {
  anim = new Konva.Animation((frame) => {
    const time = frame.time;
    const timeDiff = frame.timeDiff;
    const frameRate = frame.frameRate;
    
    // 示例：使矩形沿圆形移动

    const radius = 50;
    const x = radius * Math.cos(frame.time * 2 * Math.PI / 2000) + 100;
    const y = radius * Math.sin(frame.time * 2 * Math.PI / 2000) + 100;
    rectRef.value.getNode().position({ x, y });
  }, layerRef.value.getNode());

  anim.start();
});

onUnmounted(() => {
  if (anim) {
    anim.stop();
  }
});
</script>

Open Sandbox