JavaScript缓动库
发布时间:2009-05-25 12:50:00
调用很简单
Readkid.motion.tween(target,duration, vars)
target: 要缓动的DOM对象
duration: 缓动持续时间
var: 参数集合
参数详细:
可以是你要缓动的style参数,比如top, left, width, 也可以是TweenKid定义的缓动滤镜,如alpha, color等,你也可以自己添加缓动滤镜 在Readkid.motion.InfoPlugin包里。
ease:Function 缓动方式 我集成了比较少的几种缓动公式(Base, Back.easeOut, Back.easeIn, Back.easeInOut, Bounce.easeOut, Bounce.easeIn, Bounce.easeInOut),如果你需要更多,可以自己添加。
onComplete:Function 当缓动完成时调用。
onUpdate:Function 当缓动更新时调用。
下面是完整js缓动源码:
if (typeof Readkid == "undefined")
Readkid = {}
//获取样式
Readkid.getStyle = function(elem, name) {
if (!elem) return null;
var result = null;
if(elem.style[name]){
result = elem.style[name];
}else if(elem.currentStyle){
result = elem.currentStyle[name];
}else if(window.getComputedStyle){
result = window.getComputedStyle(elem,null)[name];
}
return result;
}
Readkid.motion = {
tweenManager: {
addTween:function(tweenkid) {
if (!Readkid.motion._tweens)
Readkid.motion._tweens = {};
if (!Readkid.motion.count)
Readkid.motion.count = 0;
Readkid.motion.count++;
Readkid.motion._tweens[tweenkid.target.guid] = tweenkid;
if (!Readkid.motion.runing) {
Readkid.motion.run();
}
},
clear: function(tweenkid) {
delete Readkid.motion._tweens[tweenkid.target.guid];
if (--Readkid.motion.count == 0) {
Readkid.motion.norun();
}
}
},
TweenInfo: function(target, propName, propValue) {
if (!Readkid.motion.InfoPlugin[propName]) {
return new Readkid.motion.InfoPlugin.base(target, propName, propValue);
} else {
return new Readkid.motion.InfoPlugin[propName](target, propName, propValue);
}
},
InfoPlugin: {
//自动宽高
height: function(target, propName, propValue) {
target.style.overflow = "hidden";
this.propName = propName;
var start = parseInt(Readkid.getStyle(target, propName));
var end = propValue;
if (isNaN(start))
start = target.offsetHeight;
this.update = function(change) {
var v = start + (end - start) * change;
target.style.height = (v > 0 ? v : 0) + "px";
}
},
//背景颜色
bgColor: function(target, propName, propVaule) {
return new Readkid.motion.InfoPlugin.color(target, "backgroundColor", propVaule);
},
//颜色滤镜
color :function(target, propName, propValue) {
this.propName = propName;
var start = Readkid.getStyle(target, propName);
var end = {r:propValue >> 16, g:propValue >> 8 & 0xFF, b:propValue & 0xFF};
var m = /rgb\((\d+), (\d+), (\d+)\)/.exec(start);
if (m) {
start = {r:m[1]*1, g:m[2]*1, b:m[3]*1}
} else {
if (start.indexOf("#") > -1) {
start = start.replace("#", "");
if (start.length == 3)
start = start.substr(0,1) + start.substr(0,1) + start.substr(1,1) + start.substr(1,1) + start.substr(2,1) + start.substr(2,1);
start = eval("0x" + start);
start = {r:start >> 16, g: start >> 8 & 0xFF, b:start &0xFF};
}else
start = {r:255, g:255, b:255};
}
function to(r, g,b) {
var n = (check(r) << 16 | check(g) << 8 | check(b)).toString(16);
for (var i=6-n.length; i>0;i--) {
n = "0" + n;
}
return "#" + n;
};
function check(c) {
if (c < 0)
c = 0;
else if (c > 255)
c = 255;
return c;
};
this.update = function(change) {
var r = start.r + (end.r - start.r) * change;
var g = start.g + (end.g - start.g) * change;
var b = start.b + (end.b - start.b) * change;
target.style[propName] = to(r, g, b);
}
},
//基本滤镜
base: function(target, propName, propValue) {
this.propName = propName;
var start = parseInt(Readkid.getStyle(target, propName));
var end = propValue;
if (isNaN(start))
start = 0;
this.update = function(change) {
target.style[propName] = start + (end - start) * change + "px";
}
},
//透明滤镜
alpha: function(target, propName, propValue) {
this.propName = "opacity";
var start;
if (Readkid.Browser.msie) {
var m = /.*?alpha\(opacity=(\d+)\).*?/.exec(Readkid.getStyle(target, "filter"));
start = (m ? m[1] : 100)/100;
}
if (start == null)
start = Number(Readkid.getStyle(target, "opacity"));
if (start == null)
start = 0;
var end = propValue;
this.update = function(change) {
var v = start + (end - start) * change;
if (Readkid.Browser.msie) {
target.style.filter = "alpha(opacity="+ v * 100 +")";
} else {
target.style.opacity = v;
}
}
}
},
TweenKid: function(target, duration, vars) {
if (!Readkid.motion.guid)
Readkid.motion.guid = 1;
if (!target.guid)
target.guid = Readkid.motion.guid++;
var onComplete = vars.onComplete || function(){};
var onUpdate = vars.onUpdate || function(){};
this.target = target;
var infos = [];
var _duration = duration;
var startTime = (new Date().getTime());
var easeing = vars.ease || Readkid.motion.ease.Base;
for (var prop in vars) {
infos.push(Readkid.motion.TweenInfo(target, prop, vars[prop]));
}
Readkid.motion.tweenManager.addTween(this);
this.kill = function(auto) {
if (auto)
this.render(startTime + _duration * 1000);
else
Readkid.motion.tweenManager.clear(this);
};
this.render = function(time) {
onUpdate();
var time = (time - startTime) * .001;
if (time >= _duration) {
time = _duration;
Readkid.motion.tweenManager.clear(this);
onComplete();
}
var fac = easeing(time, 0, 1, _duration);
for (var i=0; i<infos.length; i++) {
infos[i].update(fac);
}
}
},
tween:function(target,duration, vars) {
return new Readkid.motion.TweenKid(target,duration, vars);
},
killAll: function(auto) {
for (var t in Readkid.motion._tweens) {
Readkid.motion._tweens[t].kill(auto);
}
},
run: function() {
Readkid.motion.runing = true;
Readkid.motion._interval = setInterval(Readkid.motion.step, 33);
},
norun:function() {
if (Readkid.motion.runing) {
Readkid.motion.runing = false;
clearInterval(Readkid.motion._interval);
}
},
step: function() {
var timer = (new Date()).getTime();
for (var t in Readkid.motion._tweens) {
Readkid.motion._tweens[t].render(timer);
}
},
//缓动公式
ease: {
Base: function(t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
Back: {
easeOut: function(t, b, c, d) {
return c*((t=t/d-1)*t*((1.70158+1)*t + 1.70158) + 1) + b;
},
easeIn: function(t, b, c, d) {
return c*(t/=d)*t*((1.70158+1)*t - 1.70158) + b;
},
easeInOut: function(t, b, c, d) {
if ((t/=d/2) < 1) return c/2*(t*t*(((1.70158 * (1.525))+1)*t - 1.70158)) + b;
return c/2*((t-=2)*t*(((1.70158 * (1.525))+1)*t + 1.70158) + 2) + b;
}
},
Bounce: {
easeIn: function(t, b, c, d) {
return c - Readkid.motion.ease.Bounce.easeOut(d-t, 0, c, d) + b;
},
easeOut: function(t, b, c,d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOut: function(t, b, c, d) {
if (t < d/2) return Readkid.motion.ease.Bounce.easeIn (t*2, 0, c, d) * .5 + b;
else return Readkid.motion.ease.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
}
}
}
}
演示例子请看下一页。
猜你喜欢
- 听说最近流行JQ风格的语法,不流行EXT风格了一.//ajax类fw=window.fw||{};fw.ajax = { &nbs
- 用css属性选择器可以有选择性地对链接样式进行控制,如让所有的外部链接都加一个小图标来标识其是一外部链接。但用css有弊端: 1、只支持Fi
- 代码'########### '检测远程文件是否存在 '########### function CheckURL(
- 我对这两种连接方式认识不够深,似乎朋友们对此也没有定论。请问哪一种更好呢?DSN是采用数据源的连接方式,其使用方法是: Conn.
- 我的PJBlog在从2.7升级的3.0的时候,犹豫了很久。升级到PJBlog3.0就是看中了新增的静态页面功能,但是同时又担心造成博客出现大
- 如果你正在运行使用MySQL的Web应用程序,那么你把密码或者其他敏感信息保存在应用程序里的机会就很大。保护这些数据免受黑客或者窥探者的获取
- opendir – 打开一个目录句柄,可用于之后的 closedir(),readdir() 和 rewinddir()
- Css tranistions允许元素的属性在单位时间内发生平滑的过渡,在阅读完《CSS Transitions Module Level
- 通常我们做网站,设计版面布局是第一步,如何做到版面布局具有创意又美观大方呢?这就需要一定的版面处理功底。让我们先来了解一下版面布局的步骤:一
- 如何在网站上提供音乐下载?为用户提供歌曲下载,一般有两种方式,一是直接通过Http,浏览器下载,二是通过ftp协议下载。我们来用Http和浏
- 整本书围绕着一个叫做“CSS禅意花园”的网站展开,其实N久之前我在一份外国的关于CSS的在线教程上看到了这个网站的链接,可惜进去之后发现内容
- 看下面的Java代码,目的是为了当i是3的时候,就不做输出,直接跳到下一个循环。int i = 0; 
- 从过往MySQL数据库生产环境的维护工作中,总结的一些小经验和知识,未必有多深奥,但是对我们消除隐患,确保MySQL数据库生产环境四个9的作
- 内容摘要:当讨论Request对象内容时,要研究的集合之一就是ServerVariables集合。这个集合包含了两种值的结合体,一种是随同页
- 1.5 学习ASP.net 的过程中如何求助--加入 ASPNG 讨论列表 Charles Carroll 作为不断壮大的 ASP.NET
- 之前看到很多人一直都问CSS 中DIV垂直居中的问题,看来对此的需求还不少。现在就把我经验拿出来分享一下,希望大家鼓鼓掌。因为在 CSS 中
- 最近Google Code推出了一个面向网站开发者的 * Google DocType。它来自于网站开发者同时又面
- 常见的双倍边距类问题都遇到过,但很少遇到这种有意思的,所以记录一下。这个BUG是发生在Standards模式下(就是包含XHTML或者HTM
- 找到一句可以获得当前最新ID的语句,如下:conn.execute("insert into member (user,code)
- <?php/*======================================事务处理==================