ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5で画像アニメーション効果を追加する方法
HTML5 で画像アニメーション効果を追加する方法: 1. CSS3 アニメーションの手順を使用してスピリット アニメーションを実装します; 2. HTML5 キャンバスを使用して GIF 画像を実装します。
このチュートリアルの動作環境: Windows7 システム、html5&&css3 バージョン、DELL G3 コンピューター。
html5 画像アニメーション効果を追加する方法:
方法 1: CSS3 アニメーションの手順を使用して精霊スプライト アニメーションを実装します。 CSS3 グラデーション/アニメーションを適用する場合、時間を制御する属性があります
66aa3d34d47552b7b986fe2a4b5468d0。一般的に使用される 3 次ベジェ曲線に加えて、混乱を招く steps()
関数もあります。
最初のパラメータ番号は、指定された間隔番号 (正の整数である必要があります) です。つまり、アニメーションは段階的に表示するために n ステップに分割されます。2 番目のパラメータはデフォルトです。最後のステップのステータスを設定し、start は終了時のステータス、end は先頭のステータスを設定します。 この手順 () を使用すると、Web に一般的なスプライト アニメーションを実装できます。デモを参照してください:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style> .bird{background: url(bird.png);width: 140px;height:85px;animation: bird 2s steps(8) infinite; } @keyframes bird{ from { background-position: 0 0; } to { background-position: -800% 0px; } } </style> </head> <body> <div></div> </body> </html>方法 2: html5 キャンバスを使用して GIF 画像を実装します。
キャンバスのdrawImageを使用して、フレームを含む画像をキャンバスにロードし、それらをjsと組み合わせてアニメーションを実装します。デモを参照してください:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas帧--实现动画</title> <style> *{padding:0;margin:0;} canvas{display:block;background:white} </style> </head> <body> <canvas></canvas> <script> var imgPic = new Image(); imgPic.src = 'http://www.cj365.cc/demo/bird/bird.png'; var canvas = document.querySelector('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext('2d'); imgPic.onload = function () { drawImg() } var i = 0; var lastTime = new Date().getTime(); var delatime; var timer = 0; function drawImg() { window.requestAnimationFrame(drawImg); var now = new Date().getTime(); delatime = now - lastTime; lastTime = now; timer += delatime; if (timer > 200) { i++; if (i > 7) i = 0; timer = 0 } console.log(delatime) ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85); } </script> </body> </html>関連学習の推奨事項:
htmlビデオチュートリアル
以上がHTML5で画像アニメーション効果を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。