学习写Js的动画

说起前端，要说动画是最有乐子的东西了。玩好动画一定会很轻易的享受到前端的乐趣。

这里我不会讲述什么css3 的 transform animation keyframes，也不会讲述jquery的animate 。不是因为这些没必要会，而是简单到一学就会了

这系列博客，我会详细的讲述用原生js去写

1.动画形成理论

2.动画时间帧控制方法

3.结合css3的一个简单动画框架

4.动画的一些小技巧

3.动画ease,ease-in,ease-out以及其他的算法

4.基础物理动画

5.动画中常见的边缘检测

少吹牛，多装逼，我直接讲述一个动画形成理论。

视频动画：

动画技术较规范的定义是采用逐帧拍摄对象并连续播放而形成运动的影像技术。不论拍摄对象是什么，只要它的拍摄方式是采用的逐格方式，观看时连续播放形成了活动影像，它就是动画。（来自于百度百科）

这个是一个动画的规范定义。他意思就是动画就是快速播放的图片而已。

网页动画：

有别于视频动画，网页的动画是浏览器渲染出来的网页，而不是图片，但是当网页不动，那网页和图片视觉上其实并无差异，所以网页动画就是浏览器快速渲染出一堆字网页格式的 “图片”，说白了，就是写代码定时改变数据，然后渲染。

代码基础：

那么就可以写一段代码

setInterval(function(){
     render()        
},time)

但是这个可不是会动的，我们需要让他一直在变化

setInterval(function(){
     render(cfg)
     update(cfg)    
},time)

这个意思是有一条数据cfg，可以在update当中被改变，在render中用这个cfg去渲染一个动画。

注意：time应该是多少，平滑起见呢，动画30帧/秒就不大看得出卡了，所以呢一般至少需要 1000/30 = 33。就是说time需要小于33

还有一种是setTimeout版的

function render(){
　　//some code by animate
    setTimeout(function(){
        update()
        render()
    },33)
}
animate()

这个意味着每隔33秒去回调一次animate()，然后animate回去更新update()

两者的差异是什么呢

setInterval会每隔time然后执行一次，不管time这段时间够不够用来渲染和更新数据。

setTimeout会再render执行后过time毫秒然后再去render

function animate(){
　　//some code
    setTimeout(function(){
        update()
        animate()
    },1000)
} //这个方法中没有定义update()
animate()

这个代码只有一次报错

function animate(){
    
} 
setInterval(function(){
    animate()
    update()
},1000)
//这个方法中没有定义update()

这种写法会报错无数次

纠结用哪一个的时候。

setInterval是更加稳定的控制时间差距，稳稳的每隔time执行一次，但是他出错会一直报错，比较难受，挡不住的报错

setTimeout是出错就不懂了，停下来了，其实修复的时候会舒服一点（作为一个密集恐惧症这么觉得）,容易调试。

而且性能好呀，setInterval强制渲染，渲染量大，cpu的小风扇马上就呼噜噜开了，但是他不是绝对的time执行，意味会setTimeout会和//some code产生同步，必须等some code办事完了，setTimeout才办事，就是说这玩意只有一个主线任务是而且是同步的。

第一课就将这么多吧！然后希望大家熟练去运用setTimeout和setInterval这两个牛逼哄哄的api