เพื่อให้ได้เอฟเฟกต์ตามที่แสดงในภาพ (ใบไม้ร่วง):
รหัสเอชทีเอ็ม:
<!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{ สีพื้นหลัง: #4E4226;}#container { ตำแหน่ง: ความสูง: 700px; 500px; ระยะขอบ: 10px อัตโนมัติ ล้น: ซ่อนอยู่; เส้นขอบ: 4px ทึบ #5C090A; พื้นหลัง: #4E4226 url('images/wallpapers.jpg') ไม่ซ้ำบนซ้าย;}#leafContainer { ตำแหน่ง: สัมบูรณ์; ; ความสูง: 100%;}#message{ ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100% ความสูง: 300px; พื้นหลัง: url โปร่งใส ('รูปภาพ/textBackground.png') ทำซ้ำ-x center; สี: #5C090A; ขนาดตัวอักษร: 220%; : ศูนย์กลาง; การขยาย: 20px 10px; -webkit-box-sizing: border-box; 100% 100%; z-index: 1;} em { ตัวอักษร-น้ำหนัก: ตัวหนา; รูปแบบตัวอักษร: ปกติ;}#leafContainer > div { ตำแหน่ง: สัมบูรณ์; ความสูง: 100px; -count: อนันต์; -webkit-animation-direction: ปกติ; -webkit-animation-timing-function: linear;}#leafContainer > div > img { ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100px; ความสูง: 100px; ออก; -webkit-transform-origin: 50% -100%;}@-webkit-keyframes จางลง{ 0% { ความทึบ: 1; } 95% { ความทึบ: 1; } 100% { ความทึบ: 0; }@-webkit-keyframes ลดลง{ 0% { -webkit-transform: แปล (0px, -50px); แปล (0px, 650px); }@-webkit-keyframes ตามเข็มนาฬิกา{ 0% { -webkit-transform: หมุน(-50deg); } 100% { -webkit-transform: หมุน(50deg); }}@-webkit-keyframes counterclockwiseSpinAndFlip { 0% { -webkit-transform: scale(-1, 1) หมุน (50deg); } 100% { -webkit-transform: ขนาด (-1, 1) หมุน (-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()); }}ฟังก์ชัน RandomInteger(ต่ำ, สูง){ กลับต่ำ + Math.floor(Math.random() * (สูง - ต่ำ));}function RandomFloat(ต่ำ, สูง){ 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 = 'จางหายไป'; var fadeAndDropDuration = DurationValue(5, 11)); fadeAndDropDuration + ', ' + fadeAndDropDuration; leafDelay = ระยะเวลา (randomFloat (0, 5)); leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay; var image = document.createElement('img'); 1, 5) + '.png'; var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'ทวนเข็มนาฬิกาSpinAndFlip'; image.style.webkitAnimationName = spinDuration; var spinDuration = DurationValue(randomFloat(4, 8)); .addEventListener('load', init, false); PS: มาดูกันว่าผ้าใบ html5 จัดการกับภาพเฟรมต่อเนื่องกันอย่างไร โค้ดต่อไปนี้ใช้ IE8 ขึ้นไป <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content=width=device-width, default-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, ผู้ใช้ปรับขนาดได้ = no/><title>การสาธิต Canvas</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; console.log(ไม่รองรับ Canvas โปรดติดตั้งเบราว์เซอร์ที่รองรับ HTML5); return; } // รับบริบท 2D ของ Canvas และวาดรูปสี่เหลี่ยมผืนผ้า ctx = canvas.getContext(2d); ctx.fillStyle=black; ctx.fillRect(0, 0, canvas.width, canvas.height); img = document.createElement('img') img.src = images/ab0.png; img.onload = Loaded();} // ตรวจสอบให้แน่ใจว่าวงจรแอนิเมชั่นเริ่มต้นหลังจากโหลดฟังก์ชันรูปภาพแล้วเท่านั้น () { imageReady = true; setTimeout(update, 1000/3);//เพิ่ม 3 เฟรมต่อวินาที} function redraw() { ctx.fillStyle=black; img, 0, 0, 232, 180);} //เพื่อให้รูปภาพเคลื่อนไหวตามความเร็วที่กำหนด เราต้องติดตามเวลาที่ผ่านไปแล้วจึงเล่นเฟรมตามเวลาที่จัดสรรให้กับแต่ละเฟรม ขั้นตอนพื้นฐานคือ: //1. ตั้งค่าความเร็วของภาพเคลื่อนไหว (msPerFrame) เป็นเฟรมต่อวินาที //2. เมื่อคุณวนรอบเกม ให้คำนวณระยะเวลา (เดลต้า) ที่ผ่านไปนับตั้งแต่เฟรมที่แล้ว //3. หากเวลาผ่านไปเพียงพอที่จะทำให้เฟรมภาพเคลื่อนไหวสมบูรณ์ ให้เล่นเฟรมนี้และตั้งค่าเดลต้าสะสมเป็น 0 //4. หากเวลาที่ผ่านไปไม่เพียงพอ ให้จำ (สะสม) เวลาเดลต้า (acDelta) var frame = 0;var LastUpdateTime = 0;var acDelta = 0;var msPerFrame = 200;ฟังก์ชั่น อัพเดต() { requestAnimFrame(อัพเดต); var delta = Date.now() - LastUpdateTime; //console.log(Date.now (),lastUpdateTime); ถ้า (acDelta > msPerFrame){ acDelta = 0; 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 ||. ฟังก์ชั่น (โทรกลับ) { window.setTimeout (โทรกลับ, 1,000 / 3); // หากไม่มีการสนับสนุน requestAnimFrame คุณยังคงสามารถใช้ setTimeout ในตัว };})();</script></head><body style=position:absolute;margin:0;padding :0. ;ความกว้าง:100%;ความสูง:100%;> <canvas id=animation_canvas></canvas></body></html> สรุปข้างต้นคือการใช้งานแอนิเมชั่นใบไม้ร่วงโดยใช้ HTML5+Webkit ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!