用casperjs和imagemagick修改gif后保持平滑运动

Question

我正在尝试使用 js+css 将静态文本添加到带有背景 gif 动画的 div，并将结果导出到合并所有内容的新 gif。

问题与我需要拍摄的屏幕截图的数量以及这些屏幕截图之间的时间有关，以重新assemble 使用 imagemagick 并保持 fps 或速率。

这是我现在拥有的：

获取gif信息

identify -format "Frame %s: %Tcs\n" gif.gif
Frame 0: 3cs
Frame 1: 3cs 
....
Frame 60: 3cs

创建一个简单的 html+css+js

使用 casperjs 截屏（30 毫秒 == 3 厘秒，我使用了与 60 帧相关的 60 个屏幕截图 那就是指出我的身份）

casper.start('git-animation.html', function()
{
casper.waitForSelector('#parent', function()
{
    for (var i=0; i <= 60; i++)
    {
        casper.wait(1, function()
        {
            var file = output + 'frame' + n + '.png';
            casper.captureSelector(output + 'frame' + n + '.png', '#animation');
            n++;
        });
    }
});
});

使用 php/imagemagick 到 assemble 一个 gif 中的所有内容（我使用 3 厘秒的延迟 ）

$app->services['imagick']->setFormat('GIf');

    for($i = 0; $i <= 60; $i++)
    {
        $frame = new Imagick($app->config['paths']['exported_images'] . $sha1 . '/frame' . $i . '.png');
        $app->services['imagick']->addImage($frame);
        $app->services['imagick']->setImageDelay(3);
        $app->services['imagick']->nextImage();
    }

    // save gif animation
    $app->services['imagick']->writeImages($app->config['paths']['exported_images'] . '/' . $sha1 . $ext, true);

Original gif

Modified gif

如您所见，动画明显不同，请问如何改进？

Answer 1

动画不一样的原因是这种通过截图分割图像的技术不是很准确。您可以直接使用 imagemagick 将其拆分为组件图像，就像这样

convert mhhdh.gif mhhdh.png

这将为您提供一个充满愚蠢的小 .png 文件的目录。您可以随心所欲地更改这些内容，然后在您想要进行任何可能的修改之后，按照您认为合适的方式重新组装。

用casperjs和imagemagick修改gif后保持平滑运动

maintain smooth movement after modifying gif with casperjs and imagemagick

casperjs

imagemagick-convert