HTML5 Canvas All Tween Controls Tutorial

To play, pause, reverse, reset, finish, and seek tweens with Konva,
we can use the play(), pause(), reverse(), reset(), finish(), and seek() methods.
This tutorial demonstrates each control.

All Tween Controlsview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva All Controls Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#buttons {
position: absolute;
top: 5px;
left: 10px;
}
#buttons > input {
padding: 10px;
display: inline-block;
margin-right: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<input type="button" id="play" value="Play" />
<input type="button" id="pause" value="Pause" />
<input type="button" id="reverse" value="Reverse" />
<input type="button" id="reset" value="Reset" />
<input type="button" id="seek" value="Seek 3" />
<input type="button" id="finish" value="Finish" />
</div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;

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

var layer = new Konva.Layer();

var rect = new Konva.Rect({
x: 50,
y: 130,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 2,
opacity: 0.2,
});

layer.add(rect);
stage.add(layer);

// the tween has to be created after the node has been added to the layer
var tween = new Konva.Tween({
node: rect,
duration: 6,
x: 220,
y: 75,
rotation: Math.PI * 10,
opacity: 1,
strokeWidth: 6,
scaleX: 1.3,
scaleY: 1.3,
easing: Konva.Easings.Linear,
fillR: 0,
fillG: 0,
fillB: 255,
});

// pause tween
document.getElementById('pause').addEventListener(
'click',
function () {
tween.pause();
},
false
);

// reverse tween
document.getElementById('reverse').addEventListener(
'click',
function () {
tween.reverse();
},
false
);

// play tween forward
document.getElementById('play').addEventListener(
'click',
function () {
tween.play();
},
false
);

// reset tween
document.getElementById('reset').addEventListener(
'click',
function () {
tween.reset();
},
false
);

// force tween to finish
document.getElementById('finish').addEventListener(
'click',
function () {
tween.finish();
},
false
);

// seek to 3 seconds
document.getElementById('seek').addEventListener(
'click',
function () {
tween.seek(3);
},
false
);
</script>
</body>
</html>
Enjoying Konva? Please consider to support the project.