Jwalk

Jwalk - JavaScript Animation Library . Smaller , Faster , Stronger

<script type="text/javascript" src="http://liutian1937.github.io/Jwalk/v1.0/Jwalk.min.js"></script>

Jwalk是用来做什么的？

前端开发过程中经常会用到一些动画效果，比如某个div的放大，缩小，左右移动，实现这些效果都是通过Js设置元素的style样式，我们可能会借助Jquery或者其他脚本库提供的动画接口来更容易的实现相关效果。但是如果我们可能只会用到Jquery的动画效果，以及一些简单的选择器，那么（在天朝）加载这个脚本库就显得多余了。为什么在天朝就多余，国内的网络环境与网速是：你懂得！所以为了适应国情，封装了这个Mini版的动画库-Jwalk(名字可轻喷)，Min压缩版+Gzip=4K

所以时间单位都为ms，由于脚本计时器是队列执行方式，可能会产生阻塞问题导致时间不准确。所以采用CSS3的动画与采用JS方式上，动画速度与流畅性都会有差别。对低版本浏览器动画效果要求高的话需要对低版本浏览器单独设置动画时间。在Jwalk中为了减小动画速度的差距，我加入了代码：
params.speed = Unit.css3 ? params.speed : parseInt(params.speed/1.5) ;，一个1.5倍的时间差。

动画执行的方式采用Css3/Js Tween算法相结合的方式，对于高级浏览器采用css3执行动画效果，不支持css3的采用缓动函数，默认集成了（linear，ease-in，ease-out，ease-in-out）四种动画效果，如果需要更多效果，可以参考Easing functions，Easing Equations，JavaScript Tween算法及缓动效果。

Jwalk未压缩版本有粗糙的注释，大家可以扩展功能后自行压缩，欢迎尽情蹂躏。
时间匆忙，不足之处欢迎给出意见。Email：ok8008@yeah.net

普通属性：

多浏览器兼容，IE6-10，Ghrome，Firefox，Safari，Opera
支持CSS3的浏览器采用CSS3的Transition实现动画，效果更流畅
支持定义多个连续动画，支持按照自定义的动画顺序执行
常用动画，hide/show/toggle(显隐)，slideUp/slideDown/slideToggle(上下滚)

文艺属性：

animate修改CSS样式，支持数学运算符"+=","-="
定义速度，动画执行方式Tween，以及回调，animate(样式,速度,效果,回调)
普通控制：play(开始)，pause(暂停)，replay(重新开始)，reset(还原)
高级控制：cycle(动画循环/次数)，step(按照顺序执行/执行第N个动画)

屌丝属性：

支持EM->PX的转换，可以定义换算单位，默认16，即1em = 16px
增加Extend扩展函数，可以根据需求添加自定义动画
每个animate都有回调，并支持状态监测，start/pause/process/end
process进程，有开关，默认关闭，动画执行时回调当前CSS的属性值

Prev Next

上面demo是一个简单的左右滑动的效果，为了体现代码的简洁（嘿嘿），没有做成无缝的效果。滚动是由左右按钮控制，增减margenLeft的值（百分比形式）实现的动画效果。更多Demo

HTML ：

<div class="pure-g-r margin-box animateWrap">
	<a href="javascript:;" onclick="move('prev')" id="prevBtn" class="pure-button prev sansfont">Prev</a>
	<a href="javascript:;" onclick="move('next')" id="nextBtn" class="pure-button next sansfont">Next</a>
	<div id="animate" class="pure-u">
		<div class="bg-green pure-u"></div><div class="bg-blue pure-u"></div><div class="bg-red pure-u"></div><div class="bg-purple pure-u"></div>
	</div>
</div>

Javascript：

<script>
var $ = function(id){ return document.getElementById(id) || id };
var elem = $('animate'), prev = $('prevBtn'), next = $('nextBtn'), len = 4, cur = 0, per;
Jwalk(prev).hide();
function move(type){
	if(type == 'next'){
		cur = (cur < len - 1 ) ? cur + 1 : len -1;
		Jwalk(prev).show();
	}else if(type == 'prev'){
		cur = (cur > 1 ) ? cur - 1 : 0;
		Jwalk(next).show();
	};
	if(cur == 3){
		Jwalk(next).hide();
	}else if(cur == 0){
			Jwalk(prev).hide();
	};
	per = '-'+100*cur+'%';
	Jwalk(elem).animate({marginLeft:per},300).play();
}
</script>

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

Jwalk