顯示圖像序列的最佳方式是什么？

Question

我有一個項目，我正在從圖片創建定格動畫。 可以隨時添加圖片。 我曾嘗試使用畫布和 drawImage，但這里的問題是我沒有獲得 24 幀/秒的幀速率。 我聽說過 ffmpeg，但我想知道是否還有其他選擇或改進？

提前致謝

Answer 1

您想要的是使用精靈，因為您可以輕松制作一個 80 幀的精靈。

這很簡單。 不過你需要一個精靈生成器。 我自己用 C# 構建了一個（全新的主題）

css 文件中主體下方圖像精靈的實際 css：

/*I've called my div bckgrnd*/

.bckgrnd 
{
/*width and height needs to be for one image frame*/
width: 454px;
height: 512px;
margin: auto;
background: url('http://yourdomain/sprite.jpg') left center;
/*steps is the number of frames, in your case 80*/
/*infinite means it goes round forever and play 0-6s is play speed*/
animation: play 0.6s steps(80) infinite;
}


html is:
    <div class="bckgrnd">
     <!-- any other html you want here -->
    </div>

或者使用 Javascript 創建一個循環，對其進行硬編碼並在瀏覽器中播放，調用加載時的函數。

//80 frames I've done this because you can change the order in here, otherwise you could just use the loop to go 0-80, this gives you more control
var images = ["0",  "1",    "2",    "3",    "4",    "5",    "6",    "7",    "8",    "9",    "10",   "11",   "12",   "13",   "14",   "15",   "16",   "17",   "18",   "19",   "20",   "21",   "22",   "23",   "24",   "25",   "26",   "27",   "28",   "29",   "30",   "31",   "32",   "33",   "34",   "35",   "36",   "37",   "38",   "39",   "40",   "41",   "42",   "43",   "44",   "45",   "46",   "47",   "48",   "49",   "50",   "51",   "52",   "53",   "54",   "55",   "56",   "57",   "58",   "59",   "60",   "61",   "62",   "63",   "64",   "65",   "66",   "67",   "68",   "69",   "70",   "71",   "72",   "73",   "74",   "75",   "76",   "77",   "78",   "79",   "80"];
//call this function first
function imagechange()
{
   //this starts a timer, I've used 30th of 1000 looks quite natural.
    setInterval("animate()", 30);


}

//the timer calls the animate function every 30 milliseconds.

function animate()
{
if (k>=0)
{
document.getElementById("anim").src = "animation/(" + images[k] + ").png";
}
//images.length : this is the hard coded 0-80 above. Could just do k>= 80
if(k>= images.length-1)
{
k=0;
}
k++;
}


html
//inital load image
<body onload='imagechange();'>

<img id="anim" align="center" src="animation/load.gif" width="70%">

顯示圖像序列的最佳方式是什么？

問題描述

1 個解決方案

解決方案1
0 2020-01-22 11:58:22

顯示圖像序列的最佳方式是什么？

問題描述

1 個解決方案

解決方案1 0 2020-01-22 11:58:22

解決方案1
0 2020-01-22 11:58:22