Shulou(Shulou.com)05/31 Report--

This article mainly explains "HTML5+Webkit how to achieve leaf falling animation", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "HTML5+Webkit how to achieve leaf falling animation" bar!

To achieve the east-west effect (falling leaves) as shown in the figure:

Html Code:

HTML5 Leaf falling Animation this is the webkit-based fallen leaf animation css code: 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 Code: const NUMBER_OF_LEAVES = 30 X 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以上 Canvas Demovar canvas = null;//初始化参数var img = null;var ctx = null;var imageReady = false;_window.onload = function() { var canvas = document.getElementById("animation_canvas"); canvas.width = canvas[xss_clean].clientWidth; canvas.height = canvas[xss_clean].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; / / the timer is reset when the frame is drawn and the frame is advanced. } else {acDelta + = delta;} lastUpdateTime = Date.now ();} / / requestAnimFrame is basically setTimeout, but the browser knows you are rendering the frame, so it can optimize the drawing loop and how to flow back with the rest of the page. / / in some cases, setTimeout is easier to use than requestAnimFrame, especially for mobile phones. / / the following is how requestAnimFrame is called on different browsers. The standard detection method is as follows: window.requestAnimFrame = (function () {return window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame | | function (callback) {window.setTimeout (callback, 1000 / 3)) / / if requestAnimFrame support is not available, you can still use the built-in setTimeout. Thank you for reading, the above is the content of "how to realize the animation of falling leaves in HTML5+Webkit". After the study of this article, I believe you have a deeper understanding of how to realize the animation of falling leaves in HTML5+Webkit, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.