JQuery 自定義CircleAnimation,Animate方法學(xué)習(xí)筆記
更新時(shí)間:2011年07月10日 00:34:40 作者:
最近對(duì)看了一些JQuery的基礎(chǔ)教程,被JQuery深深的吸引住了,以前用過Extjs,看了JQuery不禁感嘆,javascript還能這么些,真是太神奇了!
在此貼出一些學(xué)習(xí)成果,希望能對(duì)學(xué)習(xí)JQuery的其他同學(xué)有所幫助,同時(shí)也記錄下自己的學(xué)習(xí)情況。
看了一些JQuery的官方教程,已經(jīng)有點(diǎn)心潮澎湃了,就決定自己嘗試著寫一些東西出來。我看到了很多很絢的動(dòng)畫效果,然后決定自己也嘗試一下,我決定要寫一個(gè)圓周運(yùn)動(dòng)的動(dòng)畫效果,下面貼出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;
看了一些JQuery的官方教程,已經(jīng)有點(diǎn)心潮澎湃了,就決定自己嘗試著寫一些東西出來。我看到了很多很絢的動(dòng)畫效果,然后決定自己也嘗試一下,我決定要寫一個(gè)圓周運(yùn)動(dòng)的動(dòng)畫效果,下面貼出js代碼
復(fù)制代碼 代碼如下:
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;
相關(guān)文章
jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的方法
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的方法,需要的朋友可以參考下2014-06-06讓jQuery Mobile不顯示討厭loading界面的方法
jQuery Mobile總是顯示討厭的loading界面,下面有個(gè)不錯(cuò)的解決方法,大家可以參考下2014-02-02jQuery簡(jiǎn)單操作cookie的插件實(shí)例
這篇文章主要介紹了jQuery簡(jiǎn)單操作cookie的插件,以實(shí)例形式分析了jQuery操作cookie的插件功能定義與使用技巧,需要的朋友可以參考下2016-01-01Jquery實(shí)現(xiàn)搜索框提示功能示例代碼
數(shù)據(jù)量很大的情況下使用Ajax去實(shí)現(xiàn)真的不合適,于是想采用Jquery來實(shí)現(xiàn)方法,具體的示例代碼如下,有需求的朋友可以參考下希望對(duì)大家有所幫助2013-08-08js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
在js使用過程中可能會(huì)根據(jù)要求獲取瀏覽器窗口的可視區(qū)域高度和寬度,滾動(dòng)條高度,于是本人搜集整理下,拿出來和大家分享,希望可以幫助你們2012-12-12jQuery EasyUI之驗(yàn)證框validatebox實(shí)例詳解
本文通過實(shí)例代碼給大家講解了jQuery EasyUI之驗(yàn)證框validatebox知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-04-04