SVGで「文字を書いていくアニメーション」を作る – コーヒーサーバは香炉である
かきかたプリントメーカーに「書き順アニメーション」という機能を実装した。 これを作る際に使ったテクニックを紹介する。スクリプトは不要。純粋なSVGだけで次ようなアニメーションが作れる。 (2021/06/16追記 : アニメーションSVGの貼り過ぎでスマホだとめちゃくちゃ重かったり表示されなかったり遅延が発生したりします。すみません。) SVGに「線を途中まで書く」という機能自体はない。そこでちょっと工夫が必要になる。 テクニックの概要はこんな感じだ。 「ものすごく荒い破線で線を表示し、破線のオフセットがちょっとずつ変化するようにする」 ステップ0 : 破線を使って「書きかけの線」を作る こちらはベジエ曲線1本で作った「の」である。 ソリッドな線で表示される。SVGのソースはこんな感じだ。 <?xml version="1.0" encoding="UTF-8" standalone="n
ひらがな練習プリントを作れるサービスを公開したよ – コーヒーサーバは香炉である
好きな言葉でひらがなの練習ができるプリントが作れるサービス「ひらがなプリントメーカー(仮)」を公開した。今後カタカナにも対応したり、文字練習以外の教材の生成ができるようにすることもぼんやり考えているので、名前は変わるかもしれない。 (2019年01月11日追記) 0〜9の数字にも対応したので「かきかたプリントメーカー」に改名した。さらにカタカナもサポートした。 紙の向きや縦書き横書き、文字サイズが切り替えられるようになっている。書き順もつけることができるので、数字をおぼえた子ならひとりでもできる。 PDFファイルを生成するので、そのまま自宅やコンビニのプリンタできれいに印刷できる。スマホでぽちぽち作って帰り道にコンビニで印刷してお土産に持って帰るなんてこともできる。 もともとうちの3歳の娘のために作ったのだが、これはけっこう需要があるだろうということで真面目に作り込んで公開した。 市販の子
ポケモンGOやIngressがきっかけでOpenStreetMapに興味を持ったら – コーヒーサーバは香炉である
ポケモンGOやIngressのベースとして使われる地図がOpenStreetMapになった。OpenStreetMapというのは、誰でも自由に編集できて誰でも自由に使うことができる地図。Wikipediaはみんなで作れる自由な百科事典、OpenStreetMapはみんなで作れる自由な地図というわけ。 ゲームがきっかけでOpenStreetMapに興味を持った方、前から知っているけれど再び興味を持ったという方に向けて、OpenStreetMapの編集に参加するとこんなに面白いよという話をちょっと書いてみる。ポケモンGOやIngressの面白さとOpenStreetMapの編集の楽しさはけっこう重なるところがあるので、ちょっと始めてみない? というわけだ。OpenStreetMapと書くのは面倒なのでここから先は略称の “OSM” でいくことにする。 私はOSM歴半年くらいのマッパー (地図編
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
