HTML5 Canvas Konva 缩放动画教程

要使用 Konva 实现形状的缩放动画，我们可以使用 Konva.Animation 创建一个新动画，并定义一个函数，在每一动画帧中修改形状的缩放。

在本教程中，我们将围绕位于形状右侧的轴，缩放蓝色六边形的 x 和 y 分量、黄色六边形的 y 分量，以及红色六边形的 x 分量。

说明： 在六边形动画播放时拖放它们

如需属性和方法的完整列表，请查看 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);

// 蓝色六边形 - 缩放 x 和 y
const blueHex = new Konva.RegularPolygon({
x: 50,
y: 50,
sides: 6,
radius: 20,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});

// 黄色六边形 - 仅缩放 y
const yellowHex = new Konva.RegularPolygon({
x: 150,
y: 50,
sides: 6,
radius: 20,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
draggable: true
});

// 红色六边形 - 仅缩放 x
const redHex = new Konva.RegularPolygon({
x: 250,
y: 50,
sides: 6,
radius: 20,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});

layer.add(blueHex);
layer.add(yellowHex);
layer.add(redHex);

const period = 2000;

const anim = new Konva.Animation(function(frame) {
const scale = Math.sin(frame.time * 2 * Math.PI / period) + 2;

// 蓝色六边形 - 缩放 x 和 y
blueHex.scale({ x: scale, y: scale });

// 黄色六边形 - 仅缩放 y
yellowHex.scaleY(scale);

// 红色六边形 - 仅缩放 x
redHex.scaleX(scale);
}, layer);

anim.start();

Open Sandbox

React

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

const App = () => {
  const blueHexRef = useRef(null);
  const yellowHexRef = useRef(null);
  const redHexRef = useRef(null);

  const [positions, setPositions] = useState({
    blue: { x: 50, y: 50 },
    yellow: { x: 150, y: 50 },
    red: { x: 250, y: 50 }
  });

  useEffect(() => {
    const period = 2000;
    const anim = new Konva.Animation((frame) => {
      const scale = Math.sin(frame.time * 2 * Math.PI / period) + 2;

      // 蓝色六边形 - 缩放 x 和 y
      blueHexRef.current.scale({ x: scale, y: scale });

      // 黄色六边形 - 仅缩放 y
      yellowHexRef.current.scaleY(scale);

      // 红色六边形 - 仅缩放 x
      redHexRef.current.scaleX(scale);
    }, blueHexRef.current.getLayer());

    anim.start();

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

  const handleDragEnd = (e, color) => {
    setPositions(prev => ({
      ...prev,
      [color]: { x: e.target.x(), y: e.target.y() }
    }));
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <RegularPolygon
          ref={blueHexRef}
          x={positions.blue.x}
          y={positions.blue.y}
          sides={6}
          radius={20}
          fill="#00D2FF"
          stroke="black"
          strokeWidth={4}
          draggable
          onDragEnd={(e) => handleDragEnd(e, 'blue')}
        />
        <RegularPolygon
          ref={yellowHexRef}
          x={positions.yellow.x}
          y={positions.yellow.y}
          sides={6}
          radius={20}
          fill="yellow"
          stroke="black"
          strokeWidth={4}
          draggable
          onDragEnd={(e) => handleDragEnd(e, 'yellow')}
        />
        <RegularPolygon
          ref={redHexRef}
          x={positions.red.x}
          y={positions.red.y}
          sides={6}
          radius={20}
          fill="red"
          stroke="black"
          strokeWidth={4}
          draggable
          onDragEnd={(e) => handleDragEnd(e, 'red')}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer ref="layerRef">
      <v-regular-polygon
        ref="blueHexRef"
        :config="blueHexConfig"
        @dragend="handleDragEnd('blue', $event)"
      />
      <v-regular-polygon
        ref="yellowHexRef"
        :config="yellowHexConfig"
        @dragend="handleDragEnd('yellow', $event)"
      />
      <v-regular-polygon
        ref="redHexRef"
        :config="redHexConfig"
        @dragend="handleDragEnd('red', $event)"
      />
    </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 positions = ref({
  blue: { x: 50, y: 50 },
  yellow: { x: 150, y: 50 },
  red: { x: 250, y: 50 }
});

const blueHexConfig = ref({
  x: positions.value.blue.x,
  y: positions.value.blue.y,
  sides: 6,
  radius: 20,
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

const yellowHexConfig = ref({
  x: positions.value.yellow.x,
  y: positions.value.yellow.y,
  sides: 6,
  radius: 20,
  fill: 'yellow',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

const redHexConfig = ref({
  x: positions.value.red.x,
  y: positions.value.red.y,
  sides: 6,
  radius: 20,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

const layerRef = ref(null);
const blueHexRef = ref(null);
const yellowHexRef = ref(null);
const redHexRef = ref(null);
let anim = null;

const handleDragEnd = (color, e) => {
  const newPos = e.target.position();
  positions.value[color] = { x: newPos.x, y: newPos.y };
  if (color === 'blue') blueHexConfig.value.x = newPos.x;
  if (color === 'blue') blueHexConfig.value.y = newPos.y;
  if (color === 'yellow') yellowHexConfig.value.x = newPos.x;
  if (color === 'yellow') yellowHexConfig.value.y = newPos.y;
  if (color === 'red') redHexConfig.value.x = newPos.x;
  if (color === 'red') redHexConfig.value.y = newPos.y;
};

onMounted(() => {
  const period = 2000;
  anim = new Konva.Animation((frame) => {
    const scale = Math.sin(frame.time * 2 * Math.PI / period) + 2;
    
    // 蓝色六边形 - 缩放 x 和 y
    blueHexRef.value.getNode().scale({ x: scale, y: scale });
    
    // 黄色六边形 - 仅缩放 y
    yellowHexRef.value.getNode().scaleY(scale);
    
    // 红色六边形 - 仅缩放 x
    redHexRef.value.getNode().scaleX(scale);
  }, layerRef.value.getNode());

  anim.start();
});

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

Open Sandbox