一, JavaScript 动画
在 JavaScript 中创建动画的经典方式就是使用 setInterval()/setTimeout(). 使用这两个方法的关键是要知道动画的延迟时间多久才合适. 一方面, 循环时间必须足够短, 这样才能让不同的动画效果显得平滑流畅; 另一方面, 循环时间还要足够长, 才能确保浏览器有能力渲染产生的变化.
1. 最佳动画循环间隔时间
大多数电脑的刷新频率是 60Hz, 大概相当于每秒钟重绘 60 次. 大多数浏览器会对重绘操作加以限制, 不超过显示器的重绘频率, 因为即使超过那个频率用户体验也不会有提升. 因此, 最平滑动画的最佳循环时间间隔是 1000ms/60, 约等于 17ms, 最接近浏览器的最高限速. 所以多重动画可能需要加以节制, 适应 17ms 的循环间隔, 以便不会完成的太快.
2.setInterval/setTimeout 创建动画的问题
这两个方法的第二个参数, 实际上是指定何时把动画代码加入到队列的等待时间, 如果队列前面的任务未完成, 等待时间之后动画代码并不会马上执行. 所以这个间隔时间并不准确, 浏览器不能按时绘制下一帧动画.
3.requestAnimationFrame 创建动画
requestAnimationFrame() 方法创建动画则不会有以上问题, 它会告知浏览器将要执行动画, 浏览器会计算出最佳循环时间, 保证最佳的绘制效率.
(1) 使用方法
requestAnimationFrame 方法接受一个回调函数作为参数, 回调函数中是要执行的动画代码, 不需要设置动画循环间隔时间.
注: requestAnimationFrame() 方法只运行一次传入的函数, 想要循环执行, 要在回调函数里面再次调用该方法即可.
- <div id='div' style="width: 100px;height:100px;background-color: red;"></div>
- <script>
- window.onload = function(){
- var div=document.getElementById('div');
- function animation(){
- div.style.width = parseInt(div.style.width) +1 + 'px';
- requestAnimationFrame(animation);
- }
- requestAnimationFrame(animation);
- }
- </script>
(2) 返回值, 停止动画
requestAnimationFrame() 方法返回一个整数, 表示定时器编号, 可以传给 cancelAnimationFrame() 方法, 用于取消执行动画.
(3) 特点
当元素隐藏或不可见时, requestAnimationFrame() 会暂停调用以提升性能和电池寿命.
二, Page Visibility API
这个 API 可以让开发人员知道页面是否对用户可见, 如果页面最小化或者隐藏在了其他标签页后面, 那么有些功能则可以停下来, 如轮询服务器或者动画效果.
API 组成:
(1)document.hidden: 表示页面是否隐藏, 隐藏页面包括在后台标签中或者浏览器最小化.
(2)document.visibilityState: 表示下列 4 中可能状态的值:
a. 后台标签中或者浏览器最小化
b. 页面在前台标签页中
c. 实际页面已经隐藏, 但用户可以看到页面的预览 (如 window7, 鼠标移动到任务栏, 可以预览浏览器的当前页面)
d. 页面在屏幕外执行预览渲染处理.
(3)visibilitychange 事件: 当文档从可见变为不可见或从不可见变为可见时, 触发该事件.
- <script>
- document.onvisibilitychange = function () {
- console.log('document.hidden:'+document.hidden);
- console.log('document.visibilityState:'+document.visibilityState);
- }
- // 最小化
- document.hidden: true
- document.visibilityState: hidden
- // 最大化
- document.hidden: false
- document.visibilityState: visible
- </script>
三, File API
1.file 对象
每个 input type='files' 的元素都有一个 files 属性, 当选择了一个或多个文件时, files 中将包含一组 file 对象. 每个 file 对象对应着一个文件. 每个 file 对象包含以下属性:
a. name: 本地文件系统中的文件名
b. size: 文件的字节大小
c. type: 字符串, 文件的 MIME 类型
d. lastModifiedDate: 字符串, 文件上一次被修改的时间
2. FileReader 对象
(1) 方法:
a. readAsText(file,encoding): 以纯文本形式读取文件, 将读取到的文本保存在 result 属性中, 第二个参数指定编码类型, 是可选的.
b. readAsDataURL(file): 读取文件并将文件以数据 URI 的形式保存在 result 属性中.
c. readAsBinaryBuffer(file): 读取文件并将一个字符串保存在 result 属性中, 字符串的每个字符表示一字节.
d. readAsArrayBuffer(file): 读取文件并将一个包含文件内容的 ArrayBuffer 保存在 result 属性中.
e. abort(): 中断读取过程.
(2) 事件:
FileReader 对象实现的是一种异步文件读取机制, 因此提供了几个事件可判断读取的状态.
a.progress: 每 50ms 左右, 就会触发一次该事件. 通过事件对象可以获取与 XHR 的 progress 事件相同的信息: lengthComputable,loaded,total. 可能没有包含全部数据, 但每次 progress 事件中都可以通过 FileReader 的 result 属性读取文件内容.
b.error: 无法读取文件时触发该事件, 触发 error 事件时, 相关的信息将保存到 FileReader 的 error 属性中. 这个属性中中保存一个对象, 对象只有一个属性 code, 即错误码: 1 表示未找到文件, 2 表示安全性错误, 3 表示读取中断, 4 表示文件不可读, 5 表示编码错误.
c.load: 文件加载成功后会触发 load 事件, 如果发生了 error 事件, 就不会发生 load 事件.
d.abort: 调用 abort() 方法, 就会触发该事件.
e.loadend: 在触发 laod,error,abort 事件后, 就会触发该事件
来源: http://www.qdfuns.com/article/46690/868fa67ce6f5350e7572e44d50ab452b.html