All Tween Controls Tutorial

To control tweens with Konva, we can use the following methods:

• play() - Start or resume the tween
• pause() - Pause the tween
• reverse() - Reverse the tween direction
• reset() - Reset to initial state
• finish() - Jump to final state
• seek() - Jump to specific position

Instructions: Use the buttons to control the tween animation of the circle.

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, }); // create buttons  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); }); // seek control  const seekBtn = document.createElement('button'); seekBtn.textContent = 'Seek to 50%'; seekBtn.addEventListener('click', () => { tween.seek(1); // seek to 1 second  }); 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