怎么让svg画出的猫咪尾巴自然摆动

Question

如上图，我用js控制时间调用函数来改变path的贝塞尔参数实现了尾巴的自然摆动，但是毫秒数设太小会让浏览器变卡，设太大又会效果不佳，所以相求一个最好的解决方案。

 <!-- 尾巴的svg path -->
 <path id="path" class="path" d="M80 200 C95 250, 100 120, 162 160" stroke="#FFA54F" stroke-width="5" fill="none"></path>

下面是控制尾巴摆动的js

 var x1, y1, x2, y2, x, y, mark_x;
    x1 = 95;
    y1 = 250;
    x2 = 100;
    y2 = 120;
    x = 162;
    y = 190;

    //通过时间控制路径改变
    var time_control = self.setInterval("control_tail()", 50);

    function revert_control() {
        /**
         * 从低到高
         */
        if (y > 190){
            y--;x2--;y2--;x1--;y1--;
        }else
            time_control = self.setInterval("control_tail()", 50);

        $("#path").attr("d", "M80 200 C" + x1 + " " + y1 + ", " + x2 + " " + y2 + ", " + x + " " + y);
    }
    function control_tail() {
        /**
         * 从高到低
         */
        if (y < 250){
            y++;x2++;y2++;x1++;y1++;
        }else
            time_control = self.setInterval("revert_control()", 50);

        $("#path").attr("d", "M80 200 C" + x1 + " " + y1 + ", " + x2 + " " + y2 + ", " + x + " " + y);
    }

Answer 1

顶