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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 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
德劲1104的电路分析与改良
2021/03/01 无线电
PHP 读取文件的正确方法
2009/04/29 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
vue实现分页栏效果
2019/06/28 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
详解python和matlab的优势与区别
2019/06/28 Python
对Python中画图时候的线类型详解
2019/07/07 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
婚礼主持结束词
2014/03/13 职场文书
公司开业庆典主持词
2014/03/21 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP
关于Redis的主从复制及哨兵问题
2022/06/16 Redis