一周学会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 1.4中文教程:(6)动画

相关文章