Script.Aculo.Us 开发系列是我最近的一些新的发现，在这个系列中，我将会和大家一起分享自己在Script.Aculo.Us中的开发经验,由于目前中文的相关资料还很少,希望能尽绵薄之力吧,欢迎大家参与讨论.
现在开始
Script.Aculo.Us框架是基于Prototype框架的一个非常优秀的开源Ajax框架,如果对Prototype框架还不是很了解.可以参考我的Prototype1.5.0 APIs这篇文章,在这篇文章里,我翻译了1.5.0版本的官方文档,还做了一个简单的API搜索,希望能对你的开发有些益处.
Script.Aculo.Us里面封装了许多控件:大家常见的AotuComplete,Accordion,Slider等,很多的动画效果,还有拖拽,你只需要简单的几行代码就可以实现上面的效果.
顺便提下,框架的名字有些奇怪,其实就是因为他们的官方网站就是Http://Script.Aculo.Us,和Prototype一样,MIT的人才们的杰作.所以要开始起步的话自然是县到官方网站了去下载最新版本的代码了,下载完的代码解压会有lib,src,test文件夹和一些没有后缀的文件夹,lib文件夹中会有支持当前版本的Prototype.js,src文件夹中会有7个js的文件,将上述的8个js文件提取,放在你的项目中,就一切OK了.引用到文件中的方法
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous.js?load=effects,controls"></script>在路径后面load=effects,controls意思是只加载effects.js和controls.js两个文件,这样,用不到的模块就不会加载,节省了网络流量,如果不添加load,默认的会加载builder,effects,dragdrop,controls,slider5个文件,也可以直接每个文件单独加载js文件,如:
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/effects.js"></script>
上面的代码直接加载effects.js, 程序运行的时候也不会出问题.再写一行js
<script type="text/javascript">
function puff()
{
var oAnimation=new Effect.Puff("imgPuff");
}
Event.observe($('btnTest'),'click',puff);
</script>
运行一下,一个非常酷的效果就出来了.注意所写的代码要在window.onload事件后才可以运行,否则会报错,原因很简单,只有在window.onload之后DOM才初始化.
这样类似的类还有Appear,Fade,BlindUp,BlindDown,SwitchOff,DropOut,Shake,SlideDown,SlideUp,Squish,Grow12种,这些动画在Script.Aculo.Us中叫做组合动画(Combine Effects),是相对于核心动画(Core Effects),CoreEffects在下篇中会由介绍.
使用参数
在每个类的构造函数中,第一个参数是应用效果的元素ID,第二个是一个Json对象,默认为
Effect.DefaultOptions = {
transition: Effect.Transitions.sinoidal,
duration: 1.0, // seconds
fps: 60.0, // max. 60fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
}
参数说明
- transition:关于算法 Enum类型:sinoidal(默认),linear(线性),reverse(1-x函数),flicker,wobble,pulse,none,full ,这些参数其实都是一个关于pos的函数,返回值在0~1之间
- duration: 动画持续时间:默认1.0秒
- fps:每秒帧数,默认60
- sync:异步,在Parallel动画时设置为true,一般为false
- from /to:始末偏移比值
- delay:执行动画之前停留事件
- queue:'parallel'
new Effect.Puff("imgPuff",{delay:1.0,duration:1.5});
执行动画之前停留1.0s,整个动画持续1.5s
上面的参数适用与所有的动画(包括Core Effects),需要说明的是对于某种动画都由独有的一些参数,在使用的时候请参阅源代码
效果实现
Effect将所有的动画转换为始末状态,不管是颜色,像素,透明度,首先计算出动画偏移量offset(s),根据持续事件和每秒帧数计算出.
offsetPerFrequency=offset/(duration*fps)
CurrentState(pos)=OriginalState+(OriginalState-FinnalState)*transition(pos)
在每帧中调用了update()方法重写视图, 这样动画就出来了