スリットアニメーション

2020/05/02

σ(^_^)のTwitterのタイムラインで時々見かけるスリットアニメーション。昔からある技法ですが、調べてみると、立体的なものや、透明なスリットを使ったものなどがあるんですね。仕組みがわかれば、いろいろ応用出来そうです。GWに突入しましたが、コロナの影響で外出出来ませんので、STAY HOME第3弾として、自作にチャレンジしてみました。


前提

σ(^_^)のモットーは、低コストですので、Windowsマシンで、フリーソフトのGIMPを使って作成します。作成するスリットアニメーションは↓な6コマにしてみます。


作り方

スリットアニメーション第一人者のサイトの↓の動画を見れば、一撃です。(爆)
…なんですが、動画はPhotoShopを使っています。今回、GIMPを使用しますので、その使い方を中心にご紹介していきます。


 

①スリットを作ります。
今回、↑の動画と同じ6コマで作りますので、スリットのベースとして18px × 18pxの画像を作り、左3pxのみ白にします。ここまでは動画と同じです。ベースが出来たら、これをタイル状に並べます。『メニュー:Filter→Map→並べる』と選択し、サイズを決めます。今回はA4サイズとしたので、3508×2480としました。これで1つ目のスリットは一旦完成です。2つ目は3508×2480の黒の背景を新たに作成し、1つめのスリットを重ねて3px右にずらして保存。3つ目は更に3pxずらして保存、この要領で、6つ目まで同じ手順で作成します。


その後、全てのスリットに対して白い部分を透過にします。『メニュー:レイヤー→透明部分→アルファチャンネルの追加』とした後、『メニュー:レイヤー→透明部分→Color to Alpha』で白を選択すると透過にすることが出来ます。これでスリットは完成。

②オリジナル画像とスリットを合成します。
1コマ目のオリジナル画像と、スリットの1つ目を↓のように重ねます。

その上で、スリットの黒い部分を切り取ります。
まず、オリジナル画像にアルファチャンネルを追加します。先ほどと同様、オリジナル画像を選択した上で『メニュー:レイヤー→透明部分→アルファチャンネルの追加』とします。次に、『メニュー:選択→色域を選択』とし、スリットの黒を指定します。


その後、オリジナル画像を選択。『メニュー:編集→切り取り』とします。


このままだとスリットの1つ目が邪魔してますので、非表示にします。


すると、透過縞々模様の画像が出来ますので、これをpng形式で保存します。出来たイメージは↓な感じ。
これを6コマ全てで行います。(オリジナル画像とスリットの組合せをお間違えなく)

③6コマを合成します。
②で作成した6コマを1枚の画像に重ね合わせて出来上がり!

まとめ

出来上がった画像を印刷。スリットはOHPに印刷。これらを重ねてずらすと見事に絵が動きました。あとは、何を動かすか。アイデア次第で面白いものが出来そうです。
紙に印刷しなくても、WEB上でJavaScriptを使えば再現出来ますね。スリットアニメーション×ITも面白そうです♪


(追記)スリットアニメーション×IT

ということで、cssのアニメーション機能で実現してみました。面白いですね!