Question

我在HTML canvas上创建了一个矩形。我希望使用Anime.js在这个矩形上进行45度旋转动画。我已经看到了矩形旋转的帖子数量，但无法弄清楚如何使用Anime.js旋转它。以下是我的<body>标记：

<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>

有人可以帮忙吗？

Answer 1

你混淆了两个不同的主题。 Anime.js很适合动画dom元素。因此，在您的情况下，您只能为完整画布设置动画。无法在里面制作矩形动画。这是因为animate.js正在使用DOM选择器和CSS技术。因此，要为完整画布设置动画，您可以指定id

Option Explicit

Sub Workbook_Open()

    If Dir(ActiveWorkbook.Path & "\" & "Backup", vbDirectory) = "" Then
        MkDir (ActiveWorkbook.Path & "\" & "Backup")
    End If

    Dim Pfad As String
    Dim Datumzeitstempel As String
    Dim Jetzt As Date
    Jetzt = Now()
    Pfad = ActiveWorkbook.Path & "\" & "Backup"
    Datumzeitstempel = Year(Date) & Format(Month(Date), "00") & Format(Day(Date), "00")
    ActiveWorkbook.SaveCopyAs (Pfad & "\" & Datumzeitstempel & ".xlsm")
    ReadOnlyRecommended = True

End Sub

在java脚本代码中只更改目标

canvas id="myCanvas"></canvas>

其他方法是在画布上用自己绘制旋转的矩形。

如何使用Anime.js在HTML画布中旋转矩形

1 个答案: