使用casperjs和imagemagick修改gif後保持平滑運動

Question

我試圖用js + css將背景gif動畫添加到div的靜態文本，並將結果導出爲合併所有內容的新gif。

問題與我需要採取的截圖數量以及這些截圖之間的時間有關，使用imagemagick重新組裝並保持fps或速率。

這是我現在有：

1. 獲取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幀說的識別點我出去）

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組裝一切60分的截圖（I」中號使用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文件。您可以根據自己心中的內容改變這些內容，然後在您想要做出任何可能的修改之後，按照您認爲合適的方式重新組裝。