このページの内容

Awesome GIF

GIFを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

目次

一般ツール

ユーティリティ

  • Gifgen - シンプルで高品質なGIFエンコード。
  • Gifify - 画面録画をGIFへ変換。
  • Screengif - アニメーションGIFのスクリーンキャストを作成。
  • Gifline - メールへGIFを挿入するChrome拡張機能。
  • Tty2gif - スクリプトとその出力をバイナリ形式とGIF形式の両方で記録。
  • Gifit - YouTube動画からGIFを作るChrome拡張機能。
  • Ccapture.js - HTML5 Canvasで作成したアニメーションをキャプチャー。
  • Kap - 画面をキャプチャーしてGIFへ書き出す、美しいオープンソースアプリ。
  • gifski - libimagequantを基盤とする高品質GIFエンコーダー。
  • Gifcurry - Haskellで構築された、GIF制作者向けのオープンソースエディター。

ライブラリ

C++

  • Gif-h - アニメーションGIFを作成するC++の単一ヘッダーライブラリ。
  • msf_gif - アニメーションGIFを作成するC/C++の単一ヘッダーライブラリ。

C#

  • dot-screencap - 画面を録画してアニメーションGIFとして保存するシンプルなライブラリ。
  • WpfAnimatedGif - WPFでアニメーションGIF画像を表示するシンプルなライブラリ。
  • XamlAnimatedGif - XAMLアプリ(WPF、WinRT、Windows Phone)でアニメーションGIF画像を表示するシンプルなライブラリ。
  • AnimatedGif - アニメーションGIFの読み込みと作成に使える高性能な.NETライブラリ。

Haxe

  • Gif - Haxe用GIFエンコーダー。

Java

  • Android-gif-drawable - AndroidでアニメーションGIFを表示するViewとDrawable。
  • GifImageView - アニメーションGIF画像を扱うAndroid ImageView。
  • Gif-animation - GIFの再生と書き出しに使えるProcessingライブラリ。
  • Android-gif-encoder - Android向けアニメーションGIFエンコーダー。

JavaScript

  • Gif.js - DOMからGIFを作成。
  • Omggif - GIF 89aのエンコーダーとデコーダー。
  • Animated_GIF - アニメーションGIFを作成するJavaScriptライブラリ。
  • Gifffer - アニメーションGIFの自動再生を防ぐJavaScriptライブラリ。
  • Gifplayer - アニメーションGIFを再生・停止するjQueryプラグイン。
  • node-gify - FFmpegとgifsicleを使って動画をGIFへ変換するJavaScriptツール。
  • Gifencoder - Node.js向けのサーバーサイド・アニメーションGIF生成器。

PHP

  • GifCreator - 複数画像からアニメーションGIFを作成するPHPクラス。
  • GifFrameExtractor - アニメーションGIFの全フレームを分離するPHPクラス。

Objective-C

Swift

  • SwiftyGif - 高性能で扱いやすいGIFエンジン。
  • Gifu - SwiftによるiOS向けアニメーションGIF対応。

GUI

ホスティング

  • Imgur - アップロードできる最大ファイルサイズは50MBです。

オンラインツール

  • EzGif - オンラインGIF作成・画像編集ツール。
  • Giflr - アニメーションGIFの作成やリミックスに使えるWebアプリ。
  • GIF Frame Extractor - アニメーションGIFを個別のフレームへオンラインで変換。

コミュニティ

スクリプト

フレームからGIFへ

FFmpeg

ffmpeg -f image2 -i image%d.jpg animated.gif

ImageMagick

magick -delay 20 -loop 0 frames*.png animated.gif

