所有补间控制教程

要使用 Konva 控制补间动画，我们可以使用以下方法：

• play() - 开始或恢复补间动画
• pause() - 暂停补间动画
• reverse() - 反转补间动画方向
• reset() - 重置为初始状态
• finish() - 跳转到最终状态
• seek() - 跳转到特定位置

说明：使用按钮来控制圆形的补间动画。

Vanilla

import Konva from 'konva';

const width = window.innerWidth;
const height = window.innerHeight;

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

const layer = new Konva.Layer();

const circle = new Konva.Circle({
x: 100,
y: height / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
});

layer.add(circle);
stage.add(layer);

const tween = new Konva.Tween({
node: circle,
duration: 2,
x: width - 100,
easing: Konva.Easings.EaseInOut,
});

// 创建按钮
const controls = ['play', 'pause', 'reverse', 'reset', 'finish'];
controls.forEach(control => {
const button = document.createElement('button');
button.textContent = control;
button.addEventListener('click', () => {
tween[control]();
});
document.body.appendChild(button);
});

// 跳转控制
const seekBtn = document.createElement('button');
seekBtn.textContent = 'Seek to 50%';
seekBtn.addEventListener('click', () => {
tween.seek(1); // 跳转到 1 秒
});
document.body.appendChild(seekBtn);

Open Sandbox

React

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

const App = () => {
  const circleRef = useRef();
  const tweenRef = useRef();

  useEffect(() => {
    if (!circleRef.current) return;

    tweenRef.current = new Konva.Tween({
      node: circleRef.current,
      duration: 2,
      x: window.innerWidth - 100,
      easing: Konva.Easings.EaseInOut,
    });
  }, []);

  const controls = ['play', 'pause', 'reverse', 'reset', 'finish'];

  return (
    <>
      {controls.map(control => (
        <button
          key={control}
          onClick={() => tweenRef.current[control]()}
        >
          {control}
        </button>
      ))}
      <button onClick={() => tweenRef.current.seek(1)}>
        Seek to 50%
      </button>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Circle
            ref={circleRef}
            x={100}
            y={window.innerHeight / 2}
            radius={70}
            fill="red"
            stroke="black"
            strokeWidth={4}
          />
        </Layer>
      </Stage>
    </>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <div>
    <button
      v-for="control in controls"
      :key="control"
      @click="handleControl(control)"
    >
      {{ control }}
    </button>
    <button @click="handleSeek">Seek to 50%</button>
    <v-stage :config="stageSize">
      <v-layer>
        <v-circle
          :config="circleConfig"
          ref="circleRef"
        />
      </v-layer>
    </v-stage>
  </div>
</template>

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

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

const circleConfig = {
  x: 100,
  y: window.innerHeight / 2,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
};

const controls = ['play', 'pause', 'reverse', 'reset', 'finish'];
const circleRef = ref(null);
let tween = null;

onMounted(() => {
  tween = new Konva.Tween({
    node: circleRef.value.getNode(),
    duration: 2,
    x: window.innerWidth - 100,
    easing: Konva.Easings.EaseInOut,
  });
});

const handleControl = (control) => {
  tween[control]();
};

const handleSeek = () => {
  tween.seek(1);
};
</script>

Open Sandbox