プリザンターの初期設定画面にアニメーションを入れてみた！
おはようございます。おーみんです。
プリザンターの初期設定後の画面は真っ白なので、今日勉強したSVGとCSSでテキストアニメーションを作ってみました！
— うるとらおーみん (@Ooooooomin_365) September 16, 2019
Hello, Pleasanter!
表示されるのは一応最初のみ🤗
テーブル作って、全消ししても出てこないです。
いずれハヤト君も入れて「ここから新規作成してね！」的な矢印も作りたいな～！ pic.twitter.com/AG9QGNrEz3
※ハヤト君というのはプリザンターの公式キャラクターのことです。そう。あの鳥のことです！
（注意）
今回作ったアニメーションは一応動作確認はしていますが、あくまで趣味程度で作ったものであり、細かなテストはしていませんので参考にする際はご注意ください。
プリザンター本体のコードを以下に示します。
・SiteUtilities.cs
赤枠で囲った部分が今回追記した部分です。
_usingには期限テーブルなどがないときにのみSvgタグが出力されるように設定しています。CSSの設定をするためにid値も「helloPleasanter」と設定しておきます。
・Site.css
2939～2942行目は表示範囲を確保しています。
2944～2985行目はアニメーションの設定になります。
stroke-dasharrayは点線の幅を表しています。つまり上だと1400px幅のある点線を描いていることになります。stroke-dashoffsetはstroke-dasharrayだけだと点線になってしまうのでstroke-dashoffsetを入力して位置をずらしていきます。
keyframesはアニメーションの設定部分で、最初はstroke-dashoffsetを1400pxに、最後の方にいくにしたがって0pxにすることで「Hello, Pleasanter」と塗りつぶされていない文字が完成します。（アニメーション終了後に黒く塗りつぶす）
いや～それにしても動画を見てもらうと分かるかと思いますが、SVGは軽いっすね！
サクサク動くので使用している身としても使いやすいです。
プリザンターには円グラフや棒グラフがないので、次はそれを作ってみたいですな～。
もし作ったらブログにします。
