javascript简易缓动插件(源码打包)


Posted in Javascript onFebruary 16, 2012

要求如下:
可以开始、暂停(线性、非线性tween都支持)、继续、结束
支持多个样式并行
最好不依赖于某个框架下运行
文件尺寸越小越好
他找了一下现有的一些插件或者库,鲜有能满足或者比较均衡的,我在这个要求下,写了一个比较简陋的动画组件,基本满足了这个需求。先上代码
在线演示:http://demo.3water.com/js/2012/animate/
打包下载:animate_jquery.rar
html部分:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>animate</title> 
<script type="text/javascript" src="tangram-1.5.0.core.js"></script> 
<script type="text/javascript" src="jquery.min.js"></script> 
<style> 
html,body,ul,li{padding:0;margin:0;} 
#anim{width:50px;height:50px;background:red;position:absolute; top:30px;left:0;} 
</style> 
</head> 
<body> 
<div> 
<input type="button" value="start" onclick="an.start()" /> 
<input type="button" value="pause" onclick="an.pause()" /> 
<input type="button" value="resume" onclick="an.resume()" /> 
<input type="button" value="stop" onclick="an.stop()" /> 
<a target="_self" id="demolink" href="animate.html?demo=1" />auto start,pasue,then resume</a> 
</div> 
<div id="anim"></div> 
</body></html>

animate部分:
function animate(options){ 
this.from = options.from;//如果没有from,就计算出from 
this.to = options.to || {}; 
this.onStart = options.onStart || empty;//以下是一些回调函数,就不采用事件机制了 
this.onStop = options.onStop || empty; 
this.onAnimate = options.onAnimate || empty; 
this.onContinue = options.onContinue || empty; 
this.onPause = options.onPause || empty; 
var element = options.element; 
var duration = options.duration || 300;//变化的总时长,单位是ms 
var pending = false;//是不是已经暂停了,如果还木有开始的话,该值也是true 
var timer = null; 
var mixin = options.mix; 
var defaultState = this.from || getState(element, this.to);//原始的数据 
var thiz = this; 
//获取最初始的样式 
function getState(ele, targetStyles){ 
var obj = {}; 
var i = 0; 
for (var p in targetStyles) 
{ 
i++; 
obj[p] = parseFloat(mixin.getStyle(ele, p)); 
} 
if(i == 0){ 
return null; 
} 
return obj; 
} 
function empty(){} 
function animate(from, to, elapse){ 
var startTime = (new Date).getTime() + (elapse ? - elapse : 0);//如果有第三个参数,证明是从一个暂停开始的,那么就设置startTime为当前时间减去暂定时已经逝去的时间,如果只有两个参数,那么逝去时间就是0 
timer = setInterval(function(){ 
var endTime = (new Date).getTime(); 
if(endTime - startTime < duration){ 
thiz.onAnimate(); 
currentElapse = endTime - startTime; 
for(var p in from){ 
if(from.hasOwnProperty(p)){ 
var currentPropertyStyle = mixin.compute(currentElapse, from[p], to[p]-from[p], duration); 
mixin.setStyle(element, p, currentPropertyStyle); 
} 
} 
} 
else{ 
thiz.stop(thiz.to); 
} 
}, 16); 
} 
this.start = function(){ 
if(pending){ 
this.resume(); 
} 
else{ 
this.onStart(); 
animate(defaultState, this.to); 
} 
} 
this.stop = function(){ 
clearInterval(timer); 
var styles = this.to; 
for(var p in styles){ 
if(styles.hasOwnProperty(p)){ 
mixin.setStyle(element, p, styles[p]); 
} 
} 
this.onStop(); 
} 
this.pause = function(){ 
clearInterval(timer); 
pending = true; 
this.onPause(); 
} 
this.resume = function(){ 
pending = false; 
this.onContinue(); 
animate(defaultState, this.to, currentElapse); 
} 
}

使用部分:
var mixinT = { 
getStyle:baidu.dom.getStyle, 
setStyle:baidu.dom.setStyle, 
compute:function(t, b, c, d){ 
//return t*c/d + b; 
if (t==0) return b; 
if (t==d) return b+c; 
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 
} 
}; 
var mixinJQ = { 
getStyle:function(ele, styleName){ 
return $(ele).css(styleName); 
}, 
setStyle:function(ele, styleName, styleValue){ 
$(ele).css(styleName, styleValue); 
}, 
compute:function(t, b, c, d){ 
return b+ t*c/d; 
} 
}; 
var an = new animate({ 
element:document.getElementById('anim'), 
//from:{'width':100, 'height':100, left:0, top:30}, 
to:{left:500}, 
mix:mixinT, 
duration:2000 
}); 
if(/demo=1/.test(location.search)){ 
var demolink = baidu.g('demolink'); 
demolink.href= 'animate.html'; 
demolink.innerHTML = 'back'; 
an.start(); 
setTimeout(function(){ 
an.pause(); 
resume(); 
}, 1200); 
function resume(){ 
setTimeout(function(){an.resume()}, 1000); 
} 
}

上面是一个完整demo的代码。做几点说明:
代码尺寸足够小了,一共才100行,gzip后连1k都不到。
满足了可以start、pause、resume、stop的需求,赠送了几个回调函数:D。
可以支持多个样式一起变化。
采用了一个mixin变量,传进来三个函数需要在执行动画时的操作,getStyle、setStyle、compute,我感觉这三个确实和用户的选择有关系,前两个可能和框架有关,第三个和用户采用的变化计算方式有关,之所以传进去四个参数,主要是和主流的tween类能适应起来,可以参考http://www.robertpenner.com/easing/和http://www.actionscript.org/resources/articles/170/1/Flash-MX-2004-Undocumented-TweenEasing-Classes-Documented/Page1.html。我给的例子用了tangram和jquery俩类库,分别对应了两个mixin对象,做一下简单的适配,就能用了。
一些“私有”变量和函数放闭包里了,这样初始化一个animate的时候,对象是干净的,但是缺点就是占用内存多了,每个实例都维护自己的方法。
使用的时候,可以不提供options.from,函数会根据额options.to来计算from中对应样式的值,这很大程度上依赖于mixin提供的方法够不够强大,所以这一块还是有bug 的,不过,80%的功能够用了。麻雀虽小,五脏俱全了。
Javascript 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 #Javascript
js URL参数的拼接方法比较
Feb 15 #Javascript
javascript题目,重写函数让其无限相加
Feb 15 #Javascript
用JQUERY增删元素的代码
Feb 14 #Javascript
修改jQuery Validation里默认的验证方法
Feb 14 #Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 #Javascript
js 金额文本框实现代码
Feb 14 #Javascript
You might like
最小化数据传输――在客户端存储数据
2006/10/09 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Python实现直播推流效果
2019/11/26 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
淘宝客服工作职责
2014/07/11 职场文书
大二学生自我检讨书
2014/10/23 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python