【笔记】JS动画效果（慕课）

一、运动框架实现思路

    1. 速度 改变值left、right、width、height、opacity。
    2. 缓冲运动 speed=目标位置与当前位置做减法再除以一个数字，则越到目标速度越慢。
    3. 多物体运动 每个物体设置用对象属性（object.timer）设置一个单独的定时器，以免多个物体产生争夺定时器的现象。
    4. 任意值变化 为startMove()加入一个新的参数，用于控制是改变宽还是高等，实现对任意值的控制。
    5. 链式运动 为startMove()加入一个新的参数，本例的链式运动是传入接下来要执行的startMove()函数，函数调用放在现startMove()的末尾，这样执行完之后会继续执行下一个函数。
    6. 同时运动 使用json
    
二、tips

    1. IE与火狐谷歌等浏览器在透明度上也有兼容问题。
        IE：CSS中，filter: alpha(opacity=50); JS中，obj.style.filter = 'alpha(opacity:' + alpha + ')';
        火狐：CSS中，opacity: 0.5; JS中，obj.style.opacity = alpha/100;
        
    2. 取得元素的所有样式，用样式名索引（中间用短线相连的改为驼峰式，如font-size在JS中写为fontSize）。IE与火狐谷歌等浏览器存在兼容问题。
        function getStyle (obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr]; // IE浏览器
            } else {
                return getComputedStyle(obj, false)[attr]; // 火狐浏览器
            }
        }
    利用获取样式可以获取正确的净宽高等样式。要与包含了边框和内外边距的offsetWidth分情况使用。
    
    3. 只要是多物体运动，则所有元素的属性都不要通用。
    
    4. offsetWidth/Height是包括了边框和内外边距的宽度/高度，而style.width是净宽度，所以混用时要注意。
    
    5. style.width可写作style['style']，这样就可以将width当做变量来改变。
    
    6. 使用setInterval，可能会多次触发，产生多个定时器，导致越来越快。解决方法是在定时器触发的函数开头先清除相应的定时器。
    
三、json（仅格式与用法）

    1. 定义格式 var json = {name:value, name2:value2};
    
    2. 取出值的方式
        for (var i in json) {
            alret(i); // 弹出i
            alert(json[i]); // 弹出i对应的值
        }
        
    3. 在函数中的用法
        函数定义时：function startMove(json) {}
        函数调用时：startMove({name1: value1, ......});
    
四、使用jQuery实现动画效果
    
    引入框架 <script src="js/jquery.js"></script>
        $(function () {
            $('#move a').mouseenter(function () {
                $(this).find('i').animate({top: "-25px", opacity: "0"}, 300, function () { // 300以毫秒为单位
                    $(this).css({top: "30px"});
                    $(this).animate({top: "20px", opacity: "1"}, 200)
                })
            })
        })
        
    
五、本教程封装好的运动框架

    想要完整地自己写一次，可是因为赶着学更多的东西，来不及这样做。预留，已存入待办记事本。