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 相关文章推荐
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
jquery禁用右键示例
Apr 28 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 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 XML操作类DOMDocument
2009/12/16 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
javascript引用对象的方法
2007/01/11 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
Python实现批量下载文件
2015/05/17 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
PyCharm代码格式调整方法
2018/05/23 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
学生个人的自我评价分享
2013/11/05 职场文书
物流业务员岗位职责
2014/02/08 职场文书
太太口服液广告词
2014/03/20 职场文书
出纳工作检讨书
2014/10/18 职场文书
关于颐和园的导游词
2015/01/30 职场文书
长征观后感
2015/06/09 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Linux中文件的基本属性介绍
2022/06/01 Servers