GraphicsMagick、ImageMagick、FFmpeg用のBashスクリプト(frames2gif.sh

#!/bin/bash
if [ $# -ne 5 ]; then
    echo "please provide the moviename and directory where to store the frames"
    echo "./frames2gif.sh [directory] [movie.mp4] [filename.gif] [gm|im|ffmpeg] [png|jpg]"
    exit 1
fi
    if [ "png" == "$5" ]; then
        suffix="png"
    else
        suffix="jpg"
    fi

    CONVERT=$(which magick)
    GM=$(which gm)
    FFMPEG=$(which ffmpeg)
    FFPROBE=$(which ffprobe)
    FPS=$($FFPROBE -show_streams -select_streams v -i "$2"  2>/dev/null | grep "r_frame_rate" | cut -d'=' -f2 | cut -d'/' -f1)
    echo "FPS: ${FPS}"
if [ "im" == "$4" ]; then # use imagemagick
    FPS=$(echo "1 / ${FPS} * 100" |bc -l)
    $CONVERT "$1/*.${suffix}"  -delay ${FPS} -loop 0 "$3"
elif [ "gm" == "$4" ]; then # use graphicsmagick
    FPS=$(echo "1 / ${FPS} * 100" |bc -l)
    $GM convert "$1/*.${suffix}"  -delay ${FPS} -loop 0 "$3"
else # use crappy gif-algorithm from ffmpeg
    $FFMPEG -f image2 -framerate ${FPS} -i "$1/%08d.${suffix}" "$3"
fi

DeepDreamVideoソースより。

GIFからフレームへ

ffmpeg -i video.mpg image%d.jpg
magick animated.gif -coalesce image%05d.png

高品質GIF

FFmpegを使用。こちらの記事を基にしています。

  • パレットを生成:
#!/bin/sh
start_time=30
duration=3
ffmpeg -y -ss $start_time -t $duration -i input.avi \
-vf fps=10,scale=320:-1:flags=lanczos,palettegen palette.png
  • パレットを使ってGIFを出力:
#!/bin/sh
start_time=30
duration=3
ffmpeg -ss $start_time -t $duration -i input.avi -i palette.png -filter_complex \
"fps=10,scale=320:-1:flags=lanczos[x];[x][1:v]paletteuse" output.gif

GIFの最適化

magick output.gif -layers Optimize output_optimized.gif

非可逆GIF圧縮

./gifsicle -O3 --lossy=80 -o lossy-compressed.gif input.gif

Lossy Gif

動画からGIFを作成

from moviepy import VideoFileClip

clip = (VideoFileClip("input.avi")
        .subclipped((4,00.00),(5,00.00))
        .resized(0.3))
clip.write_gif("output.gif")

記事

シネマグラフ

領域を静止させる方法

from moviepy import VideoFileClip, vfx

clip = (VideoFileClip("input.avi")
        .subclipped((4,00.00),(5,00.00))
        .resized(0.3)
        .with_effects([vfx.FreezeRegion(outside_region=(170, 230, 380, 320))]))
clip.write_gif("output.gif", fps=15)

記事

ffmpeg \
-ss ${starttime} -t ${duration} -i ${vidfile}                         `# body of loop` \
-ss TODO ${starttime} MINUS ${duration} -t ${fadetime} -i ${vidfile}  `# lead-in for crossfade` \
-loop 1 -i ${stillfile}                                               `# masked still image` \
-filter_complex "
  [0:v]setpts=PTS-STARTPTS[vid];                                      `# speed adjustment - not needed here, so noop`
  color=white,scale=3840x2160,fade=in:st=0:d=${fadetime}[alpha];      `# crossfade alpha, double length ahead of speed change`
  [1:v][alpha]alphamerge[am];                                         `# apply alpha to lead-in`
  [am]setpts=PTS+(${duration}-${fadetime})/TB[layer2];                  `# speed adjustment and offset for lead-in`
  [vid][layer2]overlay[oo];                                           `# overlay for crossfade`
  [oo][2:v]overlay=shortest=1[out1];                                  `# overlay still image`
  [out1]crop=w=${cropfactor}*iw:h=${cropfactor}*ih:y=${yoffset}*ih,scale=${outputwidth}:-1, `# crop and scale`
  eq=gamma=${gamma}:contrast=${contrast}:saturation=${saturation},unsharp                   `# final adjustments`
" -an output.mp4

完全なループ

from moviepy import VideoFileClip
from moviepy.video.tools.cuts import FramesMatches

clip = VideoFileClip("input.avi").resized(0.3)
scenes = FramesMatches.from_clip(clip, 10, 3)

selected_scenes = scenes.select_scenes(2, 1, 4, 0.5)
selected_scenes.write_gifs(clip.resized(width=450), "./outputs_directory")

記事

YouTube動画からGIFへ

  • yt-dlpでダウンロードしてから変換します。
yt-dlp https://www.youtube.com/watch?v=V2XpsaLqXc8

yt-dlp

その他

利用方法

このリストを活用する最善の方法は次のとおりです。

  • 目次.
  • command + Fで内容を検索する。

クレジット

Craig Davisonおよびコントリビューターによるリストです。

復元済みリストを基にしており、原作はIsmail Baajです。