前言

我們在網頁中經常需要一些動畫效果，假如你的動畫效果需要人為控制停止或者播放，我們一般就不會用gif來實現了！這里，就引出了我們今天講到的逐幀動畫！今天主要講解幾種方式來實現逐幀動畫！大家可以根據項目情況來自己選擇。功能最強大的要數jquery的spritely插件了，具體可以看：http://resource.haorooms.com/uploads/demo/media/animate/spritely/index.html ，文章后面也會講到！

css3實現逐幀動畫

看如下兩個例子:

具體代碼如下：

#foxtail {

background: url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/foxtail.png) 0 0 no-repeat;

width: 156px;

height: 156px;

}

@keyframes animate-tail {

0% {background-position: -6864px 0; }

100% {background-position: 0 0;}

}

#foxtail {

animation: animate-tail 3.75s steps(44) infinite;

}

/** 小孩動畫**/

@keyframes run {

0% {

background-position: 0 0;

}

100% {

background-position: -6000px 0;

}

}

@-webkit-keyframes run {

0% {

background-position: 0 0;

}

100% {

background-position: -6000px 0;

}

}

#sprite {

width: 75px;

height: 90px;

background: url("http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/1-slow.png") 0 0 no-repeat;

-webkit-animation: run 1s steps(80) infinite;/*80幀*/

animation: run 1s steps(80) infinite;

}

上面的2個動畫實現方式是一致的。假如圖片幾個關鍵幀(之前用過flash的肯定知道關鍵幀),位置不一樣，用上面的方法可能會跳動。那么我們可以分別來指定位置。只要最后我們用如下：

-webkit-animation:動畫名字 1s steps(1) infinite;

就可以了。

注意：steps的使用

steps 函數指定了一個階躍函數，第一個參數指定了時間函數中的間隔數量(必須是正整數)；第二個參數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，默認為 end

比如：steps(1,start)、steps(1,end)或者steps(1)

jquery插件來實現逐幀動畫

我在這里推薦的是jquery的spritely這個插件！

用插件兼容性相對較好，而且功能強大，可以讓動畫跟隨鼠標，可以翻轉，可以調整速度等等。

上面的代碼我們用jquery插件可以這么寫：

$("#foxtail").sprite({ fps: 12, no_of_frames: 44 });

$("#sprite").sprite({ fps: 12, no_of_frames: 80 });

假如要跟隨鼠標點擊：

$('#sprite').sprite({fps: 12, no_of_frames: 80}).activeOnClick().active();

$('body').flyToTap();

具體大家可以下載插件看一下！

js實現

為了防止空白不自然，可以用2個div重疊進行！

#divParent div {

width:75px;height:90px;background:url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/1-slow.png) no-repeat scroll 0px 0px transparent; position:absolute; top:0px; left:0px; z-index:1;

}

js代碼如下：

var i = 0;

var nowShow = 2;

var divParent = document.getElementById("divParent");

window.setInterval(frameAnmi, 26);

function frameAnmi() {

if (i > 80) { i = 0; }

nowShow = (nowShow == 2) ? 1 : 2;

var logo = document.getElementById("haorooms" + nowShow);

logo.style.backgroundPosition = "-" + i * 75 + "px 0px";

divParent.appendChild(logo);

i++;

}

這樣也可以實現逐幀動畫。

關于網頁中實現逐幀動畫，還有其他方法，我今天就主要介紹主流的這三種！希望大家根據自己實際情況，選擇自己適合的場景來使用！

總結

以上是生活随笔為你收集整理的html逐帧动画,谈谈网页中实现逐帧动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。