1

最近、 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 を取得する方法を知っている人はいますか?

4

0 に答える 0