Konva

by jywglady

HTML

<script src="https://unpkg.com/konva@3.4.1/konva.min.js"></script>
<div id="container"></div>

JavaScript

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

var circle = new Konva.Circle({
  x:30, y:50, radius:10, fill:'red'
});

layer.add(circle);
stage.add(layer);

var speed = 0.2; // pixels per ms
var anim = new Konva.Animation(function(frame)
{
  circle.move({x: frame.timeDiff*speed, y:0});
  if (circle.x()>470) { speed = -0.2; }
  if (circle.x()<30) { speed = 0.2; }
}, layer);

anim.start()