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

  • 相关阅读:
    常用连链接命令行存储小工具
    switch case 跳转表
    抖音越狱版本App下载
    AutoLayout + UILabel布局
    ReplayKit2 有线投屏项目-反向Socket实现
    ReplayKit2 有线投屏项目总结
    直播相关-搭建直播流服务器nodejs
    难过!失眠!
    CAShapeLayer
    WebService相关概念介绍
  • 原文地址:https://www.cnblogs.com/GaoAnLee/p/5368798.html
走看看 - 开发者的网上家园