ユーザーが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)})
...正しいパラメータセットを選択します。
これは配列で実行できると考えていますが、構文的には最適なアプローチがわかりません。