アニメーションPNG(APNG)を使ったかんたん目パチ
アニメーションPNG(以降APNG)を使用することで、PNGと同じ方法で動画を扱うことができます。 ここでは、アニメ画像に変換する君(Windows版)を使った簡単な作成方法をメモしておきます。元画像の準備
まずはベースになるPNGファイルを用意します。
まばたき画像の準備
次に、すこしだけ目を閉じかけている画像と、完全に目を閉じたPNGファイルを用意。
差分画像の作成
ベース画像に対して、目を閉じかけている画像と目を閉じた画像の差分を作成します。ベース画像と同じサイズで作成して、余白部分は透過します。
透過画像の作成
アニメーションしない時間に表示する透明なPNGファイルを作成します。こちらもベース画像と同じサイズで、連番(001.png、002.png……等)で100ファイル作成します。出力するファイルを20FPSにした場合、5秒間アニメーションしなくなります。
※ 下記はメモ帳などでANSI形式で保存し、拡張子を.batに変更。コピーしたい透明画像をドラッグ&ドロップすると100ファイル複製してくれます。
@echo off
rem ----
rem ドラッグ＆ドロップしたファイルを連番付きでコピー
rem batファイルが置かれているディレクトリ配下に出力
rem ----
rem ファイル作成回数の定義
set COUNT=100
rem 出力フォルダ名の定義
set OUTPUT_DIR=連番出力フォルダ
rem ファイル名と拡張子の取得
set path=%1
set filename=%~n1
set ext=%~x1
rem 遅延環境変数「!」を使えるようにする
setlocal ENABLEDELAYEDEXPANSION
rem 出力ディレクトリ作成
if not exist %OUTPUT_DIR% (
mkdir %OUTPUT_DIR%
)
rem 繰り返し処理
for /l %%i in (1, 1, %COUNT%-1) do (
rem 0埋めした文字列(末尾3文字)取得
set num=000%%i
set num=!num:~-3!
rem ファイルコピー処理
copy %path% .\%OUTPUT_DIR%\%filename%!num!%ext%
)
pause
APNG用の設定
アニメ画像に変換する君を起動して、下記の設定を行います。- 用途
webページ用アニメーション - アニメーション設定
フレームレート(FPS)： 20
ループ回数： 無限ループ - 画質設定
APNGファイル出力： [チェックON]
容量最適化： [チェックOFF](用途がよくわからず……)
圧縮方式： zopfli(出力に時間がかかるようならzlibでもOK)
WebPファイル出力： [チェックOFF]
HTMLファイル出力： [チェックOFF(出力ファイルをHTMLで確認したいならON)]
APNGのファイル選択
ファイル名が1.透明画像(100枚)、2.目を閉じかけの差分画像、3.目を閉じた差分画像の順番になるように調整。画像ファイルをドラッグ&ドロップするか、「ファイルを選択」ボタンを押してファイルをすべて選択します。APNGファイルの出力
「アニメ画像を保存する」ボタンを押して、APNGファイルを出力。画像の重ね合わせ
ベース画像と同じ位置に、出力したAPNGファイルを重ね合わせて表示。APNGファイルが上になるようにすること。