2

我正在尝试根据用户使用 jQuery.path 进行的多次点击来为特定的 HTML 元素设置动画。我遇到的问题是我不确定选择与所选元素相关的参数的最佳方法。

这是我当前的代码：

    var segment1Params = {
       start: {
          x: 414,
          y: 121,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      }

    var segment2Params = {
       start: {
          x: 494,
          y: 104,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      }

    var segment3Params = {
       start: {
          x: 420,
          y: 306,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      }

    var segment4Params = {
       start: {
          x: 514,
          y: 389,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      } 

    var segmentSelected = 1;

    $('body').click(function () {
        segmentSelected += 1; //the amount of user clicks
        $("#segment-"+segmentSelected).animate({path : new $.path.bezier(segment1Params)})
        if (segmentSelected == 5) {
            segmentSelected = 1; //reset the amount of user clicks (looping)
        }
    });

理想情况下，我想要这条线......

$("#segment-"+segmentSelected).animate({path : new $.path.bezier(segment1Params)})

...选择正确的参数集。

我认为这可以通过数组来完成，但在语法上我不确定最好的方法。

4

2 回答 2

1

您可以将所有段放入一个数组中，并使用一个将段号作为参数并执行动画的函数。

请注意segments[sid-1]- 这是因为在 DOM 中，您的段似乎以 1: 开头#segment-1，#segment-2依此类推，但默认情况下，数组元素始终从 0 开始。

另一件事是segmentSelected用初始化0：这是因为这个变量应该表示用户点击body元素的次数，最初这表示“0 次”，然后才会发生任何点击。

var segments = [{
       start: {
          x: 414,
          y: 121,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      },
     {
       start: {
          x: 494,
          y: 104,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      } ... ];

       var segmentSelected = 0;

       function animateSegment(sid)
       {
                  $("#segment-"+sid).animate({path : new $.path.bezier(segments[sid-1])});
       }

       $('body').click(function () {
        segmentSelected += 1; //the amount of user clicks
        animateSegment(segmentSelected);
        if (segmentSelected == 5) {
            segmentSelected = 0; //reset the amount of user clicks (looping)
        }
    });
于 2013-04-05T10:10:12.447 回答
1

您可以使用与此类似的数组：

var selectedSegment = 1;
var segments = [];

segments.push({
    start: {
        x: 414,
        y: 121,
        angle: 358.156,
        length: 0.300
    },
    end: {
        x: 114,
        y: 121,
        angle: 0.229,
        length: 0.704
    }
});

segments.push({
    start: {
        x: 494,
        y: 104,
        angle: 358.156,
        length: 0.300
    },
    end: {
        x: 114,
        y: 121,
        angle: 0.229,
        length: 0.704
    }
})

segments.push({
    start: {
        x: 420,
        y: 306,
        angle: 358.156,
        length: 0.300
    },
    end: {
        x: 114,
        y: 121,
        angle: 0.229,
        length: 0.704
    }
})

segments.push({
    start: {
        x: 514,
        y: 389,
        angle: 358.156,
        length: 0.300
    },
    end: {
        x: 114,
        y: 121,
        angle: 0.229,
        length: 0.704
    }
})

然后像这样使用它：

console.log(segments[selectedSegment]);

边注

我在上面的示例中使用了 array.push() ，它在数组的末尾添加了一个新元素。

要将项目添加到数组的开头，请改用Array.unshift()。

于 2013-04-05T10:10:42.780 回答