前端学习之慕课网--js绘制动画效果

前言
本来是国庆节的任务，结果国庆直接睡了7天~（捂脸）然后国庆回来就是各种事情，不过这依然阻止不了我对慕课女神的热爱~（撒花）~长假回来第一天就学习了《JS动画效果》
然后开始整理笔记~吼吼（我是个好孩纸~）

首先对这个课程的评价是超级好，vivianせんせい就是我的小目标~（哇咔咔），小白的我也能很好的理解这里面的思路和方法。大爱（~>~）
开始一本正经的时间了~

重点：
1. 简单的动画效果。（使用timer定时器做动画效果。）
2. 多物体同时运动。（使用for循环给每个对象附上函数和方法）
3. 使用json格式的数据来做同时运动。
4. 使用回调函数做链式运动。
5. 使用自己封装的getStyle函数的方法获取任意属性值。（第一，如果有border的话，会影响html对象的值。（因为当style文件里写的是style=200px的时候，整体对象的width=内容的宽度+border+padding）第二，透明度无法直接获取。）这个函数中用到了最实在的两个属性：1.currentStyle是针对IE浏览器的，getComputedStyle是针对于火狐浏览器的。

知识点：
1. 深刻学习了obj.style.Width和obj.offsetWidth的区别。（前者一般是写入样式的时候使用的，而它的宽是内容的宽度，而offsetWidth的宽则是整个对象的宽度。所以在有border和paddind的时候，千万要注意着两者的差距。这两个是不相等的。）
2. Style=”width:200px”;这句话写在div里面的时候（即内联样式），可以alert(obj.style.width);因为style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。所以如果是（嵌入样式和外联样式的话）写在css里面的话，则弹出的是空值。 前者alert出来的话obj.style.Width=200；而obj.offsetWidth=obj.style.Width+borde+padding。

贴代码
PS：Talk is cheap. Show me the code
第一段代码：
这是最基本的动画效果，通过一个定时器来控制属性的变化。

简单的动画效果

---

第二段代码：
该段代码是通过封装一个函数来达到获取html对象的属性值。（不管该属性值是内联样式还是外联样式）

function getStyle(obj,attr){
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }

最后总结
1.全局变量和局部变量；（在函数内部相当于一个整体，而js中设计的不污染外界参数的思想让变量声明的位置格外变得敏感，所以声明变量的时候一定要注意作用范围。）
2.参数和变量的关系；（作为参数传入的时候，一定要记住加引号作为字符串传入，除非是已声明的变量。）
3.动画效果重点是链式运动（回调函数）和同时运动（json格式）。
4.

待续。