基于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);
    

@H_304_12@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实现树叶飘落动画，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！