WEB开发网
开发学院网页设计JavaScript Script.aculo.us开发系列(二):EffectsAPI 阅读

Script.aculo.us开发系列(二):EffectsAPI

 2010-09-14 13:38:46 来源:WEB开发网   
核心提示:上篇文章介绍了及个简单的组合效果( Combine Effect),这篇文章介绍相关的API.由于每个Effect类都继承于Effect.Base,在Effect.Base类中定义了上次提到的默认选项(options)和基本方法,这些基本方法是:beforeSetup: 建立动画对象时调用该方法,接受当前效果对象obj

上篇文章介绍了及个简单的组合效果( Combine Effect),这篇文章介绍相关的API.

由于每个Effect类都继承于Effect.Base,在Effect.Base类中定义了上次提到的默认选项(options)和基本方法,这些基本方法是:

beforeSetup: 建立动画对象时调用该方法,接受当前效果对象obj为参数,所有的方法就接受这个参数.需要说明的是如果想取消当前效果,必须在boforeSetup阶段进行.

afterSetup:对象建立后调用,奇怪的是即便在beforeSetup阶段取消了当前的效果,这个方法也会执行.这可能是框架不太完善的地方,后面还有例子证明.

beforeUpdate:由于每一帧都调用update()方法,所以在每帧执行前都会调用beforeUpdate()方法.

afterUpdate:每帧执行后调用该方法.

beforeFinish:动画结束之前调用该方法

afterFinish:动画结束调用该方法

事件执行的顺序很显然:beforeSetup->afterSetup->beforeUpdate->afterupdate[->boforeUpdate->afterUpdate->......]->boforeFinish->afterFinish.

所有方法都带一个obj参数,这个obj参数的常用属性和方法

currentFrame属性: 当前帧数

options:当前动画的选项

state:当前状态:按照执行顺序分别是idle->running->finished

effects:返回核心对象的数组:每个effect都有element属性,可以返回作用的DOM元素

cancel():取消当前动画

取消当前动画

  var oAnimation=new Effect.Puff('imgPuffwithCancel',
    {
      beforeSetup:beforeAnimationSetupWithCancel,/**//*六个事件的执行顺序*/
      afterSetup:afterAnimationSetup,
      beforeUpdate:beforeAnimationUpdate,
      afterUpdate:afterAnimationUpdate,
      beforeFinish:beforeAnimation,
      afterFinish:afterAnimation,
      from:0.2,
      to:1
    }
  );
  $("msg").innerHTML="";
  _alert("Effect.Appear对象已经建立,当前状态:"+oAnimation.state);}
  
function beforeAnimationSetupWithCancel(obj)
{
  _alert("Effect.Appear对象将要安装(Setup),现在是取消的最好时机,当前状态:"+obj.state);
  obj.cancel();
  _alert("动画取消!");
}
  
function afterAnimationSetup(obj)
{
  /**//*即便在beforeAnimationSetup中取消了Animation该事件也会执行,但是在afterSetup时cancel不起作用*/
  _alert("Effect.Appear对象已经安装(Setup),即便取消了动画afterSetup事件也会执行,当前状态:"+obj.state);
  
}
  
function afterAnimation(obj)
{
  
  _alert("Animation has been Finished!Current State:"+obj.state);
  obj=obj.effects[0];/**//*注意Puff会注册两个Effects所以在取得动画源是需要使用*/
  _alert("currentFrame:"+obj.currentFrame+"nfinishedOn(ms):"+obj.finishOn+"nElement:"+obj.element.tagName+"#"+obj.element.id+"nDuration(s):"+obj.options.duration+"nFrom:"+obj.options.from+"nTo:"+obj.options.to);
}
上面的例子运行效果在这里,这个系列的所有例子都放在这个目录下,而且在不断的更新.如果需要源代码,给我Email:[email protected]

1 2  下一页

Tags:Script aculo us

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接