1
2

More than 1 year has passed since last update.

ひとこまアニメをJavaScriptで実装

Last updated at Posted at 2019-11-24

#ひとこまアニメとは

  • 世の中には「ひとこまアニメーション」(ひとこまアニメ)という表現メディア?のジャンルが存在するらしい。

(ひとこまアニメを アニメGIFに変換した例 ↓ )
色即是空.gif

  • 要は、アプリ(ソフト)上で1枚の絵を描いた過程が記録され、再生できるというもの。
  • そのメリットや可能性について、参考記事(注1)で詳しく述べられている。
  • また、その記事によると、ひとこまアニメを実現するための無料ソフト(PEAS motch! / 9VAe)も配布されている。

#ソフト(アプリ)方式の問題点

  • 無料ソフトとはいえ、当然ながらインストールが必要で、これがかなりのハードルとなる。
  • インストールは手間でもあるし、スマホ等では容量の余裕も少ないことがある。
  • 怪しいソフトはセキュリティの心配もある。
    (最近のOSでは、怪しいソフトを入れたり実行したりすると警告が表示され、躊躇される。)

#動機・やってみたこと

  • 「ひとこまアニメ」だけの機能であれば、数十ステップのプログラムで実装できるかも? というわけで、
  • HTML 内の JavaScript で「なんちゃってひとこまアニメ」を実装してみた。

  • JavaScript は、当然ながらサーバから端末側のブラウザに送信し、処理をおこなう。
  • 参考ソース 注2 を絶大に参考にさせていただきました! ほぼ fork ?
  • Android 9 で動作確認。iOS でも動くかな? →後述のバグあり。

#JavaScript による実装のメリット

  • 対応ブラウザがあればインストール不要。
  • 機器や OS の違いを吸収できる。
  • セキュリティも、アプリよりは、まぁ安心。

#苦労したこと

  • スマホのタッチスクリーンに対応したこと。
     (マウスとはイベントが異なるので、専用の実装が必要。PCだけではデバッグしにくい。)
  • JavaScript には、sleep 関数が組み込まれていないため、タイマーで二重ループを遅延させてゆっくり回すという、ややこしい処理を実装した。

#できてないこと(できたらいいこと)

  • 動画データの保存が未実装。(対応するならサーバへの保存、またはサーバ経由でローカルに保存、となるか?)
  • GIF や mpeg などへのフォーマット変換・出力ができていない
     (静止画ダウンロードのみ対応。)
  • 線の表現効果は色と太さのみ対応。濃さとかビヨビヨ線とか未対応。
  • 2コマ以上のアニメ制作ができない。(できなくていいけど)
  • スマホのマルチフィンガーで誤動作する。
  • [絵をほぞん] 機能にブラウザ依存?のバグあり。
  • iPhone でバグあり?らしい。
    (太さが変更できない、Undoができない。)
  • 描画時間はサンプル点の数にほぼ比例する。すなわち、高速なマシンではサンプル点が多く取れるので、逆に遅くなる。描画時間を線の長さに比例するように実装することもできるが、そうすると速度変化の記録が難しくなる。
    (現在は点サンプル点の密度により描画速度の相対的な変化を記録できている。サンプル点の記録時刻を持っておいて再現するのも可能だが、気持ちよく再生できるか不詳。)

#参考資料
###注1
参考記事:ひとこまアニメーション(書き順アニメ)の作り方
https://qiita.com/danjiro/items/8dd0d7c7263f62189437
###注2
参考ソース:canvasでのお絵かきソフトの作り方と実例
https://pasonyu.com/how-to-make-drawing-software-with-canvas/

1
2
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2