JavaScript 笔记(20)- JavaScript 动画、Page Visibility 、File

原创 乘风逐月 随笔 JavaScript 265阅读 2018-06-29 15:54:07 举报

一、 JavaScript 动画

在 JavaScript 中创建动画的经典方式就是使用 setInterval()/setTimeout()。使用这两个方法的关键是要知道动画的延迟时间多久才合适。一方面,循环时间必须足够短,这样才能让不同的动画效果显得平滑流畅;另一方面,循环时间还要足够长,才能确保浏览器有能力渲染产生的变化。

1.最佳动画循环间隔时间

大多数电脑的刷新频率是60Hz,大概相当于每秒钟重绘60次。大多数浏览器会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此,最平滑动画的最佳循环时间间隔是1000ms/60,约等于17ms,最接近浏览器的最高限速。所以多重动画可能需要加以节制,适应17ms的循环间隔,以便不会完成的太快。

2.setInterval/setTimeout创建动画的问题

这两个方法的第二个参数,实际上是指定何时把动画代码加入到队列的等待时间,如果队列前面的任务未完成,等待时间之后动画代码并不会马上执行。所以这个间隔时间并不准确,浏览器不能按时绘制下一帧动画。

3.requestAnimationFrame 创建动画

requestAnimationFrame() 方法创建动画则不会有以上问题,它会告知浏览器将要执行动画,浏览器会计算出最佳循环时间,保证最佳的绘制效率。
(1)使用方法
requestAnimationFrame 方法接受一个回调函数作为参数,回调函数中是要执行的动画代码,不需要设置动画循环间隔时间。
注: requestAnimationFrame() 方法只运行一次传入的函数,想要循环执行,要在回调函数里面再次调用该方法即可。

(2)返回值、停止动画
requestAnimationFrame() 方法返回一个整数,表示定时器编号,可以传给 cancelAnimationFrame() 方法,用于取消执行动画。
(3)特点
当元素隐藏或不可见时,requestAnimationFrame() 会暂停调用以提升性能和电池寿命。

二、Page Visibility API

这个API可以让开发人员知道页面是否对用户可见,如果页面最小化或者隐藏在了其他标签页后面,那么有些功能则可以停下来,如轮询服务器或者动画效果。
API组成:
(1)document.hidden: 表示页面是否隐藏,隐藏页面包括在后台标签中或者浏览器最小化。
(2)document.visibilityState: 表示下列4中可能状态的值:
a. 后台标签中或者浏览器最小化
b. 页面在前台标签页中
c. 实际页面已经隐藏,但用户可以看到页面的预览(如window7,鼠标移动到任务栏,可以预览浏览器的当前页面)
d. 页面在屏幕外执行预览渲染处理。
(3)visibilitychange事件: 当文档从可见变为不可见或从不可见变为可见时,触发该事件。

三、File API

1.file 对象

每个 input type='files' 的元素都有一个 files属性,当选择了一个或多个文件时,files中将包含一组 file 对象。每个 file 对象对应着一个文件。每个 file 对象包含以下属性:
a. name: 本地文件系统中的文件名
b. size: 文件的字节大小,单位是B
c. type: 字符串,文件的 MIME 类型
d. lastModifiedDate: 字符串,文件上一次被修改的时间

2. FileReader 对象

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
File对象可以是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以来自拖放操作生成的 DataTransfer 对象,还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。
(1)属性
a. error: 表示读取时发生错误。
b. readyState: 表示 FileReader 的状态。值为0,表示还没有加载任何数字;值为1,表示数据正在被加载;值为2,表示已完成全部的读取请求。
c. result: 文件的内容,该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。
(2)方法:
a. readAsText(file,encoding): 以纯文本形式读取文件,将读取到的文本保存在 result 属性中,第二个参数指定编码类型,是可选的。
b. readAsDataURL(file): 读取文件并将文件以数据URI的形式保存在 result 属性中。
c. readAsBinaryBuffer(file): 读取文件并将一个字符串保存在 result 属性中,字符串的每个字符表示一字节。
d. readAsArrayBuffer(file): 读取文件并将一个包含文件内容的 ArrayBuffer 保存在 result 属性中。
e. abort(): 中断读取过程。
(3)事件:
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 事件后,就会触发该事件
实例:读取图片文件和txt文件,本地显示

3.读取部分内容
当我们想读取文件的一部分内容时,可以使用 file 对象的 slice() 方法,改方法接收两个参数:起始字节和要读取的字节数。只读取一部分内容可以节省时间,适合只关注数据中的特定部分的情况。
例如:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复