使用requestAnimationFrame做动画效果一

最近学习了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;

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

      function runCode(cod1) {

        var cod = window.document.all(cod1)

        var code = cod.value;

        var newwin = window.document.open('', '', '');

        newwin.opener = null

        newwin.document.write(code);

        newwin.document.close();

    }

我做了个练习：

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

 <script>

             window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

             var h=0;
               var timer=setInterval(function(){

             if(h>40){

                 clearInterval(timer);return;

             }else{

             h+=1;

             var isSucceed;

             var isOnBelow;

             var isStillOn;

             var dotX;

             var dot=new Dot();

             dotX=dot.getName();

             isStillOn=true;

             animate(dot.dom, {

                 top: window.innerHeight-dot.dom.offsetHeight,

                 duration: 3000

             });

             function animate(elem, options){

                 //动画初始值

                 var start = 0

                 //动画结束值

                 var end = options.top

                 var createTime = function(){

                     return  (+new Date)

                 }

                 //动画开始时间

                 var startTime = createTime();

                 var timerId;

                 //开始动画

                 var startAnim = function() {

                     timerId = requestAnimationFrame(tick,15);

                 }

                 //停止动画

                 var stopAnim = function() {

                     cancelAnimationFrame(timerId)

                 }

                 var number=0;

                 var isRemove=true;

                 function tick(){

                     number++;

                     //每次变化的时间

                     var remaining = Math.max(0, startTime + options.duration - createTime())

                     var temp = remaining / options.duration || 0;

                     var percent = 1 - temp;

                     var setStyle = function(value){

                         elem.style['top'] = value + 'px';

                         var centerW=center.offsetLeft;

                         var centerH=center.offsetTop;

                         if(value>=(centerH-42)){

                             isOnBelow=true;

                         }else{

                             isOnBelow=false;

                         }

                        if(dotX>=(centerW-50)&&dotX<=(centerW+200)){

                             isSucceed=true;

                         }else{

                             isSucceed=false;

                         }

                     }

                     if(isRemove&&isOnBelow&&isSucceed){

                         isRemove=false;

                         stopAnim() ;

                         document.getElementById("view").removeChild(elem);

                         isStillOn=false;

                         count++;

                         document.getElementById("count").innerHTML="总分为:"+count+"分";

                     }

                     //移动的距离

                     var now = (end - start) * percent + start;

                     if(percent === 1){

                         setStyle(now);

                         if(isStillOn){

                             document.getElementById("view").removeChild(elem);

                         }

                         stopAnim() ;

                     }else{

                         setStyle(now);

                         startAnim(tick);

                     }

                 }

                 //开始执行动画

                 startAnim(tick);

             }

         }},1000)

         document.getElementById("center").addEventListener("touchmove",function(e){

                  var touch=e.targetTouches[0].pageX;

                  // if(touch<0){touch=100;}

                  // if(touch>(document.body.clientWidth-center.clientWidth)){touch=document.body.clientWidth-center.clientWidth+100}

                  document.getElementById("center").style.left=touch+"px";

         });

     </script>

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

使用requestAnimationFrame做动画效果二
3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...
requestAnimationFrame 持续动画效果
1. requestAnimationFrame 概述 requestAnimationFrame 是浏览器用于定时循环操作的一个API, 类似于setTimeout, 主要用途是按帧对网页进行重绘. ...
PDF转任意格式 & 做动画效果
1.PDF转任意格式 & 做动画效果|让PPT傻眼去吧! http://www.aiweibang.com/yuedu/6984803.html
原生js动画效果（源码解析）
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
ios 动画效果CATransition笔记
初学ios开发,很多概念还不清楚,所以只有边学边做例子.又怕学了后面忘了前面,因此用自己的博客来纪录自己的学习历程,也是对自己学习不要懈怠做个监督. 刚学ios做动画效果.因为ios封装得很好,实现i ...
transition和animation做动画（css动画二）
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...
前端基础-jQuery的动画效果
阅读目录隐藏显示切换下拉上卷显示一.jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局, ...
jQuery 动画效果与动画队列
基础效果 .hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置 display 属性 $('.target').hide() ...
【从无到有】教你使用animation做简单的动画效果
今天写写怎么用animation属性做一些简单的动画效果在CSS选择器中,使用animition动画属性,调用声明好的关键帧首先声明一个动画(关键帧): @keyframes name{ from ...

随机推荐

PHP基础班初学感悟
不知不觉差不多一个月就过去了刚到培训班那时候的心情,现在也还能有所感觉作为今年6月份的毕业生,刚从大学的实习期出来,辞掉了上一份工作,本来是打算找一份更加与专业挂钩的工作做的也许是90后对网络的 ...
捷波朗 jabra BT3030 蓝牙耳机
蓝牙版本V2.0 通话时间 8小时按键说明:轻敲快按轻敲两下在1.5秒内快速按两下按大约 1秒钟按住大约 4秒钟充电提示绿灯闪亮正在充电持续绿灯已完全充满电检查电量按音量上调(+) ...
Kafka 0.9+Zookeeper3.4.6集群搭建、配置，新Client API的使用要点，高可用性测试，以及各种坑（转载）
Kafka 0.9版本对java client的api做出了较大调整,本文主要总结了Kafka 0.9在集群搭建.高可用性.新API方面的相关过程和细节,以及本人在安装调试过程中踩出的各种坑. 关于K ...
【转】工控老鬼】西门子S7200入门&精通【1】S7200硬件大全
转载地址:http://blog.sina.com.cn/s/blog_669692a601016i5f.html 工控老鬼提醒以下的信息和资料可能不全或者不准确,如有疑问可以查阅西门子中国网 ...
oncontextmenu事件
oncontextmenu的作用是阻止浏览器默认的鼠标右键行为. 阻止弹出右键自带菜单 document.oncontextmenu=function(){ console.log('你点击了右键') ...
Storm入门1-基本概念
[本篇文章主要是介绍Storm的特点.核心概念.以及Storm的生态现状:从总体上对storm有个基本的认识] Storm是Apache下的一个免费的.开源的.分布式流式计算框架,官方网址:https ...
Bootstrap_缩略图
缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息. Bootstrap框架将这一部独立成一个模块组件.并通过“thumbnail”样式配合 ...
Eclipse 启动出现错误 no java virtual machine was found
出现此问题的原因是eclipse找不到javaw.exe的path,打开eclipse.ini文件: -startup plugins/org.eclipse.equinox.launcher_1.3 ...
JavaScript精要（系列）
JavaScript精要系列 JavaScript精要(六):JavaScript DOM节点和文档类型 JavaScript精要(五):JavaScript数组类型 JavaScript精要(四): ...
Object-C
#import <Foundation/Foundation.h> #pragma mark 狗类的声明 @interface Dog:NSObject { @public NSStrin ...

使用requestAnimationFrame做动画效果一

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

随机推荐

热门专题