JQueryカスタムCircleAnimation,Animateメソッド学習ノート

ここでいくつかの学习成果を贴って、JQueryの他の学友を学ぶことに対して役に立つことができることを望んで、同时に自分の学习の情况をも记录します.
JQueryの公式チュートリアルを見て、もうちょっとドキドキして、自分で何かを書いてみることにしました.私はたくさんのとてもきらびやかなアニメーションの効果を见て、それから自分も试みることを决めて、私は1つの周の运动のアニメーションの効果を书くことを决めて、下でjsコードを贴り付けます

 
  
var CircleAnimation = function (center_left, center_top, id, clockwise, duration) { 
  
return new CircleAnimation.fn.init(center_left, center_top, id, clockwise, duration); 
  
}; 
  
CircleAnimation.fn = CircleAnimation.prototype = { 
  
item: {}, 
  
init: 
  
function (center_left, center_top, id, clockwise, duration) { 
  
this.item = $("#" + id + ""); 
  
if (!this.item[0]) 
  
return; 
  
currentPoint = { 
  
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; 
  
center_top = center_top; 
  
if (currentPoint.x == 0 && currentPoint.y == 0) 
  
return; 
  
r = Math.pow(Math.pow(currentPoint.x, 2) + Math.pow(currentPoint.y, 2), 0.5); 
  
var flag = false; 
  
var caculateMiniAngle = function (angle) { 
  
//caculate the minimum angle diff, if the distance between 2 points less than 1px, we think this 2 ponits angle should be the minimum angle diff 
  
if (Math.sin(angle / 2) * 2 * r > 1) { 
  
return caculateMiniAngle(angle / 2); 
  
} 
  
else { 
  
return angle; 
  
} 
  
} 
  
miniAngle = caculateMiniAngle(Math.PI / 4); 
  
//store data to dom element 
  
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("duration", duration); 
  
//this.item.data("startX", this.startX); 
  
}, 
  
start: 
  
function () { 
  
var element; 
  
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; 
  
//caculate the angle diff between current point angle and next point angle 
  
var anglediff = el.data("miniAngle"); 
  
if (el.data("duration") != undefined) 
  
anglediff = 2 * Math.PI * 13 / el.data( 
  
"duration"); 
  
if (el.data("clockwise")) 
  
angle = angle - anglediff; 
  
else 
  
angle = angle + anglediff; 
  
var y = el.data("r") * Math.sin(angle); 
  
var x = el.data("r") * Math.cos(angle); 
  
var fx = arguments[1]; 
  
//set duration big enough then circle animation never stop 
  
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 = CircleAnimation.fn;