如何创建 "countdown timer" GIF？

Question

我想创建一个倒计时 60 秒的 GIF。我可以使用 photoshop，但不想经历为每个数字创建新图层的麻烦。

我正在寻找一种方法来自动生成从 60 倒数到 0 的 GIF（或事后我可以合并成 GIF 的图像）。

我会接受满足这些要求的任何答案。

Answer 1

我 post 将此 AIR 代码作为对 reader 的 教育练习 。基本思想是使用 ActionScript 通过 Sprite 中的 TextField 类呈现文本，使用 Flash 将任何 DisplayObject 呈现为静态位图数据的能力，然后使用第 3 方开源库进行转换每个渲染帧到 gif。

注意：您可以将每个 BitmapData 帧保存到一个文件中，这样您就可以使用外部 gif 创建工具。

package {

    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.utils.ByteArray;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.filesystem.File;
    import flash.filesystem.FileStream;
    import flash.filesystem.FileMode;

    import org.bytearray.gif.encoder.GIFEncoder;
    import org.bytearray.gif.player.GIFPlayer;

    public class Main extends Sprite {

        var defaultFormat:TextFormat = new TextFormat();
        var background:Sprite = new Sprite();
        var countdownText = new TextField();
        var fsize:int = 125;
        var xsize:int = 100;
        var ysize:int = 100;

        public function Main():void {
            defaultFormat.font = "Arial";
            defaultFormat.size = fsize;
            defaultFormat.color = 0xffffff;

            var encoder:GIFEncoder = new GIFEncoder();
            encoder.setRepeat(0);
            encoder.setDelay(1000);
            encoder.start();

            setupCounterDisplay();
            var startFrom:uint = 60;
            var startColor:uint = 255;
            for (var i:int = startFrom; i > -1; i--) {
                var colorRGB:uint = (startColor / startFrom) * i;
                encoder.addFrame(createCounterDisplay(i, ( colorRGB << 16 ) | ( colorRGB << 8 ) | colorRGB ) );
            }
            encoder.finish();
            removeChild(background);
            saveGIF("CounterDown.gif", encoder.stream);
            playGIF(encoder.stream);
        }

        private function playGIF(data:ByteArray):void {
            data.position = 0;
            var player:GIFPlayer = new GIFPlayer();
            player.loadBytes(data);
            addChild(player);
        }

        private function saveGIF(fileName:String, data:ByteArray):void {
            var outFile:File = File.desktopDirectory;
            outFile = outFile.resolvePath(fileName);
            var outStream:FileStream = new FileStream();
            outStream.open(outFile, FileMode.WRITE);
            outStream.writeBytes(data, 0, data.length);
            outStream.close();
        }

        private function padString(string:String, padChar:String, finalLength:int, padLeft:Boolean = true):String {
            while (string.length < finalLength) {
                string = padLeft ? padChar + string : string + padChar;
            }
            return string;
        }

        private function setupCounterDisplay():void {
            var xsize:int = 100;
            var ysize:int = 100;
            background.graphics.beginFill(0x000000, 1);
            background.graphics.drawCircle(xsize, ysize, ysize);
            background.graphics.endFill();
            countdownText.defaultTextFormat = defaultFormat;
            countdownText.border = true;
            countdownText.borderColor = 0xff0000;
            background.addChild(countdownText);
            this.addChild(background);
        }

        private function createCounterDisplay(num:int, color:uint):BitmapData {
            background.graphics.beginFill(0x000000, 1);
            background.graphics.drawCircle(xsize, ysize, ysize);
            background.graphics.endFill();
            defaultFormat.color = color;
            countdownText.defaultTextFormat = defaultFormat;
            countdownText.text = padString(num.toString(), "0", 2);
            countdownText.autoSize = "center";
            countdownText.x = countdownText.width / 5;
            countdownText.y = countdownText.height / 5;
            var bitmap:BitmapData = new BitmapData(countdownText.width * 1.5, countdownText.height * 1.5, true);
            bitmap.draw(background);
            return bitmap;
        }
    }
}

Gif 库来自：https://code.google.com/p/as3gif/wiki/How_to_use

如何创建 "countdown timer" GIF？

How to create a "countdown timer" GIF?

actionscript

photoshop

animated-gif

countdowntimer