使用 casperjs 和 imagemagick 修改 gif 后保持平滑移动答案

【问题标题】：maintain smooth movement after modifying gif with casperjs and imagemagick使用 casperjs 和 imagemagick 修改 gif 后保持平滑移动
【发布时间】：2023-04-04 17:47:02
【问题描述】：

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

问题与我需要截取的屏幕截图数量以及它们之间的时间有关，以便使用 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 将所有内容组装在一个 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

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

【问题讨论】：

标签： casperjs imagemagick-convert

【解决方案1】：

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

convert mhhdh.gif mhhdh.png

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

【讨论】：