怎么用html5动画效果,教你如何在网页上用H5实现动画效果
原標(biāo)題: 教你如何在網(wǎng)頁上用H5實現(xiàn)動畫效果
在web開發(fā)中,GIF動畫效果是隨處可見,比如常見的loading加載、人物奔跑的gif圖片等等,那么這些都是怎么實現(xiàn)的呢?
其實實現(xiàn)的原理很簡單,簡而言之,這些所謂的動畫都是一幀一幀的圖片經(jīng)過一段時間的間隔做出位移而來的;譬如,我們在PS里面制作GIF動畫,首先要把每一幀所需要的圖片制作出來,然后再通過導(dǎo)出的方式把GIF圖片保存下來;相信會PS的同學(xué),都可以熟練的制作一個基本的GIF動畫圖片;在web開發(fā)中,要實現(xiàn)這樣的gif圖片,也有很多方法;在這給讀者提供一個思路,就是利用html5 canvas實現(xiàn)動畫效果。
利用canvas的drawImage把含有幀的圖片加載到canvas中去,再結(jié)合js實現(xiàn)動畫
canvas幀--實現(xiàn)動畫*{padding:0;margin:0;}
canvas{display:block;background:white}
<>
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. = 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);
}
>
以上方法實現(xiàn)的前提是,需要有一張已繪制幀的圖片,有了圖片才可進行幀的動畫;利用該方法可以控制動畫的播放、暫停以及幀率返回搜狐,查看更多
責(zé)任編輯:
總結(jié)
以上是生活随笔為你收集整理的怎么用html5动画效果,教你如何在网页上用H5实现动画效果的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: win7c盘空间越来越小_系统盘空间越来
- 下一篇: iOS无限后台加速耗电的问题