cvmachine.com - 申博开户网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:怎么样基于HTML5+webkit实现树叶飘落动画?

怎么样基于HTML5+webkit实现树叶飘落动画?

2018-01-05 17:49:16 来源:www.cvmachine.com 【

怎么样基于HTML5+webkit实现树叶飘落动画?

实现如图所示的东西效果(落叶下落):

怎么样基于HTML5+webkit实现树叶飘落动画?

html代码:

<!DOCTYPE html>
<html>
<head>
  <title>HTML5树叶飘落动画</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=500px, initial-scale=0.64">
  <link rel="stylesheet" href="leaves.css" type="text/css">
  <script src="leaves.js" type="text/javascript"></script>
</head>
<body>
  <div id="container">
    <div id="leafContainer"></div>
    <div id="message">
      <em>这是基于webkit的落叶动画</em>
    </div>
  </div> 
</body>
</html>
css代码:
body{
  background-color: #4E4226;
}
#container {
  position: relative;
  height: 700px;
  width: 500px;
  margin: 10px auto;
  overflow: hidden;
  border: 4px solid #5C090A;
  background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;
}
#leafContainer {
  position: absolute;
  width: 100%;
  height: 100%;
}
#message{
  position: absolute;
  top: 160px;
  width: 100%;
  height: 300px;
  background:transparent url('images/textBackground.png') repeat-x center;
  color: #5C090A;
  font-size: 220%;
  font-family: 'Georgia';
  text-align: center;
  padding: 20px 10px;
  -webkit-box-sizing: border-box;
  -webkit-background-size: 100% 100%;
  z-index: 1;
}
em {
  font-weight: bold;
  font-style: normal;
}
#leafContainer > div {
  position: absolute;
  width: 100px;
  height: 100px;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: linear;
}
#leafContainer > div > img {
   position: absolute;
   width: 100px;
   height: 100px;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-transform-origin: 50% -100%;
}
@-webkit-keyframes fade{
  0%  { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}
@-webkit-keyframes drop{
  0%  { -webkit-transform: translate(0px, -50px); }
  100% { -webkit-transform: translate(0px, 650px); }
}
@-webkit-keyframes clockwiseSpin{
  0%  { -webkit-transform: rotate(-50deg); }
  100% { -webkit-transform: rotate(50deg); }
}
@-webkit-keyframes counterclockwiseSpinAndFlip {
  0%  { -webkit-transform: scale(-1, 1) rotate(50deg); }
  100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}
js代码:
const NUMBER_OF_LEAVES = 30;
function init(){
  var container = document.getElementById('leafContainer');
  for (var i = 0; i < NUMBER_OF_LEAVES; i++) {
    container.appendChild(createALeaf());
  }
}
function randomInteger(low, high){
  return low + Math.floor(Math.random() * (high - low));
}
function randomFloat(low, high){
  return low + Math.random() * (high - low);
}
function pixelValue(value){
  return value + 'px';
}
function durationValue(value){
  return value + 's';
}
function createALeaf(){
  var leafDiv = document.createElement('div');
  leafDiv.style.top = "-100px";
  leafDiv.style.left = pixelValue(randomInteger(0, 500));
  leafDiv.style.webkitAnimationName = 'fade, drop';
  var fadeAndDropDuration = durationValue(randomFloat(5, 11));
  leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
  var leafDelay = durationValue(randomFloat(0, 5));
  leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
  var image = document.createElement('img');
  image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';
  var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
  image.style.webkitAnimationName = spinAnimationName;
  var spinDuration = durationValue(randomFloat(4, 8));
  image.style.webkitAnimationDuration = spinDuration;
  leafDiv.appendChild(image);
  return leafDiv;
}
window.addEventListener('load', init, false);

PS:下面看下html5 canvas处理连续帧图片,下面的代码基于IE8以上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Canvas Demo</title>
<script>
var canvas = null;//初始化参数
var img = null;
var ctx = null;
var imageReady = false;
window.onload = function() {
  var canvas = document.getElementById("animation_canvas");
  canvas.width = canvas.parentNode.clientWidth;
  canvas.height = canvas.parentNode.clientHeight;
  if (!canvas.getContext) {
    console.log("Canvas not supported. Please install a HTML5 compatible browser.");
    return;
  }  
  // get 2D context of canvas and draw rectangel
  ctx = canvas.getContext("2d");
  ctx.fillStyle="black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  console.log(canvas.height);
  img = document.createElement('img');
  img.src = "images/ab0.png";
  img.onload = loaded();
} 
//保证只有图像加载后才开始循环动画
function loaded() {
  imageReady = true;
  setTimeout( update, 1000/3);//添加3帧每秒间隔计时器
}
function redraw() {
  ctx.fillStyle="black";
  ctx.fillRect(0, 0, 460, 460);
  ctx.drawImage(img, 0, 0, 232, 180);
}  
//为了让图片以规定的速度动画,我们必须追踪已经经过的时间,然后根据分配给每帧的时间播放郑基本步骤是:
//1、按每秒几帧设置动画速度(msPerFrame)。
//2、当你循环游戏时,计算一下自最后一帧以后已经经过了多少时间(delta)。
//3、如果已经经过的时间足够把动画帧播完,那么播放这一帧并设置累积delta为0。
//4、如果已经经过的时间不够,那么记住(累积)delta时间(acDelta)。
var frame = 0;
var lastUpdateTime = 0;
var acDelta = 0;
var msPerFrame = 200;
function update() {
  requestAnimFrame(update);
  var delta = Date.now() - lastUpdateTime;
  //console.log(Date.now(),lastUpdateTime);
  if (acDelta > msPerFrame){
    acDelta = 0;
    redraw();
    img.src='images/ab'+frame+'.png';
    frame++; 
    if(frame >= 3) frame = 0; //当绘制后且帧推进完,计时器就会重置。
  }else{
    acDelta += delta;
  }
  lastUpdateTime = Date.now();
}
//requestAnimFrame的作用基本上就是setTimeout,但浏览器知道你正在渲染帧,所以它可以优化绘制循环,以及如何与剩下的页面回流。
//在某些情况下,setTimeout比requestAnimFrame更好用,特别是对于手机。
//以下是在不同的浏览器上调用requestAnimFrame的情况也不同,标准的检测方法如下:
window.requestAnimFrame = (function(){
  return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function( callback ){
        window.setTimeout(callback, 1000 / 3); //如果requestAnimFrame支持不可用,还是可以用回内置的setTimeout。
      };
})();
</script>
</head>
<body style="position:absolute;margin:0;padding:0;width:100%;height:100%;">
  <canvas id="animation_canvas"></canvas>
</body>
</html>

总结

以上所述是小编给大家介绍的基于HTML5+Webkit实现树叶飘落动画,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对申博开户网站的支持!


本文地址:http://www.cvmachine.com/a/question/95616.html
Tags: 实现 基于 HTML5+Webkit
编辑:申博开户网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部
m88.com m88 vwin 188bet uedbet 威廉希尔 vwin 明升 bwin 明升88 bodog bwin 明升m88.com m88 18luck 188bet 博狗 澳门金沙 澳门彩票 unibet unibet Ladbrokes Ladbrokes 12bet 真钱的棋牌游戏 皇冠娱乐 casino casino m88明升 明升88 明升 明升 明升 明升 m88.com m88.com