运动就是数据的有规律的变化。 所以任何属性，用数值来表示，都可以看成是运动。
来源 渡一笔记 匀速运动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var div = document.getElementsByTagName('div')[0];
var oBtn = document.getElementsByTagName('button')[0];
function move (dom,target,ispeed) {
var ispeed = ispeed || 8;
if(target - dom.offsetLeft > 0){
ispeed = Math.abs(ispeed);
}else {
ispeed = -Math.abs(ispeed);
}
dom.timer = setInterval(function () {
if (Math.abs(target - dom.offsetLeft) < Math.abs(ispeed)) {
clearInterval(dom.timer);
dom.style.left = target + 'px';
} else{
dom.style.left = dom.offsetLeft + ispeed + 'px';
}
},30);
}
oBtn.onclick = function (e) {
move(div,300);
}
缓冲运动 版本1.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function move (dom,target,ispeed) {
var ispeed;
dom.timer = setInterval(function () {
var iCur = dom.offsetLeft;
ispeed = (target - iCur) / 7;
if (Math.abs(target - iCur) <= 2) {//这个条件填什么数字都不太好。都不一定能停掉计时器
//if（Math.abs(speed) < 1）{ 这么写是一定能停掉计时器 但最后不自然。
clearInterval(dom.timer);
dom.style.left = target + 'px';
} else{
dom.style.left = dom.offsetLeft + ispeed + 'px';
}
},30);
}
理论上target - iCur无限接近0
但offsetLeft 会取整，所以无法接近0；
缓冲运动后插入版，更改停止条件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function move (dom,attr,target) {
var ispeed;
var last = 'a';
var count = {};
dom.timer = setInterval(function () {
var iCur = parseInt(getStyle(dom,attr));
dom.style[attr] = parseInt(getStyle(dom,attr)) + ispeed + 'px';
ispeed = (target - iCur) / 7;
if (last == target - iCur && count[last] >= 5 && ispeed < 1) {
clearInterval(dom.timer);
dom.style[attr] = target + 'px';//可有可无
console.log(123);
} else{
last = target - iCur;
if(!count[last]){
count[last] = 1;
}
count[last]++;
}
},30);
}
思路是，记录最后的位置是否相同。
缓冲运动 版本2.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function move (dom,target) {
var ispeed;
dom.timer = setInterval(function () {
var iCur = dom.offsetLeft;
ispeed = (target - iCur) / 7;
ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
console.log(ispeed);
if (target - iCur == 0) {
clearInterval(dom.timer);
dom.style.left = target + 'px';//可有可无
} else{
dom.style.left = dom.offsetLeft + ispeed + 'px';
}
},30);
}
版本3.0 根据2.0 兼容其他属性（数值）的变化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function getStyle (dom,attr) {//用来获取样式。
if(dom.currentStyle){
return dom.currentStyle[attr];
}else{
return window.getComputedStyle(dom,null)[attr];
}
}
function move (dom,target,attr) {
var ispeed;
dom.timer = setInterval(function () {
var iCur = parseInt(getStyle(dom,attr));
ispeed = (target - iCur) / 7;
ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
console.log(iCur);
if (target - iCur == 0) {
clearInterval(dom.timer);
dom.style[attr] = target + 'px';//可有可无
} else{
dom.style[attr] = parseInt(getStyle(dom,attr)) + ispeed + 'px';
}
},30);
}
这个版本无法兼容opacity
第一，opacity的取值范围是 0-1
第二，opacity是没有px单位的
版本4.0 opacity版
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function move (dom,target,attr) {
var ispeed;
var target = target * 100;
dom.timer = setInterval(function () {
var iCur = parseFloat(getStyle(dom,attr)) * 100;
ispeed = (target - iCur) / 7;
ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
console.log(iCur);
if (target - iCur == 0) {
clearInterval(dom.timer);
dom.style[attr] = target / 100;//可有可无
} else{
dom.style[attr] = (iCur + ispeed) / 100;
}
},30);
}
oBtn.onclick = function (e) {
move(div,0.5,'opacity');
}
版本5.0 兼容opacity版
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function move (dom,target,attr) {
var ispeed;
var target = target * 100;
dom.timer = setInterval(function () {
var iCur = parseFloat(getStyle(dom,attr)) * 100;
ispeed = (target - iCur) / 7;
ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
console.log(iCur,ispeed);
if (target - iCur == 0) {
clearInterval(dom.timer);
console.log(111);
} else{
if (attr == 'opacity') {
dom.style[attr] = (iCur + ispeed) / 100;
} else{
ispeed = ispeed > 0 ? Math.ceil(ispeed/100) : Math.floor(ispeed/100);
dom.style[attr] = iCur/100 + ispeed + 'px';
}
}
},30);
版本6.0 跟5.0很类似。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function move (dom,target,attr) {
var ispeed;
if(attr == 'opacity'){target = target * 100}
dom.timer = setInterval(function () {
if(attr == 'opacity'){
var iCur = parseFloat(getStyle(dom,attr)) * 100;
}else{
var iCur = parseInt(getStyle(dom,attr));
}
ispeed = (target - iCur) / 7;
ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
console.log(iCur,ispeed);
if (target - iCur == 0) {
clearInterval(dom.timer);
console.log(111);
} else{
if (attr == 'opacity') {
dom.style[attr] = (iCur + ispeed) / 100;
} else{
dom.style[attr] = iCur + ispeed + 'px';
}
}
},30);
}
版本7.0 陈老师称之为 多物体多值链式框架。。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
根据6.0
var div = document.getElementsByTagName('div')[0];
var oBtn = document.getElementsByTagName('button')[0];
var span = document.getElementsByTagName('span')[0];
function getStyle (dom,attr) {
if(dom.currentStyle){
return dom.currentStyle[attr];
}else{
return window.getComputedStyle(dom,null)[attr];
}
}
function move (dom,cssOption,callback) {
var ispeed;
var flags = {};
var target = {};
dom.timer = setInterval(function () {
var stop = true;
for(var attr in cssOption) {
if(attr == 'opacity'){
var iCur = parseFloat(getStyle(dom,attr)) * 100;
if(!flags[attr]) {// 只是为了只执行一次。
target[attr] = cssOption[attr] * 100;
flags[attr] = true;
}
}else{
var iCur = parseInt(getStyle(dom,attr));
target[attr] = cssOption[attr];
}
ispeed = (target[attr] - iCur) / 7;
ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
if (target[attr] - iCur !== 0) {
stop = false;
if (attr == 'opacity') {
dom.style[attr] = (iCur + ispeed) / 100;
} else{
dom.style[attr] = iCur + ispeed + 'px';
}
}
if(stop){
clearInterval(dom.timer);
typeof(callback)=="function" ? callback() : '';
console.log(111);
}
}
},30);
}
var obj = {
width : 200,
height : 300,
opacity : 0.6,
left : 200,
top : 200
}
oBtn.onclick = function (e) {
move(div,obj,move.bind(window,span,obj));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
根据5.0
var div = document.getElementsByTagName('div')[0];
var oBtn = document.getElementsByTagName('button')[0];
var span = document.getElementsByTagName('span')[0];
function getStyle (dom,attr) {
if(dom.currentStyle){
return dom.currentStyle[attr];
}else{
return window.getComputedStyle(dom,null)[attr];
}
}
function move (dom,cssOption,callback) {
var ispeed;
var flag = {};
var target = {};
dom.timer = setInterval(function () {
var stop = true;
for (var attr in cssOption) {
if(!flag[attr]) {// 为了只执行一遍
target[attr] = cssOption[attr] * 100;
flag[attr] = true;
}
var iCur = parseFloat(getStyle(dom,attr)) * 100;
ispeed = (target[attr] - iCur) / 7;
ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
if (target[attr] - iCur !== 0) {
stop = false;
if (attr == 'opacity') {
dom.style[attr] = (iCur + ispeed) / 100;
console.log(iCur,ispeed);
} else{
ispeed = ispeed > 0 ? Math.ceil(ispeed/100) : Math.floor(ispeed/100);
dom.style[attr] = iCur/100 + ispeed + 'px';
}
}
if(stop) {
clearInterval(dom.timer);
typeof(callback)=="function" ? callback() : '';
console.log(111);
}
}
},30);
}
var obj = {
width : 200,
height : 300,
opacity : 0.5,
left : 200,
top : 200
}
oBtn.onclick = function (e) {
move(div,obj,move.bind(window,span,obj));
}
