最近学习了requestAnimationFrame，看了张鑫旭直白易懂，但是某些地方语言过于裸露的文章http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/，文章里的例子：http://www.zhangxinxu.com/study/201309/requestanimationframe-tween-easeoutbounce.html让我觉得这个requestAnimationFrame很厉害，虽然我对动画的接触还不多，但是我会努力的。

requestAnimationFrame是什么么？

requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API：

说简单点

    • setInterval、setTimeout是开发者主动要求浏览器去绘制，但是由于种种问题，浏览器可能会漏掉部分命令
    • requestAnimationFrame 就是浏览器什么要开始绘制了浏览器自己知道，通过requestAnimationFrame 告诉开发者，这样就不会出现重复绘制丢失的问题了
    • requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧
    • 隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
    • requestAnimationFrame也会像setTimeout一样有一个返回值ID用于取消，可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调

下面是一个简单的例子：



<!doctype html><img id="book" style="background:red;opacity:1;position: relative; left: 500px;" alt="" width="100" height="123" data-mce-style="background: red; opacity: 1; position: relative; left: 500px;" /><div id="several"><br /></div><script type="text/javascript">

var book = document.getElementById('book')
var several = document.getElementById('several');

animate(book, {
left: 50,
duration: 2000
})

function animate(elem, options){
//动画初始值
var start = 500
//动画结束值
var end = options.left
//动画id
var timerId;
var createTime = function(){
return (+new Date)
}
//动画开始时间
var startTime = createTime();
var i = 0;

function tick(){
i++;
several.innerHTML = 'setInterval调用次数:' + i;
//每次变化的时间
var remaining = Math.max(0, startTime + options.duration - createTime())
var temp = remaining / options.duration || 0;
var percent = 1 - temp;
var stop = function(){
//停止动画
clearInterval(timerId);
timerId = null;
}
var setStyle = function(value){
elem.style['left'] = value + 'px'
}
//移动的距离
var now = (end - start) * percent + start;
if(percent === 1){
setStyle(now)
stop();
}else{
setStyle(now)
}
}

//开始执行动画
var timerId = setInterval(tick, 13);
}
</script>
    此处不用点了，因为我无法向页面添加js代码，可是，为什么我看到别人的博客中可以呢，伤心。

  1.       function runCode(cod1) {
  2.         var cod = window.document.all(cod1)
  3.         var code = cod.value;
  4.         var newwin = window.document.open('', '', '');
  5.         newwin.opener = null
  6.         newwin.document.write(code);
  7.         newwin.document.close();
  8.     }

我做了个练习：

每隔1s长生一个小方块，让其匀速下落，落到底部消失，如果碰到底部中间的方块，小方块消失，分数加1，这个例子还有很多不足的地方，我会继续完善：

  1.  <script>
  2.              window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  3.              var h=0;
                   var timer=setInterval(function(){
  4.              if(h>40){
  5.                  clearInterval(timer);return;
  6.              }else{
  7.              h+=1;
  8.              var isSucceed;
  9.              var isOnBelow;
  10.              var isStillOn;
  11.              var dotX;
  12.              var dot=new Dot();
  13.              dotX=dot.getName();
  14.              isStillOn=true;
  15.              animate(dot.dom, {
  16.                  top: window.innerHeight-dot.dom.offsetHeight,
  17.                  duration: 3000
  18.              });
  19.              function animate(elem, options){
  20.                  //动画初始值
  21.                  var start = 0
  22.                  //动画结束值
  23.                  var end = options.top
  24.                  var createTime = function(){
  25.                      return  (+new Date)
  26.                  }
  27.                  //动画开始时间
  28.                  var startTime = createTime();
  29.                  var timerId;
  30.                  //开始动画
  31.                  var startAnim = function() {
  32.                      timerId = requestAnimationFrame(tick,15);
  33.                  }
  34.                  //停止动画
  35.                  var stopAnim = function() {
  36.                      cancelAnimationFrame(timerId)
  37.                  }
  38.                  var number=0;
  39.                  var isRemove=true;
  40.                  function tick(){
  41.                      number++;
  42.                      //每次变化的时间
  43.                      var remaining = Math.max(0, startTime + options.duration - createTime())
  44.                      var temp = remaining / options.duration || 0;
  45.                      var percent = 1 - temp;
  46.                      var setStyle = function(value){
  47.                          elem.style['top'] = value + 'px';
  48.                          var centerW=center.offsetLeft;
  49.                          var centerH=center.offsetTop;
  50.                          if(value>=(centerH-42)){
  51.                              isOnBelow=true;
  52.                          }else{
  53.                              isOnBelow=false;
  54.                          }
  55.                         if(dotX>=(centerW-50)&&dotX<=(centerW+200)){
  56.                              isSucceed=true;
  57.                          }else{
  58.                              isSucceed=false;
  59.                          }
  60.                      }
  61.                      if(isRemove&&isOnBelow&&isSucceed){
  62.                          isRemove=false;
  63.                          stopAnim() ;
  64.                          document.getElementById("view").removeChild(elem);
  65.                          isStillOn=false;
  66.                          count++;
  67.                          document.getElementById("count").innerHTML="总分为:"+count+"分";
  68.                      }
  69.                      //移动的距离
  70.                      var now = (end - start) * percent + start;
  71.                      if(percent === 1){
  72.                          setStyle(now);
  73.                          if(isStillOn){
  74.                              document.getElementById("view").removeChild(elem);
  75.                          }
  76.                          stopAnim() ;
  77.                      }else{
  78.                          setStyle(now);
  79.                          startAnim(tick);
  80.                      }
  81.                  }
  82.                  //开始执行动画
  83.                  startAnim(tick);
  84.              }
  85.          }},1000)
  86.          document.getElementById("center").addEventListener("touchmove",function(e){
  87.                   var touch=e.targetTouches[0].pageX;
  88.                   // if(touch<0){touch=100;}
  89.                   // if(touch>(document.body.clientWidth-center.clientWidth)){touch=document.body.clientWidth-center.clientWidth+100}
  90.                   document.getElementById("center").style.left=touch+"px";
  91.          });
  92.  
  93.      </script>

使用requestAnimationFrame做动画效果一的更多相关文章

  1. 使用requestAnimationFrame做动画效果二

    3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...

  2. requestAnimationFrame 持续动画效果

    1. requestAnimationFrame 概述 requestAnimationFrame 是浏览器用于定时循环操作的一个API, 类似于setTimeout, 主要用途是按帧对网页进行重绘. ...

  3. PDF转任意格式 & 做动画效果

    1.PDF转任意格式 & 做动画效果|让PPT傻眼去吧! http://www.aiweibang.com/yuedu/6984803.html

  4. 原生js动画效果（源码解析）

    在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...

  5. ios 动画效果CATransition笔记

    初学ios开发,很多概念还不清楚,所以只有边学边做例子.又怕学了后面忘了前面,因此用自己的博客来纪录自己的学习历程,也是对自己学习不要懈怠做个监督. 刚学ios做动画效果.因为ios封装得很好,实现i ...

  6. transition和animation做动画（css动画二）

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...

  7. 前端基础-jQuery的动画效果

    阅读目录 隐藏 显示 切换 下拉 上卷 显示 一.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局, ...

  8. jQuery 动画效果 与 动画队列

    基础效果 .hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置 display 属性 $('.target').hide() ...

  9. 【从无到有】教你使用animation做简单的动画效果

    今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...

随机推荐

  1. Android判断网路是否畅通加权限

    权限 <uses-permission android:name="android.permission.INTERNET"/> <uses-permission ...

  2. IOS随机随学

    1.Objective-C是一种面向对象的语言. 2.Objective-C类声明和实现包括两个部分:接口部分和实现部分. 3.Objective-C中方法不是在“.”运算符,而是采用“[]”运算符. ...

  3. 这次是Selenide测试自动发送博客

    asdfasfdfsdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaafdsfasdfdas

  4. dm9000c 移值新内核 linux-4.1.24

    错误 1 /home/dm9000/dm9dev9000c.c:309: error: conflicting types for 'phy_read'include/linux/phy.h:637: ...

  5. 为什么导入数据库要加入set names utf-8

    Repinted:http://blog.csdn.NET/class1/archive/2006/12/30/1469298.aspx 为了让你的网页能在更多的服务器上正常地显示,还是加上" ...

  6. CAS示例环境部署及配置

    http://wenku.baidu.com/link?url=d6JjWqOtuUediSkV18XagtVG9lVC2hTiaIEimfIgv1PIW8RMA1sXeIqqtJkW90lleYPQ ...

  7. [解决方案]vs2015无法解析外部符号__imp__fprintf和__imp____iob_func

    转自:http://www.cnblogs.com/ubosm/p/5444919.html 使用vs2015编译ffmpeg的一个小项时,出现了__imp__fprintf和__imp____iob ...

  8. Linux Shell基础知识

    一.文件系统和安全 chmod命令 chmod命令有两种模式,一种是符号模式,用ugo执行用户,用rwx执行权限:另一种是绝对模式,用八进制不同位置的不同值来代表不同用户的不同权限. 符号模式 chm ...

  9. dynamic与匿名对象

    用dynamic接收匿名对象很方便,因为不需要去定义model了,但是也有一个弊端,就是匿名对象的作用范围是internal的,也就是只能存在于当前程序域,所以用dynimic跨程序域去接收一个匿名对 ...

  10. Swift_1基础

    // swift中导入类库使用import,不再使用<>和""import Foundation // 输出print("Hello, World!" ...