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


Posted in Javascript onJuly 10, 2011

在此贴出一些学习成果,希望能对学习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 < 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;
Javascript 相关文章推荐
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
关于jQuery中的end()使用方法
Jul 10 #Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 #Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 #Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 #Javascript
jquery 选项卡效果 新手代码
Jul 08 #Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 #Javascript
jquery调用wcf并展示出数据的方法
Jul 07 #Javascript
You might like
PHP session有效期问题
2009/04/26 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python 中的divmod数字处理函数浅析
2017/10/17 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python如何实现单链表的反转
2020/02/10 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
音乐教学案例
2014/01/30 职场文书
好人好事事迹材料
2014/02/12 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
超越自我演讲稿
2014/05/21 职场文书
企业安全标语
2014/06/07 职场文书
团日活动总结模板
2014/06/25 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
信息技术课教学反思
2016/02/23 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server