Jwalk(element, params)

Initialize Jwalk script and set up some basic parameters .

Jwalk初始化

为了减小学习成本,Jwalk的参数采用同Jquery相同的写法,并支持链式操作。如Jwalk(elem).animate().play();

初始化Jwalk需要两个参数,
第一个是Element对象(参数必须),可通过document.getElementById(id)获取;
第二个参数是修改初始化的默认设置(参数可选),可设置选项:

  • openProcess : false, //是否开启时时进程,消耗性能,默认关闭
  • easing : 'linear', //默认动画效果
  • em2px : 16 ,//em与px转换单位,默认1em = 16px
  • interval : 0 //两个animate动画之间的时间间隔

Code:

var elem = document.getElementById('animate');
Jwalk(elem,{
    openProcess : true,
    easing : 'linear',
    em2px : 10,
    interval : 400
});
//如果采用默认设置的话直接
Jwalk(elem)

不同与Jquery的地方是,jquery直接定义animate即可执行动画,Jwalk需要定义animate之后执行play/replay/cycle()方法才会执行。
如果有多个animate执行,建议初始化的时候进行animate定义。实现控制部分与初始化分离,初始化animate后,可以通过step()设置执行顺序,step参数从0开始。

支持的方法:

回调数据以及监听:

  • 通过判断isAnimate来确定动画是否在执行中
  • animate的回调函数接收数据data,根据data.status判断动画状态,一共四种状态start,process,pause,end
  • 如果设置openProcess为true的时候,data中包含即时的css样式,可以通过data.result获取
  • toggle/hide/show,slideToggle/slideUp/slideDown的回调函数中没有状态的判断,回调函数在会动画执行完后触发。

写个库文档,正好用了下Yahoo的前端框架Pure Css
试用感受:轻量级,够简洁,大厂产品果然霸气!

GitHub Project
© 2013 XxOo. All rights reserved.