JQuery 사용자 정의 CircleAnimation, Animate 메서드 연구 Notes_jquery

JQuery를 배우는 다른 학생들에게 도움이 되길 바라며 여기에 학습 결과를 게시하고, 나의 학습 상황도 기록합니다.
몇 가지 공식 JQuery 튜토리얼을 읽은 후 나는 이미 약간의 흥미를 느꼈기 때문에 직접 작성해 보기로 결정했습니다. 화려한 애니메이션 효과를 많이 보고, 원형 모션의 애니메이션 효과를 직접 써보기로 했습니다. 아래에 js 코드를 게시해 두겠습니다.

복사 code 코드는 다음과 같습니다:

var CircleAnimation = function (center_left, center_top, id, clockwise, Duration) {
새 CircleAnimation.fn을 반환합니다. init(center_left, center_top, id, 시계방향, 기간);
CircleAnimation.fn = CircleAnimation.prototype = {
item: {},
init:
function (center_left, center_top, id, 시계방향, 기간) {
this.item = $("#" id "")
if (!this.item[0])
return;
x : this.item.css("left") == "auto" ? 0 : String(this.item.css("left")).replace("px", "") - center_left,
y: this.item.css("top") == "auto" ? 0 : String(this.item.css("top")).replace("px", "") - center_top
};
center_left = center_left;
if (currentPoint.x == 0 && currentPoint.y == 0)
return
r = .pow(currentPoint .x, 2) Math.pow(currentPoint.y, 2), 0.5);
var flag = false;
var caculateMiniAngle = function (angle) {
//최소값 계산 각도 차이, 두 점 사이의 거리가 1px 미만인 경우 이 2개의 포닛 각도가 최소 각도 차이여야 한다고 생각합니다.
if (Math.sin(angle / 2) * 2 * r > 1) {
return caculateMiniAngle(angle / 2)
}
else {
return angle;
}
}
miniAngle = caculateMiniAngle(Math.PI / 4)// dom 요소에 데이터 저장
this.item.data("currentPoint", currentPoint);
this.item.data("center_left", center_left)
this.item.data("center_top", center_top);
this.item.data("r", r);
this.item.data("clockwise", clockwise)
this.item.data("miniAngle", miniAngle) ;
this.item.data("기간", 기간);
//this.item.data("startX", this.startX)
},
시작:
function () {
var 요소;
if (this.id)
element = $("#" this.id.toString())
else
element = this.item ;
element.animate({ left: 1, top: 1 }, {
duration: element.data(
"duration"),
step: CircleAnimation.fn.caculateNextPoint
} );
},
caculateNextPoint:
function () {
var el
el = $(
"#" this.id.toString()); var sin = el .data("currentPoint").y / el.data("r");
var angle = Math.asin(sin);
if (el.data("currentPoint"). x < 0 )
angle = Math.PI - angle;//현재 점 각도와 다음 점 각도 사이의 각도 차이를 계산합니다.
varanglediff = el.data("miniAngle"); >if (el .data("duration") != 정의되지 않음)
anglediff = 2 * Math.PI * 13 / el.data(
"duration")
if (el.data(" 시계 방향"))
angle = angle - angleiff;
else
angle = angle angleiff;
var y = el.data("r") * Math.sin(angle);
var x = el .data("r") * Math.cos(angle);
var fx =args[1]//기간을 충분히 길게 설정하면 원 애니메이션이 멈추지 않습니다.
fx.options .duration = (
new Date).getTime() - fx.startTime 10000
if (fx.prop == "top")
fx.now = y el.data(
" center_top");
if (fx.prop == "left")
fx.now = x el.data(
"center_left");
el.data(
"currentPoint ", { x : x, y: y });
},
stop:
function () {
this.item.queue("fx", []);
this.item.stop();
}
}
CircleAnimation.fn.init.prototype =