动画制作圆圈

Question

我需要创建一个动画，它将在另一个按钮周围画一个整圈。 我可以使用经典动画来实现吗？ 在一个xml文件中提供许多转换的示例，每个转换都有特定的偏移量？或者我需要为此创建一个特定的路径？我是Java的新手，所以我不知道如何开始。 请检查下面的图像：

Answer 1

您需要了解一些三角函数。

  /**
     * @static
     * Allows move in circles around given item
     * @param r {float|int} radius in px
     * @param angle {float|int} current angle between circle center and orbiting element
     * @param orbit {object} orbiting el eg. $("#foo")
     * @param speed {int} animation's speed
     * @param [middle=$('#menubutton')] {object} middle of the circle
     */
    static fMenu(r, angle, orbit, speed, middle = Menu.BUTTON) {
        const BY = middle.position().top;
        const BX = middle.offset().left;
        const k = middle.width();
        const KY = middle.height();
        if (angle === 0) {
            angle = 360;
        }
        const x = Math.cos(angle * Math.PI / 180) * r;
        const y = Math.tan(Math.PI * angle / 180) * x;
        $(orbit).animate({
            top: (BY - y - KY / 2) + "px",
            left: (BX + x + k / 2 - orbit.width() / 2) + "px",
            opacity: "1"
        }, speed);
    }

您应该以循环或setTimeout / setInterval的方式进行操作。我前段时间为jQuery 编写了此代码，但是您知道了吗？ -最重要的是带有Math.cos和Math.tan的行。