Script.aculo.us开发系列(三):核心效果(CoreEffect)

所有的动画都是由基本的动画组合而成,在Effects中由一类动画叫Core Effects(核心动画),它是组成所有动画的基础,这篇文章介绍这些基本的动画,和它们组合使用最终形成的复杂动画.

1.Opacity

使用起来和前面提到的动画没有区别,只是有它的特别的选项:from/to:这两个参数都是float型而且介于0~1,所有的option中的from/to 都是如此,要注意的是Opacity是不透明度,所以默认值是0.0.

2.Move

3个特有的参数:x,y,mode,xy:移动的偏移量,mode 为"absolute"/"relative",两种模式运行起来没有什么区别,看源代码方知,只是为了防止在Opera浏览器下的一个Bug.

3.MoveBy

给Move多一个调用方式

//Move

//MoveBy

var oAnimation =new Effect.Highlight("divHighLight",

function finish(obj)

{

alert(obj.options.restorecolor);

}

6.scrollTo

应用该效果会慢慢的页面会慢慢滚动到制定的元素,参数如下:

offset:y轴偏差,仔细看代码发现scrollTo效果只滚动y轴,所以偏差也只有y轴方向的

7.Parallel

这是一个进行下一步开发的最重要的方法,作用就是并行的动画,组合效果(Combine Effect)无非是上面的动画最终用Parallel将其组合,才能形成如此酷的效果.

其构造函数参数是一个Effect的数组,和options,注意options作用在所有的动画上的,通常我们也只需要设置这里的参数,还有要注意的是Effect的option.sync都要设置为true.

var oAnimation=new Effect.Parallel(

[

new Effect.Move("imgParallel",{x:-100,y:100,sync:true}),

new Effect.Opacity("imgParallel",{from:0.0,to:0.9,sync:true})

],

{

transition:Effect.Transitions.linear,

duration:2.0

}

);
本文章的全部示例运行http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/CoreEffects.html

上面的例子已经可以开发自己的组合动画了,下一篇文章将会讨论效果开发的更高级话题