简单缓动函数教程

如需使用 Konva 创建非线性缓动补间，可以将 easing 属性设置为缓动函数。除 Konva.Easings.Linear 外，其他最常用的缓动函数包括：

• Konva.Easings.EaseIn
• Konva.Easings.EaseInOut
• Konva.Easings.EaseOut

如需查看所有可用的缓动函数，请参阅缓动函数文档。

操作说明：将鼠标移到方框上或触摸方框，以使用不同的缓动函数执行补间。

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 easings = ['Linear', 'EaseIn', 'EaseOut', 'EaseInOut'];
const boxes = [];

easings.forEach((easing, i) => {
const box = new Konva.Rect({
x: 50,
y: 50 + i * 80,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
});
layer.add(box);
boxes.push(box);

const text = new Konva.Text({
x: 160,
y: 65 + i * 80,
text: easing,
fontSize: 16,
fontFamily: 'Calibri',
fill: 'black',
});
layer.add(text);

box.on('mouseenter touchstart', () => {
const tween = new Konva.Tween({
node: box,
duration: 1,
x: width - 150,
easing: Konva.Easings[easing],
}).play();
});

box.on('mouseleave touchend', () => {
const tween = new Konva.Tween({
node: box,
duration: 1,
x: 50,
easing: Konva.Easings[easing],
}).play();
});
});

stage.add(layer);

React

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

const Box = ({ easing, y }) => {
  const boxRef = useRef();

  const handleMouseEnter = () => {
    boxRef.current.to({
      duration: 1,
      x: window.innerWidth - 150,
      easing: Konva.Easings[easing],
    });
  };

  const handleMouseLeave = () => {
    boxRef.current.to({
      duration: 1,
      x: 50,
      easing: Konva.Easings[easing],
    });
  };

  return (
    <>
      <Rect
        ref={boxRef}
        x={50}
        y={y}
        width={100}
        height={50}
        fill="#00D2FF"
        stroke="black"
        strokeWidth={4}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        onTouchStart={handleMouseEnter}
        onTouchEnd={handleMouseLeave}
      />
      <Text
        x={160}
        y={y + 15}
        text={easing}
        fontSize={16}
        fontFamily="Calibri"
        fill="black"
      />
    </>
  );
};

const App = () => {
  const easings = ['Linear', 'EaseIn', 'EaseOut', 'EaseInOut'];

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {easings.map((easing, i) => (
          <Box key={i} easing={easing} y={50 + i * 80} />
        ))}
      </Layer>
    </Stage>
  );
};

export default App;

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <template v-for="(easing, i) in easings" :key="i">
        <v-rect
          :config="getRectConfig(i)"
          @mouseenter="handleMouseEnter($event, easing)"
          @mouseleave="handleMouseLeave($event, easing)"
          @touchstart="handleMouseEnter($event, easing)"
          @touchend="handleMouseLeave($event, easing)"
          ref="rectRefs"
        />
        <v-text :config="getTextConfig(easing, i)" />
      </template>
    </v-layer>
  </v-stage>
</template>

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

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

const easings = ['Linear', 'EaseIn', 'EaseOut', 'EaseInOut'];
const rectRefs = ref([]);

const getRectConfig = (i) => ({
  x: 50,
  y: 50 + i * 80,
  width: 100,
  height: 50,
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4
});

const getTextConfig = (easing, i) => ({
  x: 160,
  y: 65 + i * 80,
  text: easing,
  fontSize: 16,
  fontFamily: 'Calibri',
  fill: 'black'
});

const handleMouseEnter = (e, easing) => {
  new Konva.Tween({
    node: e.target,
    duration: 1,
    x: window.innerWidth - 150,
    easing: Konva.Easings[easing]
  }).play();
};

const handleMouseLeave = (e, easing) => {
  new Konva.Tween({
    node: e.target,
    duration: 1,
    x: 50,
    easing: Konva.Easings[easing]
  }).play();
};
</script>