JavaScript动画基本原理

小咪咪 2022-08-23 00:51 147阅读 0赞

## JavaScript动画基本原理 ##

在现在做页面很多时候都会用上动画效果。比如下拉菜单，侧边搜索栏，层的弹出与关闭等等。通常我们实现这些动画效果可以采用  
**JavaScript**与**CSS3**两种方式来实现。本文主要介绍JavaScript动画，CSS3的动画下次在总结。对于JavaScript动画  
目前有很多的动画插件库，如: [Jquery][]等等.以下就简单介绍以下JavaScript动画的实现原理。

### 1.动画的原理 ###

动画是利用人眼的视觉残留特性而达成的一种视觉效果，即人眼看到的影像会有短暂时间的残留，这个时间约为1/24秒，当一段连续变化的影像  
在较短时间内变化时就会给人以流畅的感觉。根据1/24秒这个数据我们可以推断出，当连续变化的影像为每秒24次的速度就能给人流畅的感觉。  
所以电影的帧频为24帧，而电视一般采用的是25帧和30帧两种制式。  
**帧**:就是动画中最小单位的单幅影像画面,在讲多少帧的时候指的就是每秒钟画面切换的次数

### 2.JavaScript中的动画简介 ###

在JavaScript中没有帧的概念.但是我们可以通过`setTimeout()`和`setInterval()`这两个方法来实现类似的效果.  
1. `setTimeout(callback, time)`:延迟一段时间(time/ms)后执行对应的方法callback, **只执行一次**  
1. `setInterval(callback, time)`:延迟一段时间(time/ms)后执行对应的方法callback, **循环执行,直到取消**  
如以下简单实例:

var ele = document.getElementById("divTest");
    function changeStyle(){ 
      var originLeft = parseInt(obj.style.left);
        obj.style.left=originLeft+20+'px'
      //当left值大于100px时, 停止移动效果
        if(originLeft>=100)
            clearInterval(timer);
    }
    var timer=setInterval(changeStyle,40);

以上就是一个最简单的动画效果了, 方块向右移动,当距离大于100px时, 停止移动.在真是的应用中,效果就比这个复杂多了,这里只是简单描述  
JavaScript动画的原理.

### 2.javaScript中动画运动的一些算法. ###

1.  [JavaScript Tween算法及缓动效果][JavaScript Tween]

### 3. 一些动画库 ###

1.  [Jquery动画][Jquery]: Jqeury对于动画的支持
2.  [velocity.js][]/[其GitHub地址][GitHub]:完全类似于Jquery语法的动画库
3.  [Tween JS][]:支持根据数值对象的属性和 CSS 样式的属性进行补间动画
4.  [Animo.js][]:CSS 动画的工具,叠加动画，创建跨浏览器的模糊效果，动画完成后可执行回调函数。
5.  [Move.js][]:利用CSS3支持的动画变得非常简单和优雅
6.  [Collie][]:有助于使用 HTML5 创造高度优化的动画和游戏的JavaScript库
7.  [Minified.js][]一个体积小(<8kB)功能强的客户端JavaScript库。它提供了类似于jQuery的功能(DOM操作、动画、时间、HTTP请求) 和其他功能(集合、日期&数字格式化、日期计算、模板)，并有着简单明了的API
8.  [Rekapi][]:JavaScript关键帧动画库。它提供了一套API让你可以定义关键帧动画并控制动画播放
9.  [Snap.svg][]:SVG是建立互动的一个很好的方式，独立于分辨率的矢量图形会在任何屏幕看起来都很棒
10. [Favico][]:给网站图标 favicon 添加徽章、图片，甚至是视频
11. [Textillate.js][]:针对 CSS3 文本动画的简单插件
12. [Firmin][]:使用 CSS 的转换和过渡功能来创造光滑的、带有硬件加速的动画的Javascript动画库
13. [AliceJS][]:微型的JavaScript库，集中在使用硬件加速的能力（特别是CSS3特性）在现代浏览器中生成高端大气上档次的视觉效果。
14. [SVG.js][]
15. [Motio][]:轻量的用于制作简单但功能强大的基于动画和平移画面的Javascript库
16. [Anima.js][]:简化在同一时刻使得成百上千的元素具有动画效果的工作. 并且可以更好的控制你的动画, 甚至可以只创建CSS动画  
    [15 个最棒的JavaScript动画库][Tween JS]

[Jquery]: http://api.jquery.com/animate/
[JavaScript Tween]: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
[velocity.js]: http://julian.com/research/velocity/
[GitHub]: https://github.com/julianshapiro/velocity
[Tween JS]: http://www.oschina.net/translate/15-best-javascript-animation-libraries-for-developers
[Animo.js]: http://labs.bigroomstudios.com/libraries/animo-js
[Move.js]: http://visionmedia.github.io/move.js/
[Collie]: http://jindo.dev.naver.com/collie/
[Minified.js]: http://minifiedjs.com/
[Rekapi]: http://rekapi.com/
[Snap.svg]: http://snapsvg.io/
[Favico]: http://lab.ejci.net/favico.js/
[Textillate.js]: http://jschr.github.io/textillate/
[Firmin]: http://extralogical.net/projects/firmin/
[AliceJS]: http://blackberry.github.io/Alice/
[SVG.js]: http://svgjs.com/
[Motio]: http://darsa.in/motio/
[Anima.js]: http://lvivski.com/anima/