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开始。
支持的方法:
animate(样式,时间,动画效果,回调)
:定义动画,默认按照定义顺序执行动画,返回对象可级联play/pause/stop()
:播放/暂停/停止动画replay()
:从当前位置重新播放动画,不会继续原来的动画cycle(循环次数/非必须)
:循环动画,一次play完全执行代表一次循环,无参数代表无限循环,可级联step(顺序/或者第几个动画)
:按照自定义顺序(animate定义的顺序)执行,或者执行固定的第几个动画reset()
:重置动画,Element对象的样式也会重置到最后一次重写animate的时候extend(对象)
:扩展方法,可以实现自定义动画toggle(速度,回调)
:显示/隐藏进行切换,另外有hide/show(速度,回调)slideToggle(速度,回调)
:显示/隐藏进行切换,另外有hide/show(速度,回调)
回调数据以及监听:
- 通过判断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.