在网页中，实现动画无外乎两种方式。
1. CSS3 方式，也就是利用浏览器对CSS3 的原生支持实现动画；
2. 脚本方式，通过间隔一段时间用JavaScript 来修改页面元素样式来实现动画。
接下来我们就分别介绍这两种方式的原理，让大家先对这两种方式有一个直观认识，了解各自的优缺点。

CSS3 的方式下，开发者一般在css 中定义一些包含CSS3 transition 语法的规则。在某些特定情况下，让这些规则发生作用，于是浏览器就会将这些规则应用于指定的DOM元素上，产生动画的效果。这种方式毫无疑问运行效率要比脚本方式高，因为浏览器原生支持，省去了JavaScript 的解释执行负担，有的浏览器（比如Chrome 浏览器）甚至还可以充分利用GPU 加速的优势，进一步增强了动画渲染的性能。不过CSS3 的方式并非完美，也有不少缺点。
首先， CSS3 Transition 对一个动画规则的定义是基于时间和速度曲线（ Speed Curve)的规则。换句话来说，就是CSS3 的动画过程要描述成“在什么时间范围内，以什么样的运动节奏完成动画” 。

<!DOCTYPE html>

<html>

  <head>

    <style>

.sample {

  background: red;

  position: absolute;

  left: 0px;

  width: 100px;

  height: 100px;

  transition-property: left;

  transition-duration: 0.5s;

  transition-timing-function: ease

}

.sample:hover {

  left: 420px;

}

    </style>

  </head>

  <body>

    <div class="sample" />

  </body>

</html>

在上面的例子中， sample 类的元素定义了这样的动画属性：“ left 属性会在0.2 秒内以ease 速度曲线完成动画” 。transition 只定义了动画涉及的属性、时间和速度曲线，并不定义需要修改的具体值。sample 类的left 属性默认值为0 ，当鼠标移到sample 类元素上时， left 属性就拥有新的值420px 。这时候transition 定义的规则发生作用，让left 属性以ease 速度曲线在0.2 秒
的时间完成从0 变成420px 的转化过程，这个过程中，用户看到的就是sample 类元素向右移动420 个像素的动画过程。
        因为CSS3 定义动画的方式是基于时间和速度曲线，可能不利于动画的流畅，因为动画是可能会被中途打断的，在上面的例子中，鼠标移到sample 类元素上的时候开始动画，但是在0.2 秒的动画时间内，用户的鼠标可能会移出这个sample 类元素，这时候CSS3 还会以ease 速度曲线的节奏让sample 类元素回到原位。从用户体验角度来说，中途sample 类元素回到原位的动作，语义上是“取消操作”的含义，但却依然以同样的时间和ease 节奏来完成“取消操作”的动画，这并不合理。

时间和速度曲线的不合理是CSS3 先天的属性，更让开发者头疼的就是开发CSS3 规则的过程，尤其是对transition-duration 时间很短的动画调试，因为CSS3 的transition 过程总是一闪而过，捕捉不到中间状态，只能一遍一遍用肉眼去检验动画效果，用CSS3做过复杂动画的开发者肯定都深有体会。虽然CSS3 有这样一些缺点，但是因为其无与伦比的性能，用来处理一些简单的动画还是不错的选择。

相对于CSS3 方式，脚本方式最大的好处就是更强的灵活度，开发者可以任意控制动画的时间长度，也可以控制每个时间点上元素渲染出来的样式，可以更容易做出丰富的动画效果。脚本方式的缺点也很明显，动画过程通过JavaScript 实现，不是浏览器原生支持，消耗的计算资源更多。如果处理不当，动画可能会出现卡顿滞后现象，本来使用动画是为了创造更好的用户体验，如果出现卡顿，反而对用户体验带来不好的影响。最原始的脚本方式就是利用setlnterval 或者setTimeout 来实现，每隔一段时间一个指定的函数被执行来修改界面的内容或者样式，从而达到动画的效果。

<!DOCTYPE html>

<html>

  <head>

    <style>

#sample {

  position: absolute;

  background: red;

  width: 100px;

  height: 100px;

}

    </style>

  </head>

  <body>

    <div id="sample" />

    <script type="text/javascript">

var animatedElement = document.getElementById("sample");

var left = 0;

var timer;

var ANIMATION_INTERVAL = 16;

timer = setInterval(function() {

  left += 10;

  animatedElement.style.left = left + "px";

  if ( left >= 400 ) {

    clearInterval(timer);

  }

}, ANIMATION_INTERVAL);

    </script>

  </body>

</html>

在上面的例子中，有一个常量ANIMATION INTERVAL 定义为16 , setlnterval 以这个常量为间隔，每16 毫秒计算一次sample 元素的left 值，每次都根据时间推移按比例增加left 的值，直到left 大于400 。为什么要选择16 毫秒呢？因为每秒渲染60 帧（也叫60fps, 60 Frame Per Second)会给用户带来足够流畅的视觉体验，一秒钟有1000 毫秒， 1000 /60 =16 ，也就是说，如果我们做到每16 毫秒去渲染一次画面，就能够达到比较流畅的动画效果。对于简单的动画， setlnterval 方式勉强能够及格，但是对于稍微复杂一些的动画，脚本方式就顶不住了，比如渲染一帧要花去超过32 毫秒的时间，那么还用16 毫秒一个间隔的方式肯定不行。实际上，因为一帧渲染要占用网页线程32 毫秒，会导致setlnterval根本无法以16 毫秒间隔调用渲染函数，这就产生了明显的动画滞后感，原本一秒钟完成的动画现在要花两秒钟完成，所以这种原始的setlnterval 方式是肯定不适合复杂的动画的。
       出现上面问题的本质原因是setlnterval 和setTimeout 并不能保证在指定时间间隔或者延迟的情况下准时调用指定函数。所以可以换一个思路，当指定函数调用的时候，根据逝去的时间计算当前这一帧应该显示成什么样子，这样即使因为浏览器渲染主线程忙碌导致一帧渲染时间超过16 毫秒，在后续帧谊染时至少内容不会因此滞后，即使达不倒60fps 的效果，也能保证动画在指定时间内完成。

<!DOCTYPE html>

<html>

  <head>

    <style>

#sample {

  position: absolute;

  background: red;

  width: 100px;

  height: 100px;

}

    </style>

  </head>

  <body>

    <div id="sample" />

    <script type="text/javascript">

var lastTimeStamp = new Date().getTime();

function raf(fn) {

  var currTimeStamp = new Date().getTime();

  var delay  = Math.max(0, 16 - (currTimeStamp - lastTimeStamp));

  var handle = setTimeout(function(){

    fn(currTimeStamp);

  }, delay);

  lastTimeStamp = currTimeStamp;

  return handle;

}

var left = 0;

var animatedElement = document.getElementById("sample");

var startTimestamp = new Date().getTime();

function render(timestamp) {

  left += (timestamp - startTimestamp) / 16;

  animatedElement.style.left = left + 'px';

  if (left < 400) {

    raf(render);

  }

}

raf(render);

    </script>

  </body>

</html>

在上面定义的raf 中，接受的fn 函数参数是真正的渲染过程， raf 只是协调渲染的节奏。raf 尽量以每隔16 毫秒的速度去调用传递的fn 参数，如果发现上一次被调用时间和这一次被调用时间相差不足16 毫秒，就会保持16 毫秒一次的渲染间隔继续，如果发现
两次调用时间间隔已经超出了16 毫秒，就会在下一次时钟周期立刻调用fn 。上面的render 函数中根据当前时间和开始动画的时间差来计算sample 元素的left 属性，这样无论render 函数何时被调用，总能够渲染出正确的结果。
最后，我们将render 作为参数传递给raf ，启动了动画过程



HTML动画 request animation frame的更多相关文章

  1. Android动画效果之Frame Animation（逐帧动画）

    前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

  2. Android动画主要包含补间动画（Tween）View Animation、帧动画（Frame）Drawable Animation、以及属性动画Property Animation

    程序运行效果图: Android动画主要包含补间动画(Tween)View Animation.帧动画(Frame)Drawable Animation.以及属性动画Property Animatio ...

  3. Android动画总结#补间动画(Tween Animation/View Animation) #帧动画(Frame Animation/Drawable Animation)#属性动画(PropertyAnimation)

    1.共有三种动画,英文名字多种叫法如下 第一种动画:补间动画(Tween Animation/View Animation) 四个:RotateAnimation旋转. AlphaAnimation透 ...

  4. 动画(Animation) 、 高级动画(Core Animation)

    1 演示UIImage制作的动画 1.1 问题 UIImage动画是IOS提供的最基本的动画,通常用于制作一些小型的动画,本案例使用UIImage制作一个小狗跑动的动画,如图-1所示: 图-1 1.2 ...

  5. 【Android UI设计和开发】动画（Animation）详细说明(一)

    Android开发之动画效果浅析 请尊重他人的劳动成果.转载请注明出处:Android开发之动画效果浅析 程序执行效果图: Android动画主要包括补间动画(Tween)View Animation ...

  6. Android 动画——属性动画Property Animation

    Android在3.0之前只提供了两种动画:View Animation .Drawable Animation .也就是我们在<Android 动画——Frame Animation与Twee ...

  7. .net mvc 站点自带简易SSL加密传输 Word报告自动生成（例如 导出数据库结构） 微信小程序：动画（Animation） SignalR 设计理念(一) ASP.NET -- WebForm -- ViewState ASP.NET -- 一般处理程序ashx 常用到的一些js方法，记录一下 CryptoJS与C#AES加解密互转

    .net mvc 站点自带简易SSL加密传输   因项目需要,传输数据需要加密,因此有了一些经验,现简易抽出来分享! 请求:前端cryptojs用rsa/aes 或 rsa/des加密,后端.net ...

  8. iOS 核心动画 Core Animation浅谈

    代码地址如下:http://www.demodashi.com/demo/11603.html 前记 关于实现一个iOS动画,如果简单的,我们可以直接调用UIView的代码块来实现,虽然使用UIVie ...

  9. android 补间动画和Animation

    介绍: 补间动画是一种设定动画开始状态.结束状态,其中间的变化由系统计算补充.这也是他叫做补间动画的原因. 补间动画由Animation类来实现具体效果,包括平移(TranslateAnimation ...

随机推荐

  1. BZOJ1117 [POI2009]救火站Gas 贪心

    原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ1117.html 题目传送门 - BZOJ1117 题意 给你一棵树,现在要建立一些消防站,有以下要求: ...

  2. 实践出真知-所谓"java没有指针"，那叫做引用！

    java没有指针,那我们如何实现动态数组呢? 上篇评论提及 ”不仅有vector,还有ArrayList,还有List,可做选择“. "java没有指针",那叫做引用! 今天尝试了 ...

  3. （openssl_pkey_get_private 函数不存在）phpstudy开启openssl.dll 时提示httpd.exe 丢失libssl-1_1.dll

    下载libssl-1_1.dll  丢到apache目录下的bin目录下(貌似要32位的)

  4. exporter API（导出、输出器api）moodel3.3

    Moodle[导出器]是接收数据并将其序列化为一个简单的预定义结构的类.它们确保输出的数据格式统一,易于维护.它们也用于生成外部函数的签名(参数和返回值) 外部函数定义在moodle/lib/exte ...

  5. 关于使用jmeter函数助手生成随机数的使用方法

    记录自己的生活!   1.使用jmeter函数助手的生成随机数的方法,主要包含以下几个函数:     [_Random]     [_RandomString]   2.关于[_Random]函数的说 ...

  6. 从小白到区块链工程师：第一阶段：Go语言中的函数学习（6）

    一. 为什么要有函数 我们在以后的编码过程中,有很多代码会重复出现,这些重复实现的代码,我们不需要每次需要用到的时候都编写,我们将重复的代码封装起来.比如在一个网站中,无论是消费的金额还是积分的积累等 ...

  7. swap

    添加交换分区 SWAP(交换)分区是一种通过在硬盘中预先划分一定的空间,然后将把内存中暂时不常用的数据临时存放到硬盘中,以便腾出物理内存空间让更活跃的程序服务来使用的技术,其设计目的是为了解决真实物理 ...

  8. for循环以及数据类型

    一.for循环(迭代式循环) 了解:当我们在写代码时,如果代码是纯运算的代码,会占用大量的CPU,如果是I/O代码,则不会占用CPU. for i in range(10):  #可以是任意类型(字符 ...

  9. 使用C#的is、as操作符来转型

    is检查对象是否兼容于指定类型,返回Boolean值true或false.使用is永远不会抛出异常. 例:Object o=new Object(); bool b1=(o is Object);// ...

  10. 全球第一款纯数据GPRS模块 有方M590 概述

    更多精彩请到http://blog.tuzhuke.info/?cat=30 M590为全球第一款纯数据GPRS模块,专注数据收发功能,GPRS数据以及短信数据.没有电话语音功能,可以能够拨打或者接听 ...