46、JavaScript的运动----完美运动框架的实现----注意运动停止的判断的技巧

本文链接：https://blog.youkuaiyun.com/zbw18297786698/article/details/51775073

1、完美运动框架

多个值同时变化

• setStyle同时设置多个属性

– 参数传递

» Json的使用

» for in遍历属性

• 运用到运动框架

• 检测运动停止

–标志变量

•例子：伸缩同时淡入淡出的菜单

2、运动框架的总结

运动框架演变过程

• startMove(iTarget) 运动框架

• startMove(obj, iTarget) 多物体

• startMove(obj, attr, iTarget) 任意值

• startMove(obj, attr, iTarget, fn) 链式运动

• startMove(obj, json) 多值运动

• startMove(obj, json, fn) 完美运动框架

3、测试代码

3.1 move.js

/**
 * 可以方便的获取到非行间样式的数值
 * @param {Object} obj
 * @param {Object} attr
 */
function getStyle(obj, attr) {
	if (obj.currentStyle) {
		return obj.currentStyle[attr];
	} else {
		return getComputedStyle(obj, false)[attr];
	}
}
/**
 * 要注意运动停止条件的判断
 * @param {Object} obj
 * @param {Object} json
 * @param {Object} fn
 */
function startMove(obj, json, fn) {
	clearInterval(obj.timer);
	obj.timer = setInterval(function() {
		var bStop = true; //这一次运动就结束了——所有的值都到达了
		for (var attr in json) {
			//1.取当前的值ֵ
			var iCur = 0;

			if (attr == 'opacity') {
				iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
			} else {
				iCur = parseInt(getStyle(obj, attr));
			}

			//2.算速度
			var iSpeed = (json[attr] - iCur) / 8;
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

			//3.检测停止
			//要注意,完美运动框架运动的停止的检测,与单个属性停止的检测不一样
			//这个要等所有的属性,都到了后，才停止运动
			//所以有一个属性值没到的话,将标志运动停止的变量bStop设置为false
			if (iCur != json[attr]) {
				bStop = false;
			}

			if (attr == 'opacity') {
				obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
				obj.style.opacity = (iCur + iSpeed) / 100;
			} else {
				obj.style[attr] = iCur + iSpeed + 'px';
			}
		}
		//4、对于运动的判断
		if (bStop) {
			clearInterval(obj.timer);

			if (fn) {
				fn();
			}
		}
	}, 30)
}

3.2 html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; filter:alpha(opacity: 30); opacity:0.3;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="move2.js"></script>
<script>
window.οnlοad=function ()
{
	var oBtn=document.getElementById('btn1');
	var oDiv=document.getElementById('div1');
	
	oBtn.οnclick=function ()
	{
		startMove(oDiv, {width: 102, height: 200, opacity: 100});
	};
};
</script>
</head>

<body style="background:#0F0;">
<input id="btn1" type="button" value="开始运动" />
<div id="div1">
</div>
</body>
</html>