Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8764

OSSのプリザンターにSVGテキストアニメーションを入れてみた!

$
0
0








SVGとCSSの勉強がてらプリザンターで遊んでいたら割と良さげなものが出来てしまったのでサクッとまとめていこうかなと思います。

プリザンターとは?

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


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


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

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

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

"Hello, Pleasanter!"の表示

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

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

Implem.Pleasanter/Implem.Pleasanter/Models/Sites/SiteUtilities.cs
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に追記しています。

Implem.Pleasanter/Implem.Pleasanter/Styles/Site.css
#helloPleasanter{width:2000px;height:1000px;}#helloPleasantertext{stroke:black;fill:black;font-size:150px;font-style:italic;stroke-dasharray:1400px;stroke-width:1px;-webkit-animation:stroke-anim8slinear;animation:stroke-anim8slinear;}@-webkit-keyframesstroke-anim{0%{stroke-dashoffset:1400px;fill:transparent;}50%{fill:transparent;}100%{stroke-dashoffset:0%;fill:black;}}@keyframesstroke-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%部分は書く必要なかった気もしますがそこはまあ良いとしましょうww)

おわりに

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



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


ではでは!また!


Viewing all articles
Browse latest Browse all 8764

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>