SVGで「文字を書いていくアニメーション」を作る – コーヒーサーバは香炉である
かきかたプリントメーカーに「書き順アニメーション」という機能を実装した。 これを作る際に使ったテクニックを紹介する。スクリプトは不要。純粋なSVGだけで次ようなアニメーションが作れる。 (2021/06/16追記 : アニメーションSVGの貼り過ぎでスマホだとめちゃくちゃ重かったり表示されなかったり遅延が発生したりします。すみません。) SVGに「線を途中まで書く」という機能自体はない。そこでちょっと工夫が必要になる。 テクニックの概要はこんな感じだ。 「ものすごく荒い破線で線を表示し、破線のオフセットがちょっとずつ変化するようにする」 ステップ0 : 破線を使って「書きかけの線」を作る こちらはベジエ曲線1本で作った「の」である。 ソリッドな線で表示される。SVGのソースはこんな感じだ。 <?xml version="1.0" encoding="UTF-8" standalone="n
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ラスター画像からベクター画像への変換について
PINTR