あらすじ

先日の記事からの続き。

<a href="http://a3w.hateblo.jp/entry/2015/05/20/004353">ImageMagickを使用して、連写した写真をGIFにする - a3w.hateblo.jp</a>a3w.hateblo.jp

あらかじめ

あんまりいい感じの結果にはならなかった。

CSS でもパラパラ動画

GIFだと色制限があるので、JPEGとかPNGでアニメーションできないものか...と調べてたら "CSS Sprite Sheet Animation" にたどり着いた。最近はCSSだけでもパラパラ動画が作れるらしい。ちょっと試してみた。

下準備

連写した写真が必要なのは同じ。

CSSで動画を作るには、JPEGファイルを1つの画像にまとめる必要がある。映画フィルムみたいに連続でくっつけて、CSSでその表示方法を指定する。

画像をくっつけるのもImageMagickなら一発。-appendオプションを使う。

convert -append 最初の画像 残りの画像 出力ファイル名

残りの画像の指定もワイルドカードが効くのだが、そのまんま使うと最初の画像が2回入ったりする。なのでパス指定を工夫するなり、フォルダを分けるとかして、うまいことする。

前回のGIF画像をくっつけたところ、1.18MB の 400x11340の画像が出来上がった。でかい。

CSS の用意

以下のURLなどを参考にしつつ、CSSを組む。

<a href="http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps">CSS Sprite Sheet Animations with steps() - Treehouse Blog</a>blog.teamtreehouse.com

作ったHTMLはこんな感じ。色々と省略。

<html>
<head>
<style type="text/css">
.anim-400-210-54s {
    width: 400px;
    height: 210px;
    background: url('movie.jpg') left top;
    animation: play 6s steps(54) infinite;
}

@keyframes play {
    100% { background-position-y: -11340px; }
}
</style> 
</head>
<body>
<div class="anim-400-210-54s"></div>
</body>
</html>

結果

ローカルでうまく動いたので、はてなブログに貼り付けるぜ！...と思ったのだが、CSS指定してもうまく動かなかった。残念。

あと以下の点から、今回の用途にはCSS Sprite Sheet Animationはちょっと不向きだった。

動画サイズとかフレームが違うので、その都度、別のスタイルを定義する必要がある
ImageMagickの減色処理がいい感じだったので、GIFでも個人的には満足
Twitterとかに貼れない

今回はそこまでやらなかったけど、CSSのクリップ処理とか併用すればすれば、お手軽にプレビューできて便利かも。

Google Photosで連写した写真から動画を簡単に作れるらしい...という話もあるので、次に調べるのはそちらかなー。

おしまい。