1 <script>
2 window.addEventListener('load', function (ev) {
3 var box = myTool.$('box');
4
5 myTool.$('btn').addEventListener('click', function () {
6 buffer(box, { 'left': 900, 'top': 500, 'width': 600, 'height': 400}, function () {
7 buffer(box, { 'left': 100, 'top': 100, 'width': 50, 'height': 50}, function () {
8 buffer(box, { 'left': 600, 'top': 500, 'width': 300, 'height': 400}, null)
9 });
10 });
11 });
12 });
13
14 /**
15 * 缓动动画函数
16 * @param {Object}eleObj
17 * @param {Object}json
18 * @param {Function}fn
19 */
20 function buffer(eleObj, json, fn) {
21 // 1.1 先清后设
22 clearInterval(eleObj.timer);
23
24 // 1.2 定义变量
25 var speed = 0, begin = 0, target = 0, flag = false;
26
27 // 1.3 设置定时器
28 eleObj.timer = setInterval(function () {
29 // 标志 (标签的所有属性有没有执行完动画)
30 flag = true;
31 for(var key in json){
32 // 获取要做动画属性的初始值
33 begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 0;
34 target = parseInt(json[key]);
35 console.log('begin:' + begin);
36
37 // 2.3 求出步长
38 speed = (target - begin) * 0.2;
39 speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
40
41 // 2.4 动起来
42 eleObj.style[key] = begin + speed + 'px';
43
44 // 2.5 判断
45 if (begin !== target) {
46 flag = false;
47 }
48 }
49
50 // 1.4 清除定时器
51 if(flag){
52 clearInterval(eleObj.timer); //解决了只要一个值满足就可以的情况
53 // 开启另一组动画
54 /* if(fn){
55 fn();
56 }*/
57 fn && fn();
58 }
59 }, 40);
60 }
61 </script>
