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

痛定思痛。 2022-09-22 04:58 137阅读 0赞

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>