Animation

动画原理

利用定时器，实现不断改变对象的样式，从而产生动画的效果

动画分类

1. 匀速运动(速度保持不变的运动)
   (1)初始化速度变量
   
   (2)开启定时器
   ①获取当前值
   ②改变当前值：当前值+速度
   ③将改变后的值赋值给元素的样式
   ④当改变后的值大于等于目标值，清除定时器，同时将改变后的值改成目标值。这一步应 该在赋值给样式之前

2. 加速运动
   (1)初始化速度变量
   
   (2)开启定时器
   ① 获取当前值
   ② 改变当前值：当前值+速度
   ③ 速度不断增加
   ④ 将改变后的值赋值给元素的样式
   ⑤ 当改变后的值大于等于目标值，清除定时器，同时将改变后的值改成目标值。这一步应 该在赋值给样式之前

3. 减速运动
   (1)初始化速度变量
   
   (2)开启定时器
   ① 获取当前值
   ② 改变当前值：当前值+速度
   ③ 速度不断减小
   ④ 将改变后的值赋值给元素的样式
   ⑤ 当改变后的值大于等于目标值，清除定时器，同时将改变后的值改成目标值。这一步应 该在赋值给样式之前
   ⑥ 当速度小于0时，清除定时器。写在速度自减下面

4. 抛物线运动
   (1)初始化速度变量（水平、垂直）
   
   (2)开启定时器
   ① 获取当前值(水平、垂直)
   ② 改变当前值：当前值+速度
   ③ 速度不断减小（垂直方向的速度）
   ④ 将改变后的值赋值给元素的样式
   ⑤ 当改变后的值大于等于目标值，清除定时器，同时将改变后的值改成目标值。这一步应 该在赋值给样式之前

5. 圆周运动
   (1)初始化速度变量（角度）
   
   (2)开启定时器
   ① 获取当前值
   ② 改变当前值：当前值+速度
   ③ 将改变后的值赋值给元素的样式
   ④ 当改变后的值大于等于目标值，清除定时器，同时将改变后的值改成目标值。这一步应 该在赋值给样式之前

6. 缓冲运动
   备注：关键动态计算速度（目标值-当前值有关）
   (1) 开启定时器
   ① 获取当前值
   ② 获取当前速度(目标值-当前值)
     当速度大于0时，Math.ceil()
     当速度小于0时，Math.floor()
   ③ 改变当前值：当前值+速度
   ④ 将改变后的值赋值给元素的样式
   ⑤ 当改变后的值等于目标值，清除定时器
     若事件里面开启定时器，记得开启定时器先清除定时器

7. 轮播图
   (1) focus呈现图片，宽度为第一张图片的宽度。ul的宽度=图片的宽度*图片张数
   ① 必须等待第一张图片加载完成后，再获取宽度
   
   (2) 开启定时器，定义一个索引（全局变量0、1、2）改变，从而改变的是ulbox的left值
   ① 复制索引0所在的元素，追加到ul最后面。
   ② 当索引为数组长度时，其实要呈现的是索引1所在的图片。为了让轮播图是正着滚的，同时将ul的left手动设置成0。
   
   (3) 鼠标移入focus，清除定时器。鼠标移出focus，重新开启定时器
   
   (4) 生成页码，同时根据len-1生成小圆点.默认第一个小圆点高亮.(通过添加类名使其高亮)
   
   (5) 滚动过程中索引改变，去除所有的高亮，再让对应的索引高亮
   ① 当滚到被复制那张图片索引时，对应的索引为0的小圆点高亮
   
   (6) 点击小圆点，获取里面的内容（重置索引idx = innerHTML-1）

<!--轮播图结构：-->
<div class="focus">
        <ul>
            <li><img src="../images/001.jpg"></li>
            <li><img src="../images/002.jpg"></li>
            <li><img src="../images/003.jpg"></li>
        </ul>
</div>

8.瀑布流
(1) 计算当前大容器能容纳多少列

列数 = parseInt(大容器宽度/容器宽度)

(2) 计算水平间隔

间隔 = 大容器宽度%容器宽度/(列数+1)

(3) 创建一个数组pos

用来保存第一行每列图片左上角坐标(left,top)

(4) 遍历所有容器，往大容器里添加容器

遍历数组pos，查找最小top值，然后摆放图片再更新top值
top = top + vgap + 容器高度
备注：滚动条宽度为17px，记得减掉