requestAnimationFrame.js

 window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || function( /* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / 60);
};
})();

页面主要代码:

 <!DOCTYPE HTML>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>视差动画</title>
<script type="text/javascript" src="js/jquery8.js"></script>
<script type="text/javascript" src="js/requestAnimationFrame.js"></script>
<style type="text/css">
body {
background:#dddddd;
}
#control {
width:1000px;
margin:0 auto;
}
#containter {
text-align:center;
} #canavas {
margin:10px;
padding:10px;
background:#ffffff;
border:thin #aaaaaa;
}
</style>
<script type="text/javascript"> $(function() { canvas = jQuery("#canavas")[0];
content = canvas.getContext("2d"); //天空背景
sky = new Image();
sky.src = "image/back.jpg"; //云朵
c1 = new Image();
c1.src = "image/cloud2.png"; c2 = new Image();
c2.src = "image/cloud1.jpg"; c3 = new Image();
c3.src = "image/cloud3.jpg"; lastTime = (+new Date())
requestAnimFrame(animate); pause=false;
$("#b1").click(function(){ pause=!pause; }); });
//获取随机数据
function getRandom(min, max) { return parseInt(Math.random() * (max - min) + min); } SKY_VELOCITY = 50;
skyOffset = 0; C1_VELOCITY = 100;
c1Offset = 0; C2_VELOCITY = 150;
c2Offset = 0; C3_VELOCITY = 200;
c3Offset = 0; fangxiag = 1; function drawBack() { //背景移位
skyOffset = skyOffset < sky.width ? skyOffset + SKY_VELOCITY / fps : 0; //远/中/近 三处的云朵移位
c1Offset = c1Offset < canvas.width ? c1Offset + C1_VELOCITY / fps : 0;
c2Offset = c2Offset < canvas.width ? c2Offset + C2_VELOCITY / fps : 0;
c3Offset = c3Offset < canvas.width ? c3Offset + C3_VELOCITY / fps : 0; //绘制三朵云
content.save();
content.translate(-skyOffset, 0);
content.drawImage(sky, 0, 0);
content.drawImage(sky, sky.width, 0);
content.restore(); content.save();
content.translate(-c1Offset, 0);
content.drawImage(c1, 50, 50);
content.drawImage(c1, 600, 70);
content.drawImage(c1, 1050, 50);
content.drawImage(c1, 1600, 70);
content.restore(); content.save();
content.translate(-c2Offset, 0);
content.drawImage(c2, 130, 120);
content.drawImage(c2, 730, 170);
content.drawImage(c2, 1130, 120);
content.drawImage(c2, 1730, 170);
content.restore(); content.save();
content.translate(-c3Offset, 0);
content.drawImage(c3, 600, 250);
content.drawImage(c3, 100, 320);
content.drawImage(c3, 1600, 250);
content.drawImage(c3, 110, 320);
content.restore(); } fps = 0;
//实现动画
function animate(time) { if(!pause){ //清楚背景
content.clearRect(0, 0, canvas.width, canvas.height);
//计算fps
fps = geFps(time); //绘制背景
drawBack(); //绘制即时参数
content.fillText(fps.toFixed() + " fps", 20, 20); }else{ lastFpsUpdateTime=time; }
//继续下一帧动画
requestAnimFrame(animate);
} var lastFpsUpdateTime = 0;
//计算fps
function geFps(time) { fps = 1000 / (time - lastFpsUpdateTime); lastFpsUpdateTime = time; return fps; }
</script>
</head> <body>
<div id="control">
<input id="b1" type="button" value="暂停" /> </div>
<div id="containter">
<canvas id="canavas" width="500" height="200"></canvas>
</div>
</body> </html>

来看效果:

htm5实现视差动画的更多相关文章

  1. Swift - 用UIScrollView实现视差动画效果

    Swift - 用UIScrollView实现视差动画效果 效果 源码 https://github.com/YouXianMing/Swift-Animations // // MoreInfoVi ...

  2. 【安卓高级】ViewPager视差动画效果

    在安卓开发中,是否遇见过一些很酷的视差动画效果,当ViewPager滑动下一页的时候,页面内的各种元素也能跟随滑动做位移效果,整体看起来非常有活力. 关键的PageTransformer PageTr ...

  3. Android ViewPager+属性动画 实现炫酷视差动画效果

    ViewPager有一个setPageTransform()方法可以实现很多酷炫的动画效果 先来个仿QQ的侧滑面板效果 vp.setPageTransformer(true, new PageTran ...

  4. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7

    性能 运行putImageData()比drawImage()慢,同等条件下优先考虑drawImage() 操作图像数据需要遍历大量数据,应该注意几点: 1)避免在循环体中直接访问对象属性,应当保存在 ...

  5. android仿漫画源码、抽奖转盘、Google相册、动画源码等

    Android精选源码 android实现仿今日头条的开源项目 波浪效果,实现流量的动态显示 美妆领域的app, 集成了摄像头取色, 朋友圈, 滤镜等 android仿漫画源码 android一个视差 ...

  6. 视差滚动(Parallax Scrolling)的一点小心得

    下面内容来源于我知乎的这个答案:http://www.zhihu.com/question/20990029/answer/21436067 假期有空,整理到博客园这边,并做了一些语境的调整. ——— ...

  7. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  8. [译]理解 Windows UI 动画引擎

    本文译自 Nick Waggoner 的 "Understand what’s possible with the Windows UI Animation Engine",已获原 ...

  9. [Swift通天遁地]九、拔剑吧-(14)创建更美观的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. mmc生产运输问题

    本题目结合生产和运输,增加了约束, 其实,比较生产,运输问题,大同小异, 解法基本相同.

  2. 进程和cpu的相关知识和简单调优方案

    进程就是一段执行的程序,每当一个程序执行时.对于操作系统本身来说,就创建了一个进程,而且分配了相应的资源.进程能够分为3个类别:     1.交互式进程(I/O)     2.批处理进程 (CPU) ...

  3. ERROR 1227 (42000): Access denied; you need (at least one of) the PROCESS privilege(s) for this oper

    1  用以往的mysql登陆模式登陆 [mysql@eanintmydbc002db1 mysqllog]$ mysql Enter password:  Welcome to the MySQL m ...

  4. Linux用户及用户组设置

    查看当前用户所属的组 groups  查看<user1>, <user2> 和 <user3>所属的组 groups <user1> <user2 ...

  5. 使用hibernate自动创建Mysql表失败原因

    1.使用 schemaExport(hibernate5.2.3)创建Mysql表 @Test public void testSchemaExport() { ServiceRegistry ser ...

  6. CASS转ARCGIS

    本文转载千浪兄弟博客 1.先看看这张图:CASS的扩展属性 ("south" (1000 . "310000")) 对应图斑属性编码“310000”,(&quo ...

  7. [改善Java代码]不要让四舍五入亏了一方

    建议25: 不要让四舍五入亏了一方 本建议还是来重温一个小学数学问题:四舍五入.四舍五入是一种近似精确的计算方法,在Java 5之前,我们一般是通过使用Math.round来获得指定精度的整数或小数的 ...

  8. Netbackup磁带过期处理

    bpexpdate -m <mediaid> -d 0 如果不通过,看是否被其他media server写入数据.使用 nbemmcmd -listhost 查看所有media serve ...

  9. loadrunner做webservice接口之简单调用

    今天听大神讲了webservice做接口,我按照他大概讲的意思自己模拟实战了下,可能还有很多不对,一般使用webservice做接口,会使用到soapui,但是用了loadrunner以后发现lr很快 ...

  10. 一个js排序

     ]                           d = d[a];          e = e[a];                                d =         ...