摘《谈谈scriptaculous动画效果库effect.js(原理和使用)》
scriptaculous 包含以下几个部分：

builder.js ：提供了一种方便的建立html元素的方法
controls.js ：包含自动提示和动态编辑两个控件
dragdrop.js ： 提供元素拖放的功能
effects.js ： 设计优良的ajax效果库，这篇文章要讲的就是这个
slider.js ： 一个滑动条控件

关于每个部分的使用方法建议查看scriptaculous 的官方文档 ，这篇文章只讲scriptaculous中的effect.js（动画效果库）这一部分

effects.js中提供了两种类型的动画效果，一种称为核心效果（core effect），一种称为组合效果（combination effect）

顾名思义，core effect提供了一种比较单一的效果，例如元素的渐变隐藏、元素的移动等等，所有的core effect都是继承于Effect.Base 这个基类，Effect.Base类实现了浏览器中用js表现一段动画效果的整个逻辑，而每个具体的core effect类实现该效果的表现代码就可以了

而combination effect把各种不同的core effect组合起来实现了一些比较复杂的动画效果

调用方法：

在header中引用scriptaculous文件：

<script src="lib/prototype.js" type="text/javascript"></script><script src="lib/scriptaculous.js" type="text/javascript"></script>scriptaculous是建立在prototype之上的，所以要先引用prototype，如果你只想使用scriptaculous中的effect效果库，可以把第二句修改为<script src="lib/scriptaculous.js?load=effects" type="text/javascript"></script>这样的话就不会把所有的scriptaculous文件都引入到页面了第二步：实例化你想要的效果类：

例如： new Effect.Opacity(”testDiv1″,{from:1,to:0}) ,实现元素慢慢隐藏的效果，其中Effect.Opacity 是要实现的效果的名称，也是实现这个效果的类的名称，调用的时候要提供两个参数，其中第一个参数”testDiv1″指定该效果要作用的对象(html元 素)，可以是元素id或者是元素的引用，其中第二个参数 {from:1,to:0} 指定这个效果的具体参数，它是一个javascript对象，{from:1,to:0}在这里是表示不透明度由1变成0，也就是把元素慢慢变成透明了， 持续时间是1秒钟(默认)

其他的效果调用方式跟Effect.Opacity基本一样，提供一个html元素以及一个js对象来指定效果的具体参数
比如 new Effect.Move(”testDiv1″,{x:20,y:30}) ，将id为testDiv1的元素慢慢的向下移动20px，同时向右移动30px

其中第二个参数默认是：
{
duration: 1.0, // 持续时间
fps: 60.0, // 每秒的帧数
sync: false, // 只有在同时播放一些动画效果的时候才需要设置为true，下面会介绍
from: 0.0, // 从哪里开始
to: 1.0, // 到那里结束 //这两个参数下一节会说明
delay: 0.0 // 延迟执行的秒数，可以看成是开始执行的时间
}
除了指定这些参数外，还可以在这个参数中指定动画的事件处理函数，例如afterFinish等
{
from:1,
to:0,
afterFinish:function(){alert(”运行结束了”)}
}

初步认识Effect.Base和core effects

Effect.Base是所有core effects效果类的基类，也是创建我们自己的效果类的基础

Effect.Base类使用了flash中时间线（timeline）的概念实现了浏览器中的动画逻辑，实例化一个效果（effect对象）相当 于建立了一条时间线，Effect.Base使用我们提供的参数(比如开始时间, 结束时间,每秒的帧数)来初始化这个时间线, 然后在我们指定的时间内运行(相当于flash中的播放)，在具体的某个effect类中只要实现每帧的显示代码（update方法）以及初始化的一些操 作就可以了

比如上面例子的Effect.Opacity效果，下面是整个的实现代码：
Effect.Opacity = Class.create();
Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
if(!this.element) throw(Effect._elementDoesNotExistError);
// make this work on IE on elements without ‘layout’
if(/MSIE/.test(navigator.userAgent) && !window.opera && (!this.element.currentStyle.hasLayout))
this.element.setStyle({zoom: 1});
var options = Object.extend({
from: this.element.getOpacity() || 0.0,
to: 1.0
}, arguments[1] || {});
this.start(options);
},
update: function(position) {
this.element.setOpacity(position);
}
});

在这里我们只定义了构造函数initialize和实现设置元素透明度的update函数，这样一个效果类就建成了，而具体的动画实现逻辑全部在Effect.Base中实现了，Effect.Base在显示每帧的时候会自动调用上面的update方法

在initialize中执行一些初始化的必要操作，比如在上面的代码中判断要作用的目标元素是否存在，以及把动画的开始透明度设置为元素当前的透明度，注意需要在这个函数的最后调用this.start(options)来运行这个动画

update方法在每帧显示的时候被Effect.Base中的方法自动调用，传递给update的参数pisition指定当前帧的位置，注意跟 当前帧不是一个概念（当前帧可以使用effect的属性currentFrame获得），它表示的是当前帧映射到参数from和to的值，还是举个例子说 明的好：

例如一个动画持续2秒钟，每秒的帧数是65，那么这个动画共有65*2=130帧，当播放了0.8秒时，那么当前帧就是65*0.8=52，默认情 况下(from=0, to=1)那么传递给update的参数pisition就是 52/130或者说是pos=0.8/2=0.4=40%，可以看着是执行了整个动画的百分之几了，如果你实例化effect的时候提供了{from: 1 , to:0.1}, 在Effect.Opacity中表示透明度有1渐变到0.1，这个时候传递给update的参数position就等于0.4*(0.1-1)+1= 0.64（from+(to-from)*pos），正好是在渐变过程中我们要设置的opacity值，所以在update中只用 this.element.setOpacity(position)一句代码就行了

core effects中的属性、方法以及事件

除了上面说的currentFrame属性，在Effect.Base中还提供了另外一个属性：state，它表示当前动画的运行状态，它有三种不同的值：
“idle”: effect实例已经建立，但是还没有开始运行
“running”: 动画正在运行中
“finished”: