使用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;
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代码，可是，为什么我看到别人的博客中可以呢，伤心。
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 ...
随机推荐
- java socket 多线程通讯
1.目录结构 2.Server.java 代码 package de.bvb.server; import java.net.ServerSocket; import java.net.Socket; ...
- AC6102 开发板千兆以太网UDP传输实验2
AC6102 开发板千兆以太网UDP传输实验 在芯航线AC6102开发板上,设计了一路GMII接口的千兆以太网电路,通过该以太网电路,用户可以将FPGA采集或运算得到的数据传递给其他设备如PC或服务器 ...
- If you only do what you can do you'll never be more than you are now.
If you only do what you can do you'll never be more than you are now. 如果你只是做你力所能及的事,你将不会有所进步:
- POJ-1028 Web Navigation 和TOJ 1196. Web Navigation
Standard web browsers contain features to move backward and forward among the pages recently visited ...
- Struts框架 内部资料 请勿转载 谢谢合作
Struts框架 struts框架具有组件的模块化,灵活性和重用性的优点,同时简化了基于MVC的web应用程序的开发. 本章详细讨论struts架构.我们将看到struts是如何清晰地区分控制,事务逻 ...
- Linux杂乱小知识点
1.不同网段的主机不能建立TCP连接 2.TCP客户端可以用bind绑定自己的IP与port(一般情况下不需要绑定,port由系统自动分配) 3.accept() 函数返回一个套接字,send / r ...
- Maven的安装配置
本文主要是针对mac os系统下maven的安装教程. 1.首先验证是否有jdk.java -version,没有需要手工安装 2.maven的下载地址:http://maven.apache.org ...
- boost库的使用
我的经验:在强调运行效率的场合:shared_ptr/weak_ptr很好用,尤其是weak_ptr这个能够判断一个对象的生命周期的玩意,可以简化和扩展很多设计.unordered系列的容器也很不错. ...
- 27-React Lists and Keys
Lists and Keys React支持以数组的形式来渲染多个组件,它会将你数组中的每个组件以列表的形式渲染开来. 当你使用数组的方式来渲染你的组件时,你需要给每个组件一个Key值,否则会出现一个 ...
- .NET蓝牙开源库：32feet.NET
在用C#调用蓝牙编程一文中我留个小悬念就是:InTheHand.Net.Personal.dll是怎么来的?这篇文章来解答这个问题,InTheHand.Net.Personal.dll就是来源于今天要 ...