## 缓动动画
### 三个函数
缓慢动画里，我们要用到三个函数，这里先列出来：
- Math.ceil() 向上取整
- Math.floor() 向下取整
- Math.round(); 四舍五入
### 缓动动画的原理
缓动动画的原理就是：在移动的过程中，步长越来越小。
设置步长为**：目标位置和盒子当前位置的十分之一**。用公式表达，即：
```
盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置)/ 10；
```
代码举例：
```html
```
效果：
### 缓慢动画的封装（解决四舍五入的问题）
我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了：
原因是：JS在取整的运算时，进行了四舍五入。
我们把打印396.04px这个left值打印出来看看：
我么发现，通过`div.style.left`获取的值是精确的，通过`div.offsetLeft`获取的left值会进行四舍五入。
此时，我们就要用到取整的函数了。
通过对缓动动画进行封装，完整版的代码实现如下：
```html
```
实现效果：
## scroll 家族的组成
当我们用鼠标滚轮，滚动网页的时候，会触发window.onscroll()方法。效果如下：（注意看控制台的打印结果）
### 1、ScrollWidth 和 scrollHeight
获取盒子的宽高。调用者为节点元素。不包括 border和margin。如下：
- scrollWidth = width + padding;
- scrollHeight = height + padding;
scrollHeight有一个特点：如果文字超出了盒子，高度为内容的高（包括超出的内容）；不超出，则是盒子本身高度。
举例：
```html
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
```
打印结果：
### 2、scrollTop 和 scrollLeft
网页被卷去的头部和左边的部分。
比如说，一个网页往上滚动的时候，上面的部分自然被浏览器遮挡了，遮挡的高度就是scrollTop。
scrollTop 这个属性的写法要注意兼容性，如下。
（1）如果文档没有 DTD 声明，写法为：
```javascript
document.body.scrollTop
```
在没有 DTD 声明的情况下，如果不是这种写法，chrome浏览器认不出来。
（2）如果文档有 DTD 声明，写法为：
```javascript
document.documentElement.scrollTop
```
在有 DTD 声明的情况下，如果不是这种写法，IE678认不出来。
综合上面这两个，就诞生了一种兼容性的写法：
```javascript
document.body.scrollTop || document.documentElement.scrollTop //方式一
document.body.scrollTop + document.documentElement.scrollTop //方式二
```
另外还有一种兼容性的写法：`window.pageYOffset` 和 `window.pageXOffset`。这种写法无视DTD的声明。这种写法支持的浏览器版本是：火狐/谷歌/ie9+。
综合上面的几种写法，为了兼容，不管有没有DTD，**最终版的兼容性写法：**
```javascript
window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
```
### 判断是否已经 DTD声明
方法如下：
```javascript
document.compatMode === "CSS1Compat" // 已声明
document.compatMode === "BackCompat" // 未声明
```
### 将 scrollTop 和 scrollLeft封装为 json
将 scrollTop 和 scrollLeft封装为一个方法，名叫scroll()，返回值为 json。json里的键为 top 和 left。以后就直接调用json.top 和json.left就好。
代码实现：
```html
```
上方代码中，函数定义的那部分就是要封装的代码。另外还有一种较为复杂的封装方式：
```javascript
function scroll() { // 开始封装自己的scrollTop
if(window.pageYOffset !== undefined) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
```
## 获取 html 文档的方法
获取title、body、head、html标签的方法如下：
- `document.title` 文档标题；
- `document.head` 文档的头标签
- `document.body` 文档的body标签；
- `document.documentElement` （这个很重要）。
`document.documentElement`表示文档的html标签。也就是说，基本结构当中的 `html 标签`而是通过`document.documentElement`访问的，并不是通过 document.html 去访问的。
## scrollTop 举例：固定导航栏
完整版代码实现：
（1）index.html：
```html
```
上方代码中，有一个技巧：
```javascript
main.style.paddingTop = middle.offsetHeight + "px";
```
仔细看注释就好。
（2）tools.js：
```javascript
/**
* Created by smyhvae on 2018/02/03.
*/
function scroll() { // 开始封装自己的scrollTop
if (window.pageYOffset !== undefined) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if (document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
```
实现效果：
工程文件：
- 2018-02-03-scrollTop固定导航栏.rar
## window.scrollTo()方法举例：返回到顶部小火箭
（1）index.html：
```html
我是最顶端.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
```
（2）tools.js:
```javascript
/**
* Created by smyhvae on 2015/12/8.
*/
//函数：获取scrollTop和scrollLeft的值
function scroll() { // 开始封装自己的scrollTop
if (window.pageYOffset != null) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if (document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
```
实现效果：
小火箭的图片资源：
## window.scrollTo()方法举例：楼层跳跃（暂略）
## 缓动框架封装
### 1、缓动框架封装：同时设置多个属性
这里我们通过`window.getComputedStyle`的方式获取属性值。
**完整代码如下：**
```html
```
实现效果：
### 2、上方的代码改进：清除定时器
上方的代码中，我们还需做一下清除定时器的判断：只有所有的参数都到达指定位置了，我们就清除定时器。
完整版代码如下：
```html
```
运行效果同上。
**### 3、进一步深入：如果有要同时执行讴多个动画时，就要用到回调函数（重要）**：
上面的代码中，我们要做的动画是：
```javascript
btnArr[0].onclick = function () {
var json = {"left": 100, "top": 200, "width": 300, "height": 300};
animate(div, json);
}
```
上面的代码是执行这一个动画，可如果要同时执行两个动画呢？一般人自然想到的是下面的写法：（错误的写法）
```javascript
btnArr[0].onclick = function () {
var json1 = {"left": 100, "top": 200, "width": 300, "height": 300};
var json2 = {"left": 200, "top": 10, "width": 150, "height": 150};
animate(div, json1);
animate(div, json2);
}
```
但是这样写的话，第二个动画 json2 会把第一个动画 json1 **层叠掉**。也就是说，第一个动画直接就不执行了。效果如下：
这显然不是我们想看到的。
如果我们想先执行第一个动画fn1()，再执行第二个动画fn2()的话，就要用到**回调函数**。意思是，将第二个动画fn2()作为回调函数即可。
完整版代码如下：
```html
```
效果如下：
上方代码中，如果我们要先后完成两个动画，执行的代码是：
```javascript
animate(div, json1, function () { //第三个参数是回调，可以保证json1的动画执行结束后，再执行json2的动画
animate(div, json2);
})
```
如果想要先后执行两个动画，那就以此类推：
```javascript
animate(div, json1, function () { //第三个参数是回调，可以保证json1的动画执行结束后，再执行json2的动画
animate(div, json2,function () {
animate(div,json3);
});
})
```
**举例：仿360的右下角开机效果**
代码实现：
```html
```
效果如下：
工程文件：
- 2018-02-04-仿360开机效果.rar
### 4、对 opacity和 z-index 属性进行单独改进
我们以上的代码中，如果要进行动画参数的设置，是直接把参数放到json里面去的。例如：
```javascript
var json1 = {"left": 100, "top": 200, "width": 300, "height": 300};
var json2 = {"left": 300, "top": 10, "width": 100, "height": 100};
```
可是，下面这两个属性，却不能这样放到json里，会出现兼容性的问题：
```
opacity: 0.5; //透明度
z-index: 1;
```
如何改进呢？暂略。
