Star Spinner

Instructions: Spin the star with your mouse.
Konva Star Spinnerview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Star Spinner Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      Konva.angleDeg = false;
      function animate(animatedLayer, star, frame) {
        // 20% slow down per second
        var angularFriction = 0.2;
        var angularVelocityChange =
          (star.angularVelocity * frame.timeDiff * (1 - angularFriction)) /
          1000;
        star.angularVelocity -= angularVelocityChange;

        if (star.controlled) {
          star.angularVelocity =
            ((star.rotation() - star.lastRotation) * 1000) / frame.timeDiff;
        } else {
          star.rotate((frame.timeDiff * star.angularVelocity) / 1000);
        }

        star.lastRotation = star.rotation();
      }

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

      var animatedLayer = new Konva.Layer();

      var star = new Konva.Star({
        x: stage.width() / 2,
        y: stage.height() / 2,
        outerRadius: 80,
        innerRadius: 40,
        stroke: '#005500',
        fill: '#b5ff88',
        strokeWidth: 4,
        numPoints: 5,
        lineJoin: 'round',
        shadowOffsetX: 5,
        shadowOffsetY: 5,
        shadowBlur: 10,
        shadowColor: 'black',
        shadowOpacity: 0.5,
        opacity: 0.8,
      });

      // custom properties
      star.lastRotation = 0;
      star.angularVelocity = 6;
      star.controlled = false;

      star.on('mousedown touchstart', function (evt) {
        this.angularVelocity = 0;
        this.controlled = true;
      });

      animatedLayer.add(star);

      var center = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 3,
        fill: '#555',
      });

      animatedLayer.add(center);

      // add listeners to container
      stage.on('mouseup touchend', function () {
        star.controlled = false;
      });

      stage.on('mousemove touchmove', function () {
        if (star.controlled) {
          var mousePos = stage.getPointerPosition();
          var x = star.x() - mousePos.x;
          var y = star.y() - mousePos.y;
          star.rotation(0.5 * Math.PI + Math.atan(y / x));

          if (mousePos.x <= stage.width() / 2) {
            star.rotate(Math.PI);
          }
        }
      });

      stage.add(animatedLayer);

      var anim = new Konva.Animation(function (frame) {
        animate(animatedLayer, star, frame);
      }, animatedLayer);

      // wait one second and then spin the star
      setTimeout(function () {
        anim.start();
      });
    </script>
  </body>
</html>
Enjoying Konva? Please consider to support the project.