scriptaculous卡通片效果库effect.js(原理和使用)(转)

scriptaculous 包含以下几个部分：

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

现在又新增了一个：sound.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”: 动画已经运行结束
另外两个属性是：startOn和finishOn，他们的单位是毫秒ms，不过这些属性一般都很少使用

在Effect.Base中定义了很多的事件：beforeStart，beforeSetup，afterSetup，beforeUpdate，afterUpdate，beforeFinish，afterFinish
上面是按照这些事件的触发顺序排列的，这些事件的处理函数在用户建立相应的effect实例的时候传递进来，上上节的调用方法一节有说明

只要你高兴你可以使用更长的事件名称，如afterFinishInternal，它跟afterFinish是等价的

继承自Effect.Base的effect类中，除了两个必须要实现的initialize和update方法外，还可以实现另外两个方法： setup()和finish()，setup在运行动画的第一帧前被调用，finish在动画最后一帧运行后调用，可以在finish方法里定义一些还 原和释放资源的操作

更多更有趣的

除了简单的core effect外，scriptaculous中还包含更多的组合效果类，这里只简单的说一下实现的方法，而不是准备列一个清单以及具体的使用说明出来，我鼓励你直接深入到scriptaculous的源代码中去

1，怎么把两个动画链接起来：

使用afterFinishInternal，例如你想让一个元素左右摇动几下：
Effect.Shake = function(element) {
element = $(element);
var oldStyle = {
top: element.getStyle(’top’),
left: element.getStyle(’left’) };
return new Effect.Move(element,
{ x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
effect.element.undoPositioned().setStyle(oldStyle);
}}) }}) }}) }}) }}) }});
}
2，怎么使两个效果平行的同时运行

使用Effect.Parallel，Effect.Parallel是一个core Effect类，它的update方法调用每个你要执行的effct效果，使用起来也很简单：

Effect.Parallel（effects,options）其中effects是一个你希望同时运行的effect数组，例如：

new Effect.Parallel（[
new Effect.Opacity(”testDiv1″,{from:1,to:0,sync:true}) ,
new Effect.Move(”testDiv1″,{x:20,y:30,sync:true})
],
{duration:2,delay:1}）
每个要执行的effect要把sync参数设置为true，否者它就自动运行了，这些effect将同时运行同时结束(由options参数中的duration和delay控制)，所以你在这些effect中不需要设置这些参数了

3，根据css来实现动画效果

new Effect.Morph(”testDiv1″,{style:”class2″})：就可以实现把testDIV1的className设置为class2，注意这个过程是一个动画效果，哈哈，自己试一试吧

其中Effect.Morph是一个core effect类，你可以像其他effect一样提供帧数，时间等参数

4，忘记说了的

Effect.ScopedQueue：任何sync参数为false的effect都是通过它来运行的，通过它可以把几个效果按照一定的时间顺序组合起来，一般在实现简单效果的时候很少使用