Script.aculo.us开发系列(二):EffectsAPI
2007-09-13 08:38
309 查看
上篇文章介绍了及个简单的组合效果( 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():取消当前动画
);
$("msg").innerHTML="";
_alert("Effect.Appear对象已经建立,当前状态:"+oAnimation.state);}
function beforeAnimationSetupWithCancel(obj)
function afterAnimationSetup(obj)
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:yanghengfeng@163.com.
例子旨在说明问题,很明显afterAnimation不会执行,还得多说几句,对于特定的效果类,可能会由独有的接口,在使用的时候可以参阅源代码
由于每个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',);
$("msg").innerHTML="";
_alert("Effect.Appear对象已经建立,当前状态:"+oAnimation.state);}
function beforeAnimationSetupWithCancel(obj)
function afterAnimationSetup(obj)
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:yanghengfeng@163.com.
例子旨在说明问题,很明显afterAnimation不会执行,还得多说几句,对于特定的效果类,可能会由独有的接口,在使用的时候可以参阅源代码
相关文章推荐
- Script.Aculo.Us开发系列(一):起步
- Script.aculo.us开发系列(五):Prototype封装的艺术
- Script.aculo.us开发系列(八):使用DropDrag定义拖拽行为
- Script.aculo.us开发系列(六):AutoComplete控件
- Script.aculo.us开发系列(9):Slider控件的使用
- Script.aculo.us开发系列(三):核心效果(CoreEffect)
- Script.aculo.us开发系列(七):InPlaceEditor控件的使用
- Script.aculo.us开发系列全集
- Script.aculo.us开发系列(四):动画弹出菜单的实现-开发自己的动画
- script.aculo.us 1.8 preview放出来了
- script.aculo.us概述
- script.aculo.us 1.8 preview放出来了
- Prototype and script.aculo.us: You Never Knew JavaScript Could Do This!
- script.aculo.us代码分析(一)
- Chapter 4. Introducing script.aculo.us
- script.aculo.us组合效果
- Script.aculo.us 部分特效展览
- Prototype入门_chp2 - [Prototype/script.aculo.us]
- Script.aculo.us InPlaceEditor 使用示例
- script.aculo.us之页面元素呈现特效