动画类功能简介-风琴效果菜单实现

DK 于2010,04,12发表 | 1 评论 »

经过一段时间的修改以及反复的测试，这个动画类终于基本实现了计划的功能。主要包括常用的向上闭合，向下展开，高度宽度同时闭合以及展开，背景色改变（常用的黄退效果），透明度改变，以及一个更为通用的包含位置，尺寸，背景色，透明度等等同时变化的方法。请点击查看Demo页面。

这个动画类主要包含的方法包括：

  1. //通用的动画方法，参数为一个json类型的样式表，以及一个回调函数（可为空）
  2. //样式表格式：{width:'100px',height:'100px',backgroundColor:'#f00',opacity:'0.5'}变化的样式以及值可自行选择
  3. animate (styles,callBackFunc);
  4. //向下展开，参数为回调函数（可为空）
  5. slideDown(callBackFunc);
  6. //向上闭合，参数为回调函数（可为空）
  7. slideUp(callBackFunc)
  8. //宽度高度同时展开，参数为回调函数（可为空）
  9. show(callBackFunc)
  10. //宽度和高度同时闭合，参数为回调函数（可为空）
  11. hide(callBackFunc)
  12. //背景色改变，参数为结束的颜色值和开始的颜色值（可为空）
  13. //颜色值为#fff，#ffffff，rgb(255,255,255)三种形式均可
  14. changeColor(endColor,beginColor);

当然你也可以从代码层面上改变运动的公式，选择是二次缓动或者更高次的缓动等等，你还可以改变参数d的大小，d越大动画持续的时间越长，限于时间问题我这里没有做一个显式的参数对此进行修改，下个版本的会增加相应的控制方法。

调用的时候通过mo对象调用例如div的ID为myDiv调用的时候应如下调用：

  1. //将DIV向上闭合
  2. mo('myDiv').slideUp();
  3. //将DIV的left值改为40px，透明度改为0.5，背景色改为绿色
  4. mo('myDiv').animate({left:'240px',opacity:'0.2',backgroundColor:'#0f0'});
  5. //将DIV向上闭合，动画完毕后提示'over'
  6. mo('myDiv').slideUp(function(){alert('over');});
  7. //将DIV的背景色从黄色改为白色
  8. mo('myDiv').changeColor('#fff','#ff0');

这里用这个动画类做了一个简单的风琴效果菜单，请点击查看。

其实做着做着感觉就有点跟jQuery类似了，jQuery的这部分代码我还没读，不知道它是如何实现的。其实这个动画类主要是为了练习一下它的实现，同时也方便处理简单动画效果时使用，效率可能并不高，以后可能还会有所改动和改良。

点击下载：motion类源代码

如果您有什么更好的想法或意见请不吝赐教！c

转载请注明原文出处《动画类功能简介-风琴效果菜单实现》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。

标签: , , | 分类： Javascript, 编程 |

一条回复 发表于 “动画类功能简介-风琴效果菜单实现”上

  1. KOEN301 says:
    2010/09/19 at 12:08 am

    很棒~~
    学习了

    [回复]

我要评论