So drehen Sie ein Rechteck in HTML-Canvas mit Anime.js

Ich habe ein Rechteck auf HTML canvas erstellt. Ich möchte eine Animation mit 45 Grad Drehung auf diesem Rechteck mit Anime.js haben. Ich habe die Anzahl der Posts bei der Drehung des Rechtecks gesehen, kann aber nicht herausfinden, wie man es mit Anime.js dreht. Im Anschluss ist mein <body> tag:So drehen Sie ein Rechteck in HTML-Canvas mit Anime.js

<body class="container"> 

<canvas></canvas> 

<script src="anime.min.js" type="text/javascript"></script> 
<script> 

    document.addEventListener('DOMContentLoaded', function() { 

     var canvas = document.querySelector('canvas'); 
     canvas.width = 1280; 
     canvas.height = 720; 

     var c = canvas.getContext('2d'); 

     //Create box 
     function Box(size) { 
      var box = {}; 
      box.size = size; 
      box.x = 640 - (box.size/2); 
      box.y = 250 - (box.size/2); 
      box.translateX = 0; 
      box.translateY = 0; 
      box.degree = 0; 
      box.color = "#ffffff"; 
      box.draw = function() { 
       c.save(); 
       c.fillStyle = box.color; 
       c.translate(box.translateX, box.translateY); 
       c.rotate(box.degree * Math.PI/180); 
       c.fillRect(box.x, box.y, box.size, box.size); 
       c.restore(); 
      }; 
      return box; 
     } 
     var box = new Box(300); 
     box.draw(); 

     anime.timeline().add({ 
      targets: box, 
      x: -100, 
      y: -125, 
      translateX: 640, 
      translateY: 250, 
      degree: 45, 
      duration: 1000 
     }) 
    }); 


</script> 
</body>

Kann jemand bitte helfen?

Quelle

2017-07-11 Vaibhav Agarwal

Sie vermischen zwei verschiedene Themen. Anime.js ist gut, um dom-Elemente zu animieren. In diesem Fall können Sie nur die gesamte Leinwand animieren. Es ist nicht möglich, das Rechteck im Inneren zu animieren. Dies liegt daran, dass animate.js DOM-Selektoren und CSS-Technik verwendet. So komplette Leinwand animieren Sie können id

canvas id="myCanvas"></canvas>

in Java-Script-Code ändern zuweisen nur

 anime.timeline().add({ 
      targets: '#myCanvas',

Andere Art und Weise gedreht Rechteck auf Leinwand mit dem eigenen zu malen ist Ziel.

Quelle

2017-07-11 06:34:35 hsd

Ich verstehe. Ich denke, Anime.js verwendet auch JavaScript-Objekte zum Animieren. Und ich versuche, diese Funktion zu verwenden, um die Box in der Leinwand zu animieren. Ist es nicht möglich? Siehe diesen Link https://codepen.io/juliangarnier/pen/xOgyjB –

In diesem Beispiel ist eine Kombination von HTML und SVG. So können Sie von Canvas zu SVG-Lösung wechseln. – hsd

So drehen Sie ein Rechteck in HTML-Canvas mit Anime.js

Antwort

Verwandte Themen