HTMl页面加入落叶下雨动画 HTML5和Webkit实现树叶飘落动画

HTML5和Webkit在一起会实现什么样的动画呢？本文给大家分享一段实例代码给大家介绍基于HTML5+Webkit实现树叶飘落动画效果，需要的朋友参考下吧，希望能帮组到大家。

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

html代码：

HTML5树叶飘落动画

这是基于webkit的落叶动画

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 > p {

position: absolute;

width: 100px;

height: 100px;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: normal;

-webkit-animation-timing-function: linear;

}

#leafContainer > p > 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 leafp = document.createElement('p');

leafp.style.top = "-100px";

leafp.style.left = pixelValue(randomInteger(0, 500));

leafp.style.webkitAnimationName = 'fade, drop';

var fadeAndDropDuration = durationValue(randomFloat(5, 11));

leafp.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

var leafDelay = durationValue(randomFloat(0, 5));

leafp.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;

leafp.appendChild(image);

return leafp;

}

window.addEventListener('load', init, false);

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

Canvas Demo

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。

};

})();

相关推荐：