Heim >Web-Frontend >js-Tutorial >JQuery 自定义CircleAnimation,Animate方法学习笔记_jquery

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

WBOY
WBOYOriginal
2016-05-16 18:05:071647Durchsuche

在此贴出一些学习成果,希望能对学习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;
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn