JS和CSS3结合实现动画

JS和CSS3结合实现动画

• 我们知道，CSS3的transition过渡属性可以实现动画
• JavaScript可以利用CSS3的transition属性轻松实现元素
  动画
• JS和CSS3结合实现动画规避了定时器制作动画的缺点
  函数节流
• 函数节流：一个函数执行一次后，只有大于设定的执行周期后才允许执行第二次
• 函数节流非常容易实现，只需要借助setTimeout()延时器

var lock = true;
function 需要节流的函数() {
// 如果锁是关闭状态，则不执行
if (!lock) return;
// 函数核心语句
// 关锁
lock = false;
// 指定毫秒数后将锁打开
setTimeout(function () {
lock = true;
}, 2000);
}

动画效果开发1 - 无缝连续滚动特效
动画效果开发2 - 跑马灯轮播图特效
动画效果开发3 - 呼吸轮播图特效

定时器和延时器
定时器

• setInterval()函数可以重复调用一个函数，在每次调用之
  间具有固定的时间间隔

函数的参数

setInterval()函数可以接收第3、4……个参数，它们将按顺序传入函数

setInterval(function (a, b) {
// 形式参数a的值是88，形式参数b的值是66
}, 2000, 88, 66);

• 具名函数也可以传入setInterval

var a = 0;
function fun() {
console.log(++a);
}
setInterval(fun, 1000);

清除定时器

clearInterval()函数可以清除一个定时器

// 设置定时器，并且用timer变量接收这个定时器
var timer = setInterval(function () {
}, 2000);
// 点击按钮时，清除定时器
oBtn.onclick = function () {
clearInterval(timer);
}

延时器
setTimeout()函数可以设置一个延时器，当指定时间到了
之后，会执行函数一次，不再重复执行。

setTimeout(function () {
// 这个函数会在2秒后执行一次
}, 2000);

清除延时器

• clearTimeout()函数可以清除延时器，和clearInterval()
  非常类似

初步认识异步语句

• setInterval()和setTimeout()是两个异步语句
• 异步（asynchronous）：不会阻塞CPU继续执行其他语句，当异步完成时，会执行“回调函数”（callback）

setTimeout(function () {
console.log('A');
}, 2000);
console.log('B');

使用定时器实现动画

• 使用定时器可以实现动画，利用的就是“视觉暂留”原理
• 使用定时器实现动画较为不便：
  ① 不方便根据动画总时间计算步长
  ② 运动方向要设置正负
  ③ 多种运动进行叠加较为困难（比如一个方形一边移动一边变为圆形）