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

核心提示：所有的动画都是由基本的动画组合而成,在Effects中由一类动画叫Core Effects(核心动画),它是组成所有动画的基础,这篇文章介绍这些基本的动画,和它们组合使用最终形成的复杂动画.1.Opacity使用起来和前面提到的动画没有区别,只是有它的特别的选项:from/to:这两个参数都是float型而且介于0~1

所有的动画都是由基本的动画组合而成,在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
var oAnimation=new Effect.Move("imgMove",{x:100,y:100,mode:'relative',afterFinish:finish});
　　
//MoveBy
var oAnimation=new Effect.MoveBy("imgMoveBy",100,100,{afterFinish:finish});

4.Scale

产生形变的效果,参数如下:

scaleX: true/false 是否拉伸X轴方向,默认为true

scaleY: true/false 是否拉伸Y轴方向,默认为true

scaleContent: true/false 是否拉伸元素的子元素,默认为true

scaleFromCenter: true/false 是否以中心为基点,默认为false

scaleMode: "box"/"contents'" 默认为box使用box意味着计算元素坐标将元素拉伸,"contents"模式下只将内容拉伸,将内容拉伸只是将字体拉伸 ,然后把外面的元素撑大,两者在运行时是由区别的,可以参见实例

scaleFrom: 0~100 拉伸的初始比例,默认为100

scaleTo:末状态的比例,该参数不能空