一、动画原理
利用定时器不断实现某个操作
二、简单动画函数封装
简单动画函数封装obj目标对象 target 目标位置
停止动画的本质是停止定时器
function animate(obj, target) {
清除以前的定时器,防止调用多个定时器
clearInterval(obj.timer);
使用对象属性,减少开辟空间
obj.timer = setInterval(function() {
操作
}, 30);
}
三、缓动动画原理
缓动动画函数封装obj目标对象 target 目标位置
思路:
1. 让盒子每次移动的距离慢慢变小, 速度就会慢慢降下来。
2. 核心算法:(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
3. 停止的条件是: 让当前盒子位置等于目标位置就停止定时器
四、缓动动画添加回调函数
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
操作
if(动画结束条件){
clearInterval(obj.timer);
if (callback) {
// 调用函数
callback();
}
}
}
animate(obj,target,function(){
动画结束后的操作
})
五、轮播图
原理:
利用编写好的动画函数,通过点击左右按钮实现ul移动(将所有的图片放在ul的li里)
声明一个变量,每点击一次左右箭头,变量就加一或者减一,调用编写好的动画函数
animate(ul, -num *图片的宽度)
无缝滚动:将第一张图片进行深克隆放在最后,当图片滚动到最后一张克隆的图片时马上将ul的left修改为0并将变量修改为0,当在显示第一张图片的时候按左箭头时,马上跳转到最后一张克隆图片那里并将变量修改为图片个数-1
自动播放:相当于点击右键,利用循环计时器调用click()