所有 Tween 控制教程

要使用 Konva 控制 Tweens，我们可以采用以下方法：

• 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 = '跳转到 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)}>
        跳转到 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">跳转到 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