Skip to content

Latest commit

 

History

History
 
 

动画与定时器的应用

#动画部分

最动画要做绝对定位,写left,写top;定好位置;

动画主要是从5个方向改变:

  • 宽度 (width)
  • 高度 (height)
  • 水平 (left)
  • 垂直 (top)
  • 透明度 (opacity)

JS写动画,主要是学逻辑关系,深入研究闭包作用域;并不是完全用JS写动画。CSS3做这个会更好;

#同步和异步编程

js是单线程的编程方法;

  • 同步:上面事情等待,在此期间我要一直等,只有这件事做完才能做下件事情
  • 异步:模拟多线程,上面的事情正在等待中,我们不需要等它,继续做下面的事情,当下面的事情做完了,然后我们发现上面的事情也等待完成了,在执行上面的事情

同步编程的例子:

 function fn() {
 for (var i = 0; i < 1000; i++) {
 }
 console.log(i);//只有循环完成才能输出i
 return i;
 }
 var c = fn();
 console.log(c);//只有fn执行完成后才会输出c

异步编程例子:

1、所有的事件绑定都是异步编程
oDiv.onclick=function(){}
window.onload=function(){}
console.log(100);
2、定时器都是异步编程
定时器的等待时间是有最小值的 每个浏览器都有一个最小值,即使你写的是0,也不是立即执行;定时器和别的代码是两个频道的。异步执行;作用域和预解释的时候有总结过;
var num = 12;
window.setTimeout(function () {
    num++;
    console.log(num);
}, 5);
for (var i = 0; i < 10000; i++) {//这个循环时间肯定大于5ms,但是也是先从上倒下执行,只有下面的代码都执行完成,才会返回头看定时器是否到时间,到了在执行定时器里面的
}
console.log(num);
//先输出12然后在输出13;说明是先执行完for循环和后面的打印;然后才切到定时器的执行的;

动画中的几部分:

  1. 开始位置、结束位置、总距离;(总距离=结束位置-开始位置)
    
  2. 总运动时间、定时器间隔时间 、步长 ;(步长=(总距离/总运动时间)*定时器间隔时间)
    
  3. 运动的方式:匀速、减速、加速、变速