JS动画三剑客——setTimeout、setInterval、requestAnimationFrame
一、前言 前端实现动画效果主要有以下几种方法:CSS3中的transition 和 animation ,Javascript 中可以通过定时器 setTimeout、setinterval,HTML5 canvas,HTML5提供的requestAnimationFrame。本文主要分析setTimeout、setinterval、requestAnimationFrame三者的区别和他们各自的优缺点。在了解他们三个之前,我们先来看看一些相关概念。 二、相关概念介绍 1.屏幕刷新频率 即图像在屏幕上更新的速度,也即屏幕上的图像每秒钟出现的次数,它的单位是赫兹(Hz)。 对于一般笔记本电脑,这个频率大概是60Hz。这个值的设定受屏幕分辨率、屏幕尺寸和显卡的影响。 2.动画原理 动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果,这个变化要以连贯的、平滑的方式进行过渡。在屏幕每次刷新前,将图像的位置向左移动一个像素,即1px。屏幕每次刷出来的图像位置都比前一个要差1px,你就会看到图像在移动;由于我们人眼的视觉停留效应,当前位置的图像停留在大脑的印象还没消失,紧接着图像又被移到了下一个位置,因此你才会看到图像在流畅的移动,这就是视觉效果上形成的动画。 三、setInterval 1.运行机制 按照指定的周期(以毫秒计)来调用函数或计算表达式