先看一下动画的参数设置:
参数: 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 }); }