0
HTML canvasに四角形を作成しました。 Anime.jsを使ってこの矩形に45度の回転アニメーションを作りたいと思っています。私は矩形回転の記事の数を見てきましたが、Anime.jsを使って回転させる方法を理解することはできません。以下は私の<body>タグです：Anime.jsを使用してHTMLキャンバスで矩形を回転させる方法
<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>
誰でも助けてください。
ご理解いただけます。私はAnime.jsもjavascriptオブジェクトを使ってアニメーション化すると思います。私はキャンバス内のボックスをアニメーション化するためにその機能を使用しようとしています。それは可能ではありませんか？このリンクを参照してください。https://codepen.io/juliangarnier/pen/xOgyjB –
この例では、HTMLとSVGの組み合わせです。 CanvasからSVGソリューションに切り替えることができます。 – hsd