Animation
动画原理
利用定时器,实现不断改变对象的样式,从而产生动画的效果
动画分类
-
匀速运动(速度保持不变的运动)
(1)初始化速度变量
(2)开启定时器
①获取当前值
②改变当前值:当前值+速度
③将改变后的值赋值给元素的样式
④当改变后的值大于等于目标值,清除定时器,同时将改变后的值改成目标值。这一步应 该在赋值给样式之前 -
加速运动
(1)初始化速度变量
(2)开启定时器
① 获取当前值
② 改变当前值:当前值+速度
③ 速度不断增加
④ 将改变后的值赋值给元素的样式
⑤ 当改变后的值大于等于目标值,清除定时器,同时将改变后的值改成目标值。这一步应 该在赋值给样式之前 -
减速运动
(1)初始化速度变量
(2)开启定时器
① 获取当前值
② 改变当前值:当前值+速度
③ 速度不断减小
④ 将改变后的值赋值给元素的样式
⑤ 当改变后的值大于等于目标值,清除定时器,同时将改变后的值改成目标值。这一步应 该在赋值给样式之前
⑥ 当速度小于0时,清除定时器。写在速度自减下面 -
抛物线运动
(1)初始化速度变量(水平、垂直)
(2)开启定时器
① 获取当前值(水平、垂直)
② 改变当前值:当前值+速度
③ 速度不断减小(垂直方向的速度)
④ 将改变后的值赋值给元素的样式
⑤ 当改变后的值大于等于目标值,清除定时器,同时将改变后的值改成目标值。这一步应 该在赋值给样式之前 -
圆周运动
(1)初始化速度变量(角度)
(2)开启定时器
① 获取当前值
② 改变当前值:当前值+速度
③ 将改变后的值赋值给元素的样式
④ 当改变后的值大于等于目标值,清除定时器,同时将改变后的值改成目标值。这一步应 该在赋值给样式之前 -
缓冲运动
备注:关键动态计算速度(目标值-当前值有关)
(1) 开启定时器
① 获取当前值
② 获取当前速度(目标值-当前值)
当速度大于0时,Math.ceil()
当速度小于0时,Math.floor()
③ 改变当前值:当前值+速度
④ 将改变后的值赋值给元素的样式
⑤ 当改变后的值等于目标值,清除定时器
若事件里面开启定时器,记得开启定时器先清除定时器 -
轮播图
(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,记得减掉