HTML5 Canvas Konva Stop Animation Tutorial

Get last news, demos, posts from Konva

To stop an animation with Konva, we can use the stop() method.
To restart the animation, we can again call the start().

Instructions: Click on “Start” to start the animation and “Stop” to stop the animation.

For a full list of attributes and methods, check out the Konva.Animation documentation.

Konva Stop Animation Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Stop Animation 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: block;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<input type="button" id="start" value="Start" />
<input type="button" id="stop" value="Stop" />
</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 hexagon = new Konva.RegularPolygon({
x: stage.width() / 2,
y: stage.height() / 2,
sides: 6,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});

layer.add(hexagon);
stage.add(layer);

var amplitude = 150;
// in ms
var period = 2000;
var centerX = stage.width() / 2;

var anim = new Konva.Animation(function(frame) {
hexagon.x(
amplitude * Math.sin((frame.time * 2 * Math.PI) / period) + centerX
);
}, layer);

document.getElementById('start').addEventListener(
'click',
function() {
anim.start();
},
false
);

document.getElementById('stop').addEventListener(
'click',
function() {
anim.stop();
},
false
);
</script>
</body>
</html>