プリザンターの初期設定後の画面は真っ白なので、今日勉強したSVGとCSSでテキストアニメーションを作ってみました！

Hello, Pleasanter!

表示されるのは一応最初のみ🤗
テーブル作って、全消ししても出てこないです。

いずれハヤト君も入れて「ここから新規作成してね！」的な矢印も作りたいな～！ pic.twitter.com/AG9QGNrEz3

— 健康の極みおーみん (@Ooooooomin_365) September 16, 2019

SVGとCSSでアニメーション！
面白い！！

stroke-dasharrayとstroke-dashoffsetの意味が最初分からなかったけど、だいぶ分かった気がする～！ pic.twitter.com/CQeEUSXD40

— 健康の極みおーみん (@Ooooooomin_365) September 16, 2019

プリザンターとは？

プリザンターとは株式会社インプリムが開発しているオープンソースのWebデータベースです。
データ管理やら業務アプリがマウス操作だけ（ノンプログラミング）でサクッと作れてしまう超有能なプラットフォーム（しかもOSSなので無料という！）なのですな。


オープンソースで脱エクセル！Pleasanter公式サイト


本体コードも自由に変えられるし、スタイルやスクリプト等の拡張機能も豊富なので個人的には勉強した内容を試す場としても最適だと思うんですよね～。

SVGテキストアニメーションを入れてみた！

ということで、アニメーションを入れていきましょう！

"Hello, Pleasanter!"の表示

Implem.Pleasanter/Implem.Pleasanter/Models/Sites/SiteUtilities.csのSiteTopメソッドに追記しています。

コピー用として追記した赤枠の部分を以下に記載します。

Svg(
    id: "helloPleasanter",
    action: () => hb
        .SvgText(
            text: "Hello, Pleasanter!",
            x: 270,
            y: 300),   
    _using: !siteConditions.Any());

あとでCSSでいじるためにidを"helloPleasanter"と設定しています。
x、y項目は位置を、_using項目は表示する条件を表しています。

アニメーション

Implem.Pleasanter/Implem.Pleasanter/Styles/Site.cssに追記しています。

#helloPleasanter {
    width: 2000px;
    height: 1000px;
}

#helloPleasanter text {
    stroke: black;
    fill: black;
    font-size: 150px;
    font-style: italic;
    stroke-dasharray: 1400px;
    stroke-width: 1px;
    -webkit-animation: stroke-anim 8s linear;
    animation: stroke-anim 8s linear;
}

@-webkit-keyframes stroke-anim {
    0% {
        stroke-dashoffset: 1400px;
        fill: transparent;
    }

    50% {
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 0%;
        fill: black;
    }
}

@keyframes stroke-anim {
    0% {
        stroke-dashoffset: 1400px;
        fill: transparent;
    }

    50% {
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 0%;
        fill: black;
    }
}

stroke-dasharrayだけだと破線になってしまうので、stroke-dashoffsetでその破線の位置を動かしていきます。keyframesが100%に近づくとともにstroke-dashoffsetを0%にしていくことで最終的に文字が出来上がるという流れですな。
おまけにfill: blackで塗りつぶすという感じ。

（よくよく思ったんですが、これkeyframesの50%部分は書く必要なかった気もしますがそこはまあ良いとしましょうｗｗ）

おわりに

以上でSVGテキストアニメーションの内容は終わりです。
上手く動くとこんな感じのアニメーションになるはず！

今後はこれを応用して手書きの似顔絵っぽいやつ→その人の写真が出る的なのも作ってみたいな～と思っています。


ではでは！また！