JQuery 自定义CircleAnimation，Animate方法学习笔记_jquery

在此贴出一些学习成果，希望能对学习JQuery的其他同学有所帮助，同时也记录下自己的学习情况。 看了一些JQuery的官方教程，已经有点心潮澎湃了，就决定自己尝试着写一些东西出来。我看到了很多很绚的动画效果，然后决定自己也尝试一下，我决定要写一个圆周运动的动画效果，下面贴出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 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;