显示图像序列的最佳方式是什么？

Question

I have a project where i'm creating a stop motion from pictures.我有一个项目，我正在从图片创建定格动画。 There can be pictures added at any time.可以随时添加图片。 I have tried with a canvas and drawImage but the problem here is that I don't get the frame rate of 24 frames/s.我曾尝试使用画布和 drawImage，但这里的问题是我没有获得 24 帧/秒的帧速率。 I have heard of ffmpeg but i was wondering if there were any other options or improvements?我听说过 ffmpeg，但我想知道是否还有其他选择或改进？

Thanks in advance提前致谢

Answer 1

What you want is to use a sprite then because you can easily make one that's 80 frames.您想要的是使用精灵，因为您可以轻松制作一个 80 帧的精灵。

It's very simple.这很简单。 You need a sprite builder though.不过你需要一个精灵生成器。 I built one myself in C# (whole new topic)我自己用 C# 构建了一个（全新的主题）

The actual css for an image sprite underneath the body in the css file: 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>

Alternatively with Javascript create a loop, hard code it and play it in the browser calling a function on load.或者使用 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