JacaScript动画

- JacaScript动画
引言——在设计前端页面时，会用到很多效果，我们可以采用CSS样式或JavaScript来实现，在这里给大家介绍JS动画
- 一、JacaScript动画的基本原理
- 二、JavaScript中的动画简介
- 三、常用的动画库
- 四、动画遇到卡顿的原因及解决方案
- - （一）卡顿原因
  - （二）解决方案（优化）

引言——在设计前端页面时，会用到很多效果，我们可以采用CSS样式或JavaScript来实现，在这里给大家介绍JS动画

一、JacaScript动画的基本原理

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

二、JavaScript中的动画简介

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

三、常用的动画库

1、Jquery动画: Jqeury对于动画的支持
2、velocity.js/其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动画

四、动画遇到卡顿的原因及解决方案

（一）卡顿原因

1、原因分析
大多数设备的刷新频率是60次/秒，也就是1秒钟的动画是由60个画面连在一起生成的，所以要求浏览器对每一帧画面的渲染工作要在16ms内完成。当渲染时间超出16ms时，1秒钟内少于60个画面生成，就会有不连贯、卡顿的感觉，影响用户体验
2、页面渲染流程
一个页面帧在客户端的渲染分为以下几步
①JavaScript：JavaScript实现动画效果，DOM操作等。
②Style（样式计算）：确认每个DOM元素应用的CSS样式规则。
③Layout（布局）：计算每个DOM元素最终在屏幕上的大小和位置。由于DOM元素的布局是相对的，所以当某个元素发生变化影响了布局时，其他元素也会随之变化，则需要回退重新渲染，这个过程称之为reflow。
④Paint（绘制）：在多个层上绘制DOM元素的文字、颜色、图像、边框和阴影等。
⑤Composite（Render Layer合并）：按照合理的顺序合并图层并显示到屏幕上。浏览器在实际渲染页面的时候需要经过一系列的映射，由HTML页面构建出来的DOM树到最终的图层。

（二）解决方案（优化）

1、JavaScript：优化JavaScript的执行效率

requestAnimationFrame代替setTimeout和setInterval
可并行的DOM元素更新划分为多个小任务
DOM无关的耗时操作放到Web Workers中
2、Style：降低样式计算复杂度和范围
降低样式选择器的复杂度
减少需要执行样式计算的元素个数
3、Layout：避免大规模、复杂的布局
避免频繁改变布局
用flexbox布局替代老的布局模型
避免强制同步布局事件
4、Paint/Composite：GPU加速
将移动或渐变元素由渲染层（RenderLayer）提升为合成层（Compositing Layer）
避免提升合成层的陷阱

JavaScript动画相关推荐

Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
javascript动画系列第一篇——模拟拖拽
前面的话从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛.javascript动画广泛使用的还是模拟 ...
使用HTML5画布实现的超棒javascript动画仪表板：gauge.js
日期:2012-8-8 来源:GBin1.com 在线演示今天我们分享来自guage.js的超棒动画仪表板实现,这个类库使用html5画布来生成动态的自定义仪表板.不依赖于任何类库也不实用任何的C ...
JavaScript动画知多少？
今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...
10个顶级的CSS和Javascript动画框架推荐
在网站中嵌入动画已成为近年来的一个设计趋势,许多公司都已开始转向并拥抱HTML5.CSS3和JavaScript这个技术"三人组".尽管这些技术还不能制作一些非常复杂的动画(像fl ...
大话 JavaScript 动画
背景 138.2亿年前,世界上没有时间和空间,或许世界都不存在,在一个似有似无的点上,汇集了所有的物质,它孕育着无限的能量与可能性. 宇宙大爆炸巨大的内力已无法被抑制,瞬间爆发,它爆炸了!世界上有了 ...
用 65 行代码实现 JavaScript 动画序列播放
最近在给学生上课,上周六的第一堂课是关于 JavaScript 动画的内容,其中包括一些简单的动画,比如匀速或者匀加/减速的运动,也包括复杂一些的组合动画.而动画的基本原理,在我之前的文章[1]已经有 ...
《HTML5+JavaScript动画基础》——2.4　JavaScript对象
本节书摘来自异步社区<HTML5+JavaScript动画基础>一书中的第2章,第2.4节,作者:[美]Billy Lamberta , Keith Peters著,更多章节内容可以访问云 ...
顶级的CSS和Javascript动画框架
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果 1. jQuery Transit 该jQuery插件扩 ...
顶级的CSS和Javascript动画框架推荐
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果 9. 3D Synth Pure CSS 3D Synt ...

JavaScript动画