文字を書いているように表示するJS導入が難しかった話
最近時々見かける手書き風の文字が自動的に書いているかのように表示される動き。
色々なサイトで紹介されているが下記のサイトで詳しく書かれている。
この動きを導入したかったのだがドハマリしてしまったので次回また導入する時が来た時のために、躓いたところを備忘録として残しておく。
pathがpolylineになってる
初っ端の方からハマりまくるのだが、まずリファレンス通りにイラストレーターで作ったマスク用のパスをVScodeに貼り付けたところpathタグになるべきところがpolylineとなっている。
なんやこれは？これでも動くのか？
って思ったけど動かんのでpathで抽出する方法を探す。
どうやらpathとpolylineの違いはオープンかそうでないかの違いらしい。オープンなパスだとpolylineとなる。他にもrect,circle,lineとかもある。詳しくは下記のサイトで。
サンプルサイトの通りpathで抽出したいなぁと思ってpolylineをpathに出来んもんか探してみたらできるサイトが有った。
https://codepen.io/michaelschofield/pen/LYGrgx
このサイトのHTML部分のpolygonタグのところをpolylineにしてちょっと待つと自動的に変換が起こる。なんか変わったなと思ったらブラウザの検証を使ってソースを覗き見てそこに変換されたpathがあるのでそれをコピー。
これでpathがやっと準備できた…。
動いているけど思い通り表示できない
pathにクラスをつけてブラウザに表示し動かしてみると確かに動くようになった。だが全然上手く表示できない。サンプルみたいに手書き風に文字が現れない…。
これが訳わからなすぎて諦めようかと思うぐらい悩んだが結局キャンバスサイスがでかすぎたというのが原因だった。
サイトに使うSVGの画像はCSSで自動的にブラウザサイズに合わせて表示されているがマスクのpathはpathの座標なのでCSSで制御されずイラストレーターのキャンバスサイズで作られたままブラウザ上で動いているのである。
少し分かりづらいかもしれないので例をあげると、ブラウザで表示したいサイズが横幅500pxなのにイラストレーターのアートボードのサイズが2000pxで作られていたらマスクサイズがでかすぎて下の画像に合わないので上手く表示できないということである。
なのでアートボードのサイズを実際の表示サイズに調節して文字のSVGもpathも同じサイズにすればちゃんとイメージ通りの動きで表示される。
本当にここまで何時間かかったのか…あとから考えるとかなりシンプルなのだがかなり苦戦してしまった。
タイミングを遅らせる
今回、他のJSでの動きが終わってからの表示であったためタイミングを2秒後に開始する設定をした。
var stroke;
stroke = new Vivus('svg-animation', {type: 'scenario-sync',start: 'manual',duration: 8, forceRender: false ,animTimingFunction:Vivus.EASE});
setTimeout(() => {stroke.play();}, 2000);
これで開始タイミングを遅らせる事ができる。
文字が重なる部分は変になってしまう
文字同士が重なってしまったり、クロスする線があるような画像の場合、マスクが上手くいかず変に見えてしまう。
なのでクロスする線がある場合はできるだけクロスする線が無いように画像を変更するか、速度を上げて違和感を感じさせないように表示するかするしかない。
私の場合、クロスする線が有ったのでそれは線を削除することにした。
まとめ
かなりハマってしまったが後からまとめたらかなりシンプルな作業だったことがわかった。
次回ははまらずスムーズに進むことだろう。5〜6時間かけてしまったがおそらく普通にやれば1〜2時間あれば出来そうな作業か…。
コメントを残す