カテゴリー別アーカイブ: ウェブ制作

ウェブ制作に関するテクニックや注意点など

animation-timing-functionのstepsでjump-キーワードが使えない場合

animation-timing-functionにstepsを使うことで、CSSアニメーションをイージングではなく段階で変化させることができる。stepsにはjumptermというのを指定することで、0%と100%を停止点として使用するかどうかを選択できる。

animation-timing-function: steps(5, start);
// 20%, 40%, 60%, 80%, 100%

animation-timing-function: steps(5, end);
// 0%, 20%, 40%, 60%, 80%

animation-timing-function: steps(5, jump-none);
// 0%, 25%, 50%, 75%, 100%

jump-noneを指定すると、0%, 25%, 50%, 75%, 100% の五段階でアニメーションされる。感覚的には0%と100%の状態が見えるのがありそうなケースなので、jump-noneが最も使い勝手が良さそうに思う。
だが、Can I useを見ると、Safari(iOS Safari)では、2020年9月のリリースされたver.14でサポートされたばかりようのだ。なので、jump-noneを使わない方法を考えたい。

結論を言えば、keyframesの方を書き換えることで実現できる。

See the Pen
without jump-none on animation-timing-function
by HieroglypH (@hieroglyph3)
on CodePen.

上記は、青いゲージのwidthが0%〜100%に変化するCSSアニメーションだ。
steps(5, jump-none)と同じ動きを、jump-noneを使わないで実装しようと思うと、keyframesの100%は、125%状態のスタイルを書く。(逆に言うと、80%時点で100%に達するように書く。)

もちろん、これは段階数が5の場合だ。
4段階なら、100%時点で133.33…%状態のスタイル
6段階なら、100%時点で120%状態のスタイル
keyframesを工夫すれば、jump-noneは使わなくても概ね乗り切れるかもしれない。

動画をVLC Playerで連続的に静止画像として書き出す方法

とある案件で背景で動画を再生させたいという要望があった。
PCでは普通にvideoタグで再生させれば良いが、スマートフォンだと動画の再生はフルスクリーンになってしまうし、そもそもタップなどユーザーのアクションがないと再生させられない。こういうというときに、実装する方法は2つある。

  • Gifアニメを使う
  • スプライト画像を用意して、JavaScriptでパラパラ漫画のように再生する

今回はスクロールインしたときだけ再生するというように、再生を制御したかったので後者で実装することになった。
さてここで、動画を連続した静止画として書き出す必要がある。この方法が調べてもなかなか出てこなかったので書いておきたい。

使う再生ソフトはVLC Player 無料である。MacでもWindowsでも使えるが、Mac版の操作手順を解説する。Windows版も同じようなものだと思う。ちなみに表示が英語版なので、推測の日本語表記も書いておく。

Preferences (環境設定)> Interface (インターフェース)タブ > show All(全部見る)

Video > Filters > Scene Filter

“Recording ratio”には、何コマごとに画像として書き出すかを指定する。小さいと再生した時に滑らかな動きになる一方で、ファイル数は多くなる。大きいと再生が粗い(動きがカクカク)一方で、ファイル数を抑えられる。
“Directory path Prefix”は保存先ディレクトリを指定する。

左メニューから Filters > Scene video filter にチェック > Save(保存)

あとは動画を再生すれば、連続したコマ送りの静止画が指定ディレクトリに保存される。
書き出し作業を終わった時は、Scene video filterのチェックを外すことをお忘れなく。