JQuery custom CircleAnimation, Animate method study notes

JQuery custom CircleAnimation, Animate method study notes_jquery

WBOY

Release： 2016-05-16 18:05:07

Original

1661 people have browsed it

I post some learning results here, hoping to be helpful to other students learning JQuery, and also record my own learning situation.
After reading some official JQuery tutorials, I was already a little excited, so I decided to try to write something myself. I saw a lot of gorgeous animation effects, and then decided to try it myself. I decided to write an animation effect of circular motion. The js code is posted below

Copy code The code is as follows:

 
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; 