动画制作圆圈

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的代码行。