最近、 http://www.sunpig.com/martin/archives/2010/02/10/marching-ants-in-css.htmlに基づいて、基本的な jQuery の「アリの行進」効果を試しました。
jQuery コード (完全なプラグインではありません) は JSFiddle にあります: http://jsfiddle.net/mwvdlee/xTZuZ/で問題ありません。
そのサイトで提供されているアニメーション GIF はサイズが固定されているため、同じテーマの複数のサイズ、色、スタイルを作成するためのシンプルなアニメーション GIF ジェネレーターを作成したいと考えています。そのために、次の PHP コードをハックしました。
// Marching ants
$width = 16;
$height = 16;
$horizontal = true;
$bgcolor = '#00ff0000';
$fgcolor = '#0000ffff';
$animation = new Imagick();
$frame = new Imagick();
$frame->newimage($width, $height, $bgcolor);
$frame->setimageformat('gif');
$frame->setimagedelay(10); // 1/100th seconds
$frame->setimagedispose(2);
for ($f = 0; $f < $width; ++$f) {
$rows = $frame->getPixelIterator();
foreach($rows as $y => $columns) {
foreach($columns as $x => $pixel) {
$color = $bgcolor;
// top half
if ($y < $height * .5) {
if (($x + $f) % $width < $width * .5) {
$color = $fgcolor;
}
} else {
if (($width + $x - $f) % $width >= $width * .5) {
$color = $fgcolor;
}
}
$pixel->setColor($color);
$rows->syncIterator();
}
}
$animation->addimage($frame);
}
$animation->setformat('gif');
$animation->setimageformat('gif');
$animation = $animation->deconstructimages();
$gif = $animation->getimagesblob();
if (!error_get_last()) {
header('Content-Type: image/gif');
echo $gif;
} else {
var_dump(error_get_last());
}
これは、GD ではなく、ほとんど文書化されていない Imagick クラスを使用します。これは、他のコードに Imagick を使用する必要があり、すべてのコーディングで 1 つのフレームワークに固執するためです。
問題は、アニメーション中に側面が切り落とされているように見えることです。GIFの処分方法と関係があるのではないかと思います。不透明$bgcolor
にし、破棄方法 0 または 1 を使用しても修正されますが、GIF には透明度がありません。
このコードを修正して、透明で不要なクリッピングのないアニメーション GIF を取得する方法を知っている人はいますか?