关于完美运动框架定义的flag应该怎么放位置？
weibo_张张张张张大仙呀_03578611
2016-08-09 10:59
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
// var json={a:12};json 格式
function startMove(obj, json, fn) {
clearInterval(obj.timer);//获取样式的方法（项目，属性，目标值）
obj.timer = setInterval(function () {
// var flag = true;//注意这个不能放到for循环里面！！！
for (var attr in json) {
var flag = true;
var icur = 0;//现在属性的值
//当属性为透明度的时候
if (attr == 'opacity') {
var icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Math.round 四舍五入的函数方法。
}
else {
var icur = parseInt(getStyle(obj, attr));
}
//获取速度
var speed = (json[attr] - icur) /10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//是否到达目标值
if (icur != json[attr]) {
flag = false;
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
obj.style.opacity = (icur + speed) /100;
}
else {
obj.style[attr] = icur + speed + 'px';//这里要注意！！
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}
}, 10.0);
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
<style>
#div1 {
width: 200px;
height: 200px;
position: relative;
background: yellow;
opacity: 0.5;
filter: alpha(opacity:50);
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function () {
startMove(oDiv, { width: 400, height: 400,opacity:100});
}
oDiv.onmouseout = function () {
startMove(oDiv, { width: 200, height: 200,opacity:50 });
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
定义的flag放在for循环里面和放在for循环外面为什么在显示的属性上有差异？放在外面可以正常运行，而放在里面的话。width，height的值就会变小？理论上不是放在里面和外面的效果是一样的吗？是什么原因而产生的差异？
1回答
-
- 喝牛奶对身体好
- 2016-08-10 00:55:51
经过本人多次测试，确认flag放在计时器内，for in循环前为好，之后将判断条件if(flag)放在for in外计时器内，完美框架就能实现了，否则都会有一些BUG。
最后按照你这个，我进行了四种尝试，效果如下：
把flag=true和判断if(flag)都放在for循环里面：
此时由于计时器内for循环每次开始flag为true，由于属性值为两个以上的时候有时不会同时到达目标值，会使得当某一个属性属性达到目标值后flag值已经为true，因此提前结束了定时器；
把flag=true放在计时器内for循环外，判断if(flag)放在for循环内：
效果跟第一个相似，发现属性值始终有一个不对，目测也是因为提前结束定时器的缘故；
把flag=true放在for循环内，判断放在计时器外面也只有一个属性值为正确，另一个有差异。
最后结论：判断语句放在循环内，当遍历属性时，有一个属性达到目标值后，就接着执行if(flag)的 语句，故定时器都会提前停止；flag=true放在循环内，对于每个属性都相当于有一个flag，故也会在有一个属性达到目标flag变为rue时停止。定义在外面才能使得所有的属性到目标值后flag值才改变。（个人理解）
JS动画效果
113925 学习 · 1443 问题
相似问题