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