Vue.js + SVG練習7: 文字がにょろっと出てくるやつ
動いてるところは下記ツイートから見れる(gifがでかくなりすぎてはてなにアップロードできなかった)
文字をアニメーションさせて遊ぶやつができた https://t.co/mTYNrkBLxi pic.twitter.com/UT4inhu0My
— はっしゅろっく (@hashedrock) 2017年11月18日
デモサイトは下記。文字を入力したり、文字サイズや太さを変えて遊べる。
https://hashrock.github.io/canvas-lff/
ソースは下記。
リポジトリについて
- もともとは昔に作ったリポジトリで、LFFというラインフォントフォーマットの存在を知って作ったやつ
- canvas上に描くようにして、光らせたりアニメーションさせたりはしていた
- 今回はVue + SVGに移植した
- ついでにES5 -> ES2015 -> TypeScriptに段階移行した
フォントについて
- LFFはCAD用のフォーマットらしく、プロッターとかで描画したり、物理的に掘ったりしてたんじゃないかなぁと思う。
- ここにあるKST32Bというフォントがレトロでかっこよかったので使わせて頂いた。GPL2。
- 内容としては、0-10までの範囲の点列をテキストで記述しているだけ
- なので、JSでゴリゴリパースした
SVG周りについて
- もともとcanvas向けに処理を書いていたので、楽をするためにd3-pathを利用した
- d3-pathを使うと、canvas互換のAPIで引いた線をpath要素にシリアライズすることが出来る
- (なんかy軸反転してたり、座標が細かい小数点になっている気がする。自分のバグかもしれんが)
アニメーションについて
- animejsを利用
- animejsとmo.jsは2大Exampleかっこいいけど全く使いこなせないライブラリと勝手にみなしている
- よくあるパスアニメーションを利用。点線ハックするやつ。SVGの仕様決めた人こういう使われ方想定してなかっただろうな
- 文字を重ねて3色で描き、それぞれずらしながら線を描画していけば色がついてかっこよくなる(mo.jsのexampleにあったテクニック)
Vueについて
- 今回は1行と1文字、それぞれをSFCにしてある
- 最初はフォントデータの検索が遅く、データ構造変えたりキャッシュを期待してcomputedにもたせてみたり、設計をがちゃがちゃ変えた
- 文字の太さ変更については、CSSプロパティとinput: rangeを紐付ける必要があったので、下記の知見を使った(CSS VariablesはJSから変更したときに再評価される)
CSS variable、JSから変更するとcalcの再評価走る!!!リアクティブ!!! https://t.co/ILcjch7OHH pic.twitter.com/OMLcCOVKul
— はっしゅろっく (@hashedrock) 2017年6月28日
思い
- これが何なのかはわからないけど、今までの中では結構遊んでて楽しいやつができた。
- すっごいアクセシビリティの荒廃したサイト作れそう