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
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:末状态的比例,该参数不能空

//Scale的两种调用方式
var oAnimation=new Effect.Scale("imgTest",200);
//比例200,即放大一倍

    var oAnimation=new Effect.Scale("divScale2",    {
        afterFinish:finish,
        scaleTo:200//percentage to enlarge
        /*This is the Default option*/
        scaleX:true,
        scaleY:true,
        scaleContent:true,
        scaleFromCenter:true,
        scaleMode: 'contents',        // 'box' or 'contents' or {} with provided values
        scaleFrom: 100    
        
    });

5.HightLight

这个效果专门用于改变元素的背景颜色,参数如下

• startcolor:开始的背景色, 属性形似"#12345f",和css样式一样
• endcolor:最后的背景色
• keepBackgroundImage:是否保持背景图片,默认为false
• restorecolor:是否存储最开始的背景色,默认为true

    var oAnimation =new Effect.Highlight("divHighLight",
    {
        startcolor:'#cbcbcb',
        endcolor:'#000000',
        duration:2,
        keepBackgroundImage:true,
        restorecolor:true,
        afterFinish:finish
    });


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

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