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

来源：互联网发布：同性电影推荐知乎编辑：程序博客网时间：2024/04/19 12:06

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设置为falseif (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.onload=function (){var oBtn=document.getElementById('btn1');var oDiv=document.getElementById('div1');oBtn.onclick=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>

0 0