一周学会Mootools 1.4中文教程:(6)动画

参数:
fps - (number:默认是50) 每秒的帧数.
unit - (string:默认是 false) 单位,可为 'px','em',或 '%'.
link - (string:默认是 ignore) 可以是 'ignore','cancel' 和 'chain'.
'ignore'-当请求正在执行之中时,新的请求将被忽略
'cancel'-当请求正在执行之中时,将立即取消当前执行中的请求,开始执行新的请求
'chain'-当请求正在执行之中时,将会把新的请求链接在当前请求之后,依次执行所有请求
duration - (number:默认是 500) 相应的持续时间,除了数字外还可以为以下值:
'short' - 250ms
'normal' - 500ms
'long' - 1000ms
transition - (function:默认是 'sine:in:out') 动画过渡效果,大家可以测试一下下边的效果看看.The equation to use for the effect see Fx.Transitions. Also accepts a string in the following form:
transition[:in][:out] - 如,'linear','quad:in','back:in','bounce:out','elastic:out','sine:in:out'

事件:
onstart - (function) 当动画开始时触发.
oncancel - (function) 当动画被取消时触发.
oncomplete - (function) 当动画结束时触发.
onchainComplete - (function) 如果使用了'chain'选项,则当所有的动画链结束时触发

方法:
start://用于触发动画
set://用于设置动画的参数
cancel://用于终止运行中的动画
resume://返回一个之前暂停的动画

示例:
var opt={
fps:60,
link:'chain',//ignore,cancel,chain
duration:'long',//'short':250ms;'normal':500ms;'long':1000ms
transition:'bounce:out',//'linear','quad:in','back:in','bounce:out','elastic:out','sine:in:out' - [:in][:out]
onStart:function(){console.log('开始!');},
onComplete:function(){console.log('结束后!');}
}
$('b').set('morph',opt).morph({'width':500,'height':300});

我们来演示一个补间动画的实例:

var myFx=new Fx.Tween('Content',{//建立补间动画的对象,同时预设参数
fps:60,
duration:'long'
});
myFx.set('tween',{unit:'%'});//继续添加参数
$('Content').addEvents({//给节点绑定动画
'mouseenter':f1,//鼠标进入后执行f1
'mouseleave':f2,//鼠标进入后执行f2
'click':f3//点击后执行f3
});
function f1(){//鼠标进入后给节点设css
myFx.set('background-color','#f00');
}
function f2(){//鼠标离开后用start触发动画,让节点的高度改变,改变的幅度是百分比
myFx.start('height',[20,200]);
}
function f3(){//鼠标点击后触发动画改变节点高度
myFx.start('height',[20,200]);
}

另外补间动画Tween为我们提供了两个方法,分别是fade和highlight,下边的例子分别演示他们的用法:

示例1:
$('myElement').fade('out');//淡出节点
$('myElement').fade(0.7);//改变节点透明度.

示例2:
$('myElement').highlight('#ddf');
$('myElement').highlight('#ddf','#ccc');

这两个例子对于我们要实现一些简单的效果时会非常有用.没必要设置一大堆的参数.

有了前边的补间动画我们再来学一种变形动画:

var myFx=new Fx.Morph('Content',{//建立变形动画对象同时设置参数,Content是节点
fps:60,
duration:'long'
});
myFx.set('Content',{duration:'long',transition:'bounce:out'});//继续设置动画参数
$('Content').addEvents({//给节点绑定事件
'mouseenter':f1,//鼠标进入后执行f1
'mouseleave':f2,//鼠标离开后执行f2
'click':f3//鼠标点击后执行f3
});
function f1(){//鼠标进入后给节点设置初始css
myFx.set({
'height':200,
'width':200,
'background-color':'#f00',
'opacity':0.8
});
myFx.morph({height:100,width:100});
}
function f2(){//鼠标离开后触发动画,改变节点的高和宽
myFx.start({
'height':[10,100],
'width':[900,300]
});
}
function f3(){//鼠标点击后触发动画,改变节点的高,宽,背景色,透明度.
myFx.start({
'height':[200,900],
'width':[200,600],
'background-color':'#00f',
'opacity':0.2
});
}

好了,我已经把mootools的两大动画特效呈现在你的面前了,参数比较多需要多练习才能熟能生巧.童鞋们加油吧.如果有问题可以进入QQ群一起讨论(16648471)

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