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 相关文章推荐
JavaScript运行时库属性一览表
Mar 14 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 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内容的函数
2008/08/27 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Django中的静态文件管理过程解析
2019/08/01 Python
Python库安装速度过慢解决方案
2020/07/14 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
Sony C++笔试题
2013/03/10 面试题
优秀的茶餐厅创业计划书
2014/01/03 职场文书
会计专业自我鉴定
2014/02/10 职场文书
另类冲刺标语
2014/06/24 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
Python3 类型标注支持操作
2021/06/02 Python
详解JS数组方法
2021/11/20 Javascript
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL