module3-05-定时器的应用-简单动画-无缝滚动-轮播图
一、简单运动
-
使用定时器setInterval与setTimeout可以做简单运动
1.1 原理
-
是一种视觉暂留
-
通过定时器,实现每隔一段时间(50-100毫秒)执行函数，函数内容让其未知变化
-
提高运动速度方法
-
① 缩短时间间隔，增加每秒移动的次数
-
② 加大步长，让每一次走的步长增加
-
1.2 一些方法
-
步标整除
-
传入总距离，总时间，进而算出步移次数、每次步移距离再加上拉终停表来完成移动
-
1.3 遇到的问题
-
多次点击开始会造成加速效果，点击停止，仍然还有速度
-
原因：每次点击都会添加一个新的定时器，每个定时器都有加速效果
-
解决方法，① 在每次点击的时候清空原有定时器。② 拉终停表：在步长不能被总距离整除的时候，在过了总距离，强行把值设置总距离并停止延时器
-
-
多属性运动问题
-
可以使用步标整除然后算出公共的部分，一些属性的改变的次数可以公共的使用
-
二、封装动画函数
-
封装的函数有单一动画、多属性动画，接下来讲解封装一个多属性动画
2.1 函数参数
-
① 操作的对象（元素）
-
② 操作的属性（对象）
-
③ 整个动画的时间
2.2 函数运行过程
（1）获取传入参数的属性的初始属性并设置一些初始值
-
window.getComputedStyle(element)可以用来获取元素计算完之后的值 -
然后用
for in遍历传入参数的key来传入一个内置变量来存放初始值 -
自定义时间间隔interval：50
-
计算总次数count：time / interval
-
计算每个属性的step并记录在一个对象中
（2）定义动画运行时的变量并计算
-
定义timeout定时器，每运行一次，为当前属性值进行 += 操作
-
每次+=操作完，把元素的各项属性都赋予当前值，其中有一些属性如opcity不用加px，把key进行条件判断即可
-
判断count是否比maxCount大，大则拉钟停表
三、无缝滚动
-
无缝滚动的实质就是视觉欺骗
-
如简单的无缝滚动
-
使用定时器做移动动画之前先计算需要转换到开头位置的临界点，然后进行操作
高级无缝滚动
-
这样的做法相对于普通的无缝滚动是在可移植性上面做了调整，如动态获取容器宽度（临界值），动态增加元素
四、轮播图
-
编程思路：信号量编程，通过一个全局变量的信息量，在不同的事件函数中进行信息传递，让多个事件进行协同作业
-
步骤：
-
① 创建全局变量默认等于0
-
② 绑定左按钮、右按钮事件
-
每次点击只是改变信息量，然后使用访问信息量的变化函数来进行改变
-
-
③ 编写变化函数：根据信息量改变轮播图显示的函数，包括小圆点的显示
-
在信息量超出最大或者小于0的时候瞬间更改信息量变为最大值或者0
-
-
④ 点击小圆点更改信息量，再进行变化函数
-
⑤ 实现自动轮播，使得按事件触发一次右箭头点击事件，可以用相同的函数
-
五、回到顶部
-
监测滚动距离的兼容性问题
-
chrome浏览器不嫩更是别document.body.scrollTop，正确写法是document.documentElement.scrollTop
-
-
