RMagickでアニメーションGIFの各フレームを連続した画像に変換する

RMagickでアニメーションGIFの各フレームを連続した画像に変換するには、以下のコードを実行します。

require 'RMagick'
include Magick

# アニメーションGIFの各フレームを連続した画像に変換する
images1 = ImageList.new("sample62.gif")
images1.size.times { |fn|
images1[fn] = images1[fn].resize(40,40).border(1,2,"#c0c0c0")
}
img = images1.append(false)
img.write("sample780a.png")

exit

元画像(sample62.gif)


出力画像(sample780a.png)


動作環境
ruby1.8.6, rmagick2.7.1

関連項目
ImageMagickで、アニメーションGIFの各フレームを連続した画像に変換する (convertコマンドでの同様の処理)

RMagickでアニメーションＧＩＦを作成する

RMagickでアニメーションＧＩＦを作成するには、以下のコードを実行します。

require 'RMagick'
include Magick

# アニメーションGIFを作成する
images = ImageList.new("sample3b.jpg", "sample4.jpg", "sample6.jpg")
images.iterations = 0
images.each do |img|
img.delay = 50
end

images.write("sample756a.gif")

元画像(sample3b.jpg)


元画像2(sample4.jpg)


元画像3(sample6.jpg)


出力画像(sample756a.gif)


動作環境
ruby1.8.6, rmagick2.7.1

関連項目
RMagickで画像を透過PNGのエッジ抽出画像に変換する
RMagickで画像の上に半透明グラデーションの斜線を描画する
ImageMagickでアニメーションＧＩＦを出力する　（convertコマンドによる同様の処理）

ImageMagickとPHPで画像を円形に切り取って、点線が回転するアニメーションGIFを作成する

Imagickで画像を円形に切り取って、点線が回転するアニメーションGIFを作成するには、以下のコードを実行します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<title>sample538(ImageMagick6.4.2)</title>
</head>
<body>
<?php
/* 画像を円形に切り取って、点線が回転するアニメーションGIFを作成する */
$images = new Imagick();

for($ii=0;$ii<8;$ii++){
 $im = new Imagick('sample3b.jpg');
 $im2 = new Imagick();
 $im2->newImage($im->getImageWidth(), $im->getImageHeight(), "none");
 $idraw = new ImagickDraw();
 $idraw->setFillColor('#ffffff');
 $idraw->ellipse(
   $im->getImageWidth()/2, $im->getImageHeight()/2,
   $im->getImageWidth()/2-2, $im->getImageHeight()/2-2,0,360);
 $im2->drawImage($idraw);
 $idraw->clear();
 $idraw->destroy();
 /* マスクを使用して切り取り */
 $im2->compositeImage($im, Imagick::COMPOSITE_IN, 0, 0, Imagick::CHANNEL_ALL);
 $idraw = new ImagickDraw();
 $idraw->setFillColor("none");
 $idraw->setStrokeColor('#c0b49d');
 /* 点線のスタイル */
 $idraw->setStrokeDashArray(array(4,4));
 /* 点線のオフセット */
 $idraw->setStrokeDashOffset($ii);
 /* 線の太さ */
 $idraw->setStrokeWidth(2);
 $idraw->ellipse(
   $im->getImageWidth()/2, $im->getImageHeight()/2,
   $im->getImageWidth()/2-3, $im->getImageHeight()/2-3,0,360);
 $im2->drawImage($idraw);

 $images->addImage($im2);
/* $idraw->clear(); 2008/09/30追記：destroyと同様にClearDrawingWandを呼ぶので必要なし */
 $idraw->destroy();
/* $im2->clear();  2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
 $im2->destroy();
/* $im->clear();  2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
 $im->destroy();
}

$images->setImageDelay(10);
$images->writeImages('sample538a.gif', true);
/* $images->clear();  2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$images->destroy();
?>

<img src="sample538a.gif" />

</body>
</html>

元画像(sample3b.jpg)


出力画像(sample538a.gif)

ImageMagickとPHPで手書き風の文字列をアニメーションＧＩＦにする

ImageMagickとPHPで手書き風の文字列をアニメーションＧＩＦにするには、以下のコードを実行します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<title>sample526(ImageMagick6.4.2)</title>
</head>
<body>
<?php
/* 手書き風の文字列を描画する */
$im = new Imagick();

for($li=0;$li<3;$li++){
$im2 = new Imagick();
$im2->newImage(300, 80, 'white');

$idraw = new ImagickDraw();
/* フォント設定 */
$idraw->setFont("Comic-Sans-MS-Bold");
/* フォントサイズ設定 */
$idraw->setFontSize(40);
/* gravity設定 */
$idraw->setGravity(Imagick::GRAVITY_CENTER);
/* 描画色 */
$idraw->setFillColor("#bbddff");
$im2->annotateImage($idraw, 0, 0, 0, "ImageMagick");
$im2->spreadImage(1);
$im2->medianFilterImage(1);
$im->addImage($im2);
$im->setImageDelay(30);
/* $im2->clear();  2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im2->destroy();
}

$im->writeImages('sample526a.gif', true);
/* $im->clear();  2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
?>

<img src="sample526a.gif" />

</body>
</html>

出力画像(sample526a.gif)


環境
Apache 2.2.8/PHP5.2.5/ImageMagick6.4.2

関連項目
PHPとImageMagickでアニメーションGIFを生成する
ImageMagickとPHPで文字列を画像で塗りつぶす
ImageMagickとPHPで半透明のぼかし文字列を描画する
ImageMagickとPHPで、画像に日本語の文字列を描画する
ImageMagickとPHPで手書き風の円に囲まれた文字を描画する

JMagickでアニメーションGIFを出力する

JMagickでアニメーションＧＩＦを出力するには、以下のコードを実行します。

import java.awt.*;
import magick.*;

public class JMagickTest38
{
  public static void main(String args[])
      throws MagickException
  {
      String files[] = {"sample3b.jpg", "sample4.jpg", "sample6.jpg"};
      MagickImage frames[] = new MagickImage[files.length];
      int fn = 0;
      for(fn=0;fn<files.length;fn++){
          frames[fn] = new MagickImage(new ImageInfo(files[fn]));
          frames[fn].setDelay(100);
      }
      MagickImage mi = new MagickImage(frames);
      mi.setFileName("sample479a.gif");
      mi.writeImage(new ImageInfo());
  }
}

元画像1(sample3b.jpg)


元画像2(sample4.jpg)


元画像3(sample6.jpg)


出力画像(sample479a.gif)


環境
JDK6 Upadate6(JDK1.6.0_06)/jmagick-win-6.3.9-Q16
関連情報
JMagickまとめ

PHPとImageMagickでアニメーションGIFを生成する

ImagickでアニメーションＧＩＦを生成するには、以下のコードを実行します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<title>sample478(ImageMagick6.4.1)</title>
</head>
<body>
<?php
/* 複数の画像からanimated gifを作成する */
$fns = array('sample3b.jpg', 'sample4.jpg', 'sample6.jpg');
$im = new Imagick();
foreach( $fns as $fn ){
$im2 = new Imagick($fn);
$im->addImage($im2);
$im->setImageDelay(100);
/* $im2->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im2->destroy();
}
$im->writeImages('sample478a.gif', true);
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
?>

<img src="sample478a.gif" />

</body>
</html>

元画像１(sample3b.jpg)


元画像２(sample4.jpg)


元画像3(sample6.jpg)



出力画像(sample478a.gif)


環境
Apache 2.2.8/PHP5.2.5/ImageMagick6.4.1

ImageMagickで、２つの画像が交互にスクロールするアニメーションGIFを作成する

２つの画像が交互にスクロールするアニメーションGIFを作成するには、以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.4.0-Q16

%im%\convert.exe sample3b.jpg -enhance f0.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+10 +repage -enhance f1.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+20 +repage -enhance f2.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+30 +repage -enhance f3.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+40 +repage -enhance f4.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+50 +repage -enhance f5.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+60 +repage -enhance f6.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+70 +repage -enhance f7.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+80 +repage -enhance f8.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+90 +repage -enhance f9.png
%im%\convert.exe sample6.jpg -enhance f10.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+10 +repage -enhance f11.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+20 +repage -enhance f12.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+30 +repage -enhance f13.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+40 +repage -enhance f14.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+50 +repage -enhance f15.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+60 +repage -enhance f16.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+70 +repage -enhance f17.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+80 +repage -enhance f18.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+90 +repage -enhance f19.png

%im%\convert.exe f0.png -coalesce -layers optimize-plus f0.png f0.png f0.png f0.png f1.png f2.png f3.png f4.png f5.png f6.png f7.png f8.png f9.png f10.png f10.png f10.png f10.png f10.png f11.png f12.png f13.png f14.png f15.png f16.png f17.png f18.png f19.png -set delay 20 -loop 0 sample377.gif

上記の例では、2つの画像を垂直方向に連結して(-append)、ずらして切り取り(-chop)をおこなって各フレームを生成してアニメーションGIFを作成しています。また、各フレームでノイズを減らすために-enhanceを使用しています。

元画像１(sample3b.jpg)


元画像2(sample6.jpg)


出力画像(sample377.gif)

ImageMagickで、アニメーションGIFの各フレームに文字列を描画する

アニメーションGIFの各フレームに文字列を描画するには、以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.8-Q16
%im%\convert.exe sample62.gif -font "c:/winnt/fonts/msmincho.ttc" -gravity center -draw @sample337.txt -swap 8,9 -draw @sample337.txt -swap 8,9 -swap 7,9 -draw @sample337.txt -swap 7,9 -swap 6,9 -draw @sample337.txt -swap 6,9 -swap 5,9 -draw @sample337.txt -swap 5,9 -swap 4,9 -draw @sample337.txt -swap 4,9 -swap 3,9 -draw @sample337.txt -swap 3,9 -swap 2,9 -draw @sample337.txt -swap 2,9 -swap 1,9 -draw @sample337.txt -swap 1,9 -swap 0,9 -draw @sample337.txt -swap 0,9 sample338.gif

また、日本語文字列の描画のために以下のファイルをUTF-8で保存します。
sample337.txt
------------------------------------------------------------------------------
font-size 32 text 0,0 '見本'
------------------------------------------------------------------------------

元画像(sample62.gif)


出力画像(sample338.gif)

ImageMagickで、アニメーションGIFを逆順序に変換する

アニメーションGIFを逆順序に変換するには、以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.8-Q16
%im%\convert.exe sample62.gif -swap 0,9 -swap 1,8 -swap 2,7 -swap 3,6 -swap 4,5 -loop 0 sample314.gif

元画像(sample62.gif)


出力画像(sample314.gif)

ImageMagickで、花模様が回転するGIFアニメーションを生成する

花模様が回転するGIFアニメーションを生成するには、以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.8-Q16

%im%\convert.exe -size 50x50 xc:white -fx "(25-i)^2+(25-j)^2)<=(18+sin(atan2(25-i,25-j)*12)*7)^2?#F8C749:#FFFFFF" f1.png

%im%\convert.exe -size 50x50 xc:white -fx "(25-i)^2+(25-j)^2)<=(18+sin(atan2(25-i,25-j)*12+3pi/180*12)*7)^2?#F8C749:#FFFFFF" f2.png

%im%\convert.exe -size 50x50 xc:white -fx "(25-i)^2+(25-j)^2)<=(18+sin(atan2(25-i,25-j)*12+6pi/180*12)*7)^2?#F8C749:#FFFFFF" f3.png

%im%\convert.exe -size 50x50 xc:white -fx "(25-i)^2+(25-j)^2)<=(18+sin(atan2(25-i,25-j)*12+9pi/180*12)*7)^2?#F8C749:#FFFFFF" f4.png

%im%\convert.exe -size 50x50 xc:white -fx "(25-i)^2+(25-j)^2)<=(18+sin(atan2(25-i,25-j)*12+12pi/180*12)*7)^2?#F8C749:#FFFFFF" f5.png

%im%\convert.exe -size 50x50 xc:white -fx "(25-i)^2+(25-j)^2)<=(18+sin(atan2(25-i,25-j)*12+15pi/180*12)*7)^2?#F8C749:#FFFFFF" f6.png

%im%\convert.exe -size 50x50 xc:white -fx "(25-i)^2+(25-j)^2)<=(18+sin(atan2(25-i,25-j)*12+18pi/180*12)*7)^2?#F8C749:#FFFFFF" f7.png

%im%\convert.exe -size 50x50 xc:white -fx "(25-i)^2+(25-j)^2)<=(18+sin(atan2(25-i,25-j)*12+21pi/180*12)*7)^2?#F8C749:#FFFFFF" f8.png

%im%\convert.exe -size 50x50 xc:white -fx "(25-i)^2+(25-j)^2)<=(18+sin(atan2(25-i,25-j)*12+24pi/180*12)*7)^2?#F8C749:#FFFFFF" f9.png

%im%\convert.exe -size 50x50 xc:white -fx "(25-i)^2+(25-j)^2)<=(18+sin(atan2(25-i,25-j)*12+27pi/180*12)*7)^2?#F8C749:#FFFFFF" f10.png

%im%\convert.exe -set delay 7 f1.png f2.png f3.png f4.png f5.png f6.png f7.png f8.png f9.png f10.png -loop 0 sample339.gif

上記バッチでは、少しずつ花模様を回転させた図形を複数のPNG画像として保存し、それらを まとめてanimation GIFとして出力しています。

出力画像(sample339.gif)


関連項目
ImageMagickで、半径が波型に変化する円を描画する

ImageMagickで、アニメーションGIFの各フレームを連続した画像に変換する

アニメーションGIFの各フレームを連続した画像に変換するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.8-Q16
%im%\convert.exe sample62.gif -resize 40x40 -mattecolor #c0c0c0 -frame 1x2 +append sample336.png

上記バッチでは、アニメーションGIFの各フレームを40x40ピクセルの大きさに変換し、
色が灰色(#c0c0c0)の枠をつけ、各フレームを横方向に連結しています。

元画像(sample62.gif)


出力画像(sample336.png)

ImageMagickで画像を丸型に切り取って点線が回転するGIFアニメーションを作成する

ImageMagickで画像を丸型に切り取って点線が回転するGIFアニメーションを作成するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.4-Q16
%im%\convert.exe -size 100x100 xc:none -fill white -draw "circle 50,50 50,2" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 7 circle 50,50 50,3" f1.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "circle 50,50 50,2" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 6 circle 50,50 50,3" f2.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "circle 50,50 50,2" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 5 circle 50,50 50,3" f3.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "circle 50,50 50,2" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 4 circle 50,50 50,3" f4.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "circle 50,50 50,2" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 3 circle 50,50 50,3" f5.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "circle 50,50 50,2" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 2 circle 50,50 50,3" f6.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "circle 50,50 50,2" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 1 circle 50,50 50,3" f7.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "circle 50,50 50,2" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 0 circle 50,50 50,3" f8.png
%im%\convert.exe -set delay 10 f1.png f2.png f3.png f4.png f5.png f6.png f7.png f8.png -loop 0 sample166.gif

元画像(sample3b.jpg)

出力画像(sample166.gif)

ImageMagickで画像を角丸四角に切り取って点線が回転するGIFアニメーションを作成する

ImageMagickで画像を角丸四角に切り取って、
点線が回転するGIFアニメーションを作成するには、
以下のバッチファイルを実行します。



rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.4-Q16
%im%\convert.exe -size 100x100 xc:none -fill white -draw "roundrectangle 1,1 98,98 10,10" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 roundrectangle 2,2 97,97 10,10" f1.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "roundrectangle 1,1 98,98 10,10" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 1 roundrectangle 2,2 97,97 10,10" f2.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "roundrectangle 1,1 98,98 10,10" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 2 roundrectangle 2,2 97,97 10,10" f3.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "roundrectangle 1,1 98,98 10,10" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 3 roundrectangle 2,2 97,97 10,10" f4.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "roundrectangle 1,1 98,98 10,10" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 4 roundrectangle 2,2 97,97 10,10" f5.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "roundrectangle 1,1 98,98 10,10" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 5 roundrectangle 2,2 97,97 10,10" f6.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "roundrectangle 1,1 98,98 10,10" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 6 roundrectangle 2,2 97,97 10,10" f7.png
%im%\convert.exe -size 100x100 xc:none -fill white -draw "roundrectangle 1,1 98,98 10,10" sample3b.jpg -compose srcin -composite -strokewidth 2 -fill none -stroke #c0b49d -draw "stroke-dasharray 4,4 stroke-dashoffset 7 roundrectangle 2,2 97,97 10,10" f8.png
%im%\convert.exe -set delay 10 f1.png f2.png f3.png f4.png f5.png f6.png f7.png f8.png -loop 0 sample165.gif

元画像(sample3b.jpg)



出力画像(sample165.gif)

ImageMagickで彩度が変化するGIFアニメーションを作成する

ImageMagickで彩度が変化するGIFアニメーションを作成するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.3-Q16
rem 彩度を変更（明るさはそのまま）
%im%\convert.exe sample4.jpg -modulate 100,100 f1.png
%im%\convert.exe sample4.jpg -modulate 100,90 f2.png
%im%\convert.exe sample4.jpg -modulate 100,80 f3.png
%im%\convert.exe sample4.jpg -modulate 100,70 f4.png
%im%\convert.exe sample4.jpg -modulate 100,60 f5.png
%im%\convert.exe sample4.jpg -modulate 100,50 f6.png
%im%\convert.exe sample4.jpg -modulate 100,40 f7.png
%im%\convert.exe sample4.jpg -modulate 100,30 f8.png
%im%\convert.exe sample4.jpg -modulate 100,20 f9.png
%im%\convert.exe sample4.jpg -modulate 100,10 f10.png
%im%\convert.exe sample4.jpg -modulate 100,0 f11.png

%im%\convert.exe f1.png f2.png f3.png f4.png f5.png f6.png f7.png f8.png f9.png f10.png f11.png -set delay 20 -loop 0 sample146.gif

元画像(sample4.jpg)

出力画像(sample146.gif)

ImageMagickで円形に広がるアニメーションGIFを作成する

ImageMagickで円形に広がるアニメーションGIFを作成するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.3-Q16

%im%\convert.exe -size 100x100 sample4.jpg ( xc:none -channel RGBA -fill #ffffffff -background none -draw "circle 60,60 50,50" -negate ) -background #ffffdd -compose screen -composite f1.png
%im%\convert.exe -size 100x100 sample4.jpg ( xc:none -channel RGBA -fill #ffffffff -background none -draw "circle 60,60 45,44" -negate ) -background #ffffdd -compose screen -composite f2.png
%im%\convert.exe -size 100x100 sample4.jpg ( xc:none -channel RGBA -fill #ffffffff -background none -draw "circle 60,60 40,40" -negate ) -background #ffffdd -compose screen -composite f3.png
%im%\convert.exe -size 100x100 sample4.jpg ( xc:none -channel RGBA -fill #ffffffff -background none -draw "circle 60,60 35,35" -negate ) -background #ffffdd -compose screen -composite f4.png
%im%\convert.exe -size 100x100 sample4.jpg ( xc:none -channel RGBA -fill #ffffffff -background none -draw "circle 60,60 30,30" -negate ) -background #ffffdd -compose screen -composite f5.png
%im%\convert.exe -size 100x100 sample4.jpg ( xc:none -channel RGBA -fill #ffffffff -background none -draw "circle 60,60 25,25" -negate ) -background #ffffdd -compose screen -composite f6.png
%im%\convert.exe -size 100x100 sample4.jpg ( xc:none -channel RGBA -fill #ffffffff -background none -draw "circle 60,60 20,20" -negate ) -background #ffffdd -compose screen -composite f7.png
%im%\convert.exe -size 100x100 sample4.jpg ( xc:none -channel RGBA -fill #ffffffff -background none -draw "circle 60,60 15,15" -negate ) -background #ffffdd -compose screen -composite f8.png
%im%\convert.exe -size 100x100 sample4.jpg ( xc:none -channel RGBA -fill #ffffffff -background none -draw "circle 60,60 10,10" -negate ) -background #ffffdd -compose screen -composite f9.png
%im%\convert.exe f1.png f2.png f3.png f4.png f5.png f6.png f7.png f8.png f9.png sample4.jpg -set delay 20 -loop 0 sample62.gif

元画像(sample4.jpg)

出力画像(sample62.gif)

ImageMagickで旗がなびくようなGIFアニメーションを作成する

ImageMagickで旗がなびくようなGIFアニメーションを作成するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16

%im%\convert.exe sample7.jpg -fx (1+cos(pi*i/20)*0.2)*p -mattecolor black -frame 10x10 -fx p{i,j+cos(pi*i/20)*5} f1.gif
%im%\convert.exe sample7.jpg -fx (1+cos(pi*(i/20+0.4))*0.2)*p -mattecolor black -frame 10x10 -fx p{i,j+cos(pi*(i/20+0.4))*5} f2.gif
%im%\convert.exe sample7.jpg -fx (1+cos(pi*(i/20+0.8))*0.2)*p -mattecolor black -frame 10x10 -fx p{i,j+cos(pi*(i/20+0.8))*5} f3.gif
%im%\convert.exe sample7.jpg -fx (1+cos(pi*(i/20+1.2))*0.2)*p -mattecolor black -frame 10x10 -fx p{i,j+cos(pi*(i/20+1.2))*5} f4.gif
%im%\convert.exe sample7.jpg -fx (1+cos(pi*(i/20+1.6))*0.2)*p -mattecolor black -frame 10x10 -fx p{i,j+cos(pi*(i/20+1.6))*5} f5.gif
%im%\convert.exe sample7.jpg -fx (1+cos(pi*(i/20+2.0))*0.2)*p -mattecolor black -frame 10x10 -fx p{i,j+cos(pi*(i/20+2.0))*5} f6.gif
%im%\convert.exe sample7.jpg -fx (1+cos(pi*(i/20+2.4))*0.2)*p -mattecolor black -frame 10x10 -fx p{i,j+cos((pi*i/20+2.4))*5} f7.gif
%im%\convert.exe sample7.jpg -fx (1+cos(pi*(i/20+2.8))*0.2)*p -mattecolor black -frame 10x10 -fx p{i,j+cos(pi*(i/20+2.8))*5} f8.gif
%im%\convert.exe sample7.jpg -fx (1+cos(pi*(i/20+3.2))*0.2)*p -mattecolor black -frame 10x10 -fx p{i,j+cos(pi*(i/20+3.2))*5} f9.gif
%im%\convert.exe sample7.jpg -fx (1+cos(pi*(i/20+3.6))*0.2)*p -mattecolor black -frame 10x10 -fx p{i,j+cos(pi*(i/20+3.6))*5} f10.gif
%im%\convert.exe f1.gif f2.gif f3.gif f4.gif f5.gif f6.gif f7.gif f8.gif f9.gif f10.gif -set delay 15 -loop 0 sample91.gif

元画像(sample7.jpg)

出力画像(sample91.gif)

ImageMagickで文字列がぼやけていくGIFアニメーションを作成する

文字がぼやけていくGIFアニメーションを作成するには
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
%im%\convert.exe -size 100x100 xc:white -fill black -draw "font-size 18 text 20,55 'Sample'" f1.gif
%im%\convert.exe -size 100x100 xc:white -fill black -draw "font-size 18 text 20,55 'Sample'" -blur 0x1 f2.gif
%im%\convert.exe -size 100x100 xc:white -fill black -draw "font-size 18 text 20,55 'Sample'" -blur 0x2 f3.gif
%im%\convert.exe -size 100x100 xc:white -fill black -draw "font-size 18 text 20,55 'Sample'" -blur 0x3 f4.gif
%im%\convert.exe -size 100x100 xc:white -fill black -draw "font-size 18 text 20,55 'Sample'" -blur 0x4 f5.gif
%im%\convert.exe -size 100x100 xc:white -fill black -draw "font-size 18 text 20,55 'Sample'" -blur 0x5 f6.gif
%im%\convert.exe -size 100x100 xc:white -fill black -draw "font-size 18 text 20,55 'Sample'" -blur 0x7 f7.gif
%im%\convert.exe -size 100x100 xc:white -fill black -draw "font-size 18 text 20,55 'Sample'" -blur 0x9 f8.gif
%im%\convert.exe -size 100x100 xc:white -fill black -draw "font-size 18 text 20,55 'Sample'" -blur 0x12 f9.gif
%im%\convert.exe -size 100x100 xc:white -fill black -draw "font-size 18 text 20,55 'Sample'" -blur 0x20 f10.gif

%im%\convert.exe f1.gif f2.gif f3.gif f4.gif f5.gif f6.gif f7.gif f8.gif f9.gif f10.gif -set delay 20 -loop 0 sample76.gif

出力画像(sample76.gif)

ImageMagickで回転・縮小するアニメーションGIFを生成する

ImageMagickで回転・縮小するアニメーションGIFを作成するには、
-affineでアフィン変換を使用して回転・スケーリングを行います。
縮小の後、画像サイズが変わるので、-extent及びgravityオプションで
均一サイズにしています。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
rem sx=s*cos(r)
rem rx=s*sin(r)
rem ry=s*-sin(r)
rem sy=s*cos(r)
rem r=30,s=0.95
%im%\convert.exe sample2.png -affine 0.82,0.48,-0.48,0.82,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f2.gif
rem r=60,s=0.90
%im%\convert.exe sample2.png -affine 0.45,0.78,-0.78,0.45,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f3.gif
rem r=90,s=0.85
%im%\convert.exe sample2.png -affine 0.00,0.85,-0.85,0.00,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f4.gif
rem r=120,s=0.8
%im%\convert.exe sample2.png -affine -0.40,0.69,-0.69,-0.40,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f5.gif
rem r=150,s=0.75
%im%\convert.exe sample2.png -affine -0.65,0.38,-0.38,-0.65,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f6.gif
rem r=180,s=0.7
%im%\convert.exe sample2.png -affine -0.70,0.00,0.00,-0.70,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f7.gif
rem r=210,s=0.65
%im%\convert.exe sample2.png -affine -0.56,-0.33,0.33,-0.56,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f8.gif
rem r=240,s=0.55
%im%\convert.exe sample2.png -affine -0.28,-0.48,0.48,-0.28,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f9.gif
rem r=270,s=0.45
%im%\convert.exe sample2.png -affine 0.00,-0.45,0.45,0.00,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f10.gif
rem r=300,s=0.35
%im%\convert.exe sample2.png -affine 0.18,-0.30,0.30,0.18,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f11.gif
rem r=330,s=0.25
%im%\convert.exe sample2.png -affine 0.22,-0.13,0.13,0.22,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f12.gif
rem r=360,s=0.15
%im%\convert.exe sample2.png -affine 0.15,0.00,0.00,0.15,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f13.gif
rem r=390,s=0.05
%im%\convert.exe sample2.png -affine 0.04,0.02,-0.02,0.04,0,0 -transform +repage -gravity center -background white -extent 100x100 -flatten f14.gif
%im%\convert.exe sample2.png f2.gif f3.gif f4.gif f5.gif f6.gif f7.gif f8.gif f9.gif f10.gif f11.gif f12.gif f13.gif f14.gif -set delay 20 -loop 0 sample71.gif

出力画像(sample71.gif)

ImageMagickでモーフィングを実行する

ImageMagickでモーフィングを実行するには、

-morphオプションを使用します。

(２つの画像の半透明度を変化させている感じ)

-morphオプションの後にはフレーム数が続きます。

rem 環境によって変えてね

set im=C:\Progra~1\ImageMagick-6.3.1-Q16

%im%\convert.exe sample4.jpg sample6.jpg -morph 20 -set delay 10 -loop 0 sample63.gif

元画像(sample4.jpg)

元画像(sample6.jpg)

出力画像(sample63.gif)

ImageMagickでフェードイン・フェードアウトのアニメーションGIFを作成する

ImageMagickでフェードイン・フェードアウトのアニメーションGIFを作成するには
-modulateで明るさの異なる画像をそれぞれ生成し、アニメーションGIFにします。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
rem フェードイン
%im%\convert.exe sample6.jpg -modulate 10 ( sample6.jpg -modulate 20 ) ( sample6.jpg -modulate 30 ) ( sample6.jpg -modulate 40 ) ( sample6.jpg -modulate 50 ) ( sample6.jpg -modulate 60 ) ( sample6.jpg -modulate 70 ) ( sample6.jpg -modulate 80 ) ( sample6.jpg -modulate 90 ) ( sample6.jpg -modulate 100 ) -set delay 20 -loop 0 sample60a.gif
rem フェードアウト
%im%\convert.exe sample6.jpg -modulate 100 ( sample6.jpg -modulate 90 ) ( sample6.jpg -modulate 80 ) ( sample6.jpg -modulate 70 ) ( sample6.jpg -modulate 60 ) ( sample6.jpg -modulate 50 ) ( sample6.jpg -modulate 40 ) ( sample6.jpg -modulate 30 ) ( sample6.jpg -modulate 20 ) ( sample6.jpg -modulate 10 ) -set delay 20 -loop 0 sample60b.gif

元画像(sample6.jpg)


フェードイン(sample60a.jpg)


フェードアウト(sample60b.jpg)