Animation课堂笔记

饥人谷_李栋

---

1、回调函数
2、动态参数
3、setTimeout 、setInterval
4、缓动
5、$node.animate

---

一、回调函数callback-- 给别人调用的函数

• 有参数

function traverse(array,callback){
  var length=array.length
  for(var i=0;i<length;i++){
    callback(i,array[i])
  }
}
traverse(['a','b','c'],function(index,item){
  console.log(index)
  console.log(item)
})
//0
//"a"
//1
//"b"
//2
//"c"

• 无参数

function func(){
  console.log("hello,callback")
  
}
function other(callback){
  callback()
}
other(func)
//"hello,callback"

二、动态参数--形参不固定的时候用到

函数里面会内置一个参数对象：arguments

function doSometingWith(who,say,callback){
  if(arguments.length===3){
    console.log(say)
    callback()
  }else if(arguments.length===2){
    callback=say
    callback()
  }
}
doSometingWith('tom','hi tom',function(){
               console.log('play with tom')
               })
doSometingWith('tom',function(){
  console.log('hit tom')
})
//"hi tom"

//"play with tom"

//"hit tom"          

• 伪数组
  实参会放到arguments[i]这个伪数组里面
  arguments[0],arguments[1]...

• 可读写（最好不要写，写会改变实参的值）

三、setTimeout setInterval
1.setTimeout

setTimeout(func,[delay.param1,param2...])

上面可理解为，在delay时间之后，如果空闲，调用func函数，以param1，param2...为函数func的参数

• func回调函数
• []里面的参数可选
• delay是个数字，代表在多少秒之后做什么事
  delay要注意以下几点：
  1.单位 ms
  2.不一定是在指定的时间运行 **
  //在delay时间之后把回调函数放到待办事项队列里面，什么时候闲了，再执行
  3.一定是异步执行的
  4.delay最小不一定是0
  如果不是当前页面，最小的间隔是1s**
• setTimeout里面嵌套setTimeout,里面的setIimeout最小的间隔是4ms
  //嵌套ie下是15ms

var number=10

setTimeout(function step(){
  number--
  if(number>0){
    console.log(number)
    setTimeout(step,1000)
  }else{}
},1000)

2.setInterval 会不停的重复
3.清除

window.clearTimeout(timeoutId)
window.clearInterval(timeoutId)

//timeoutId参数是在定义setTimeout的时候传的

var timeoutId=setTimeout(callback,[delay])

4.嵌套

setTimeout(func名,delay)//如果回调函数有名字
setIiemout(arguments.callee,delay)//回调函数没名字

四、缓动easing functions
更加自然的运行动画
//需要装插件
五、jQuery动画API
1.animate

animate(参数对象,duration,easing,callback)
// 参数对象的属性值只支持数字类型的
width、height、opacity(透明度)
//duration有数字、fast、slow
//easing有swing、linear别的需要插件
//callback函数在动画完成之后执行

高级用法

.animate(参数对象，option对象)
//option对象包括duration、easing、queue...
 注意，queue类型为boolean表示是否把动画放入待办事项队列执行，否代表直接执行动画

2.finish(queue)
停止当前的动画，移除所有队列里的动画，完成动画最终状态
3.stop

stop([clearQueue],[jumpToEnd])
// clearQueue 是否把队列里的动画清除
// jumpToEnd 是否跳到最终状态

4.delay

delay（数字）
//动画停几秒,只能作用在慢慢动的API

5.slideUp()、slideDown()、slideToggle()//卷起来、展开

6.fadeOut()、fadeIn()、fadeToggle()//淡出、淡入

7.fadeTo

fadeTo(duration,[数值]，callback)
//数值代表透明度

8.hide()、show()、toggle()