一周学会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)

相关课程:
一周学会Mootools 1.4中文教程:序论
一周学会Mootools 1.4中文教程:(1)Dom选择器
一周学会Mootools 1.4中文教程:(2)函数
一周学会Mootools 1.4中文教程:(3)事件
一周学会Mootools 1.4中文教程:(4)类型
一周学会Mootools 1.4中文教程:(5)Ajax
一周学会Mootools 1.4中文教程:(6)动画
一周学会Mootools 1.4中文教程:(7)汇总收尾

其他关于Mootools 1.4的文章:
我写的Lightbox效果插件，基于MooTools 1.4
我写的万年历插件(含天干地支,农历,阳历,节气,各种节假日等)，基于MooTools 1.4
我写的类似本站首页左上角的菜单的效果插件，基于MooTools 1.4
Mootools中delay这个延迟函数的高级用法
Mootools中使用bind给函数绑定对象
Mootools中使用extend和implement给你的函数扩展功能或方法
自己写个扩展把Mootools的语法改的和Jquery的语法一模一样
Mootools1.4中自定义事件
用Mootools1.4写了一个随着鼠标移动而背景图也跟着移动的东西