SVGで「文字を書いていくアニメーション」を作る

かきかたプリントメーカーに「書き順アニメーション」という機能を実装した。 これを作る際に使ったテクニックを紹介する。スクリプトは不要。純粋なSVGだけで次ようなアニメーションが作れる。 (2021/06/16追記 : アニメーションSVGの貼り過ぎでスマホだとめちゃくちゃ重かったり表示されなかったり遅延が発生したりします。すみません。) SVGに「線を途中まで書く」という機能自体はない。そこでちょっと工夫が必要になる。 テクニックの概要はこんな感じだ。 「ものすごく荒い破線で線を表示し、破線のオフセットがち

続きを読む »

「かきかたプリントメーカー」に面白い文字が続々登場

「かきかたプリントメーカー」にちょっとずつ文字を追加している。最初はひらがなとカタカナと数字だけだったが、アルファベットや記号、小学校2年生までの教科書に登場する漢字と、3年生で習うことになっている漢字一部に対応し、今では約600文字をサポートしている。 さらに、最近、学校で習う順番や難易度とは無関係に「書けると嬉しいであろう文字」を追加している。 驚異の57画! ビャンビャン麺 まずは「ビャンビャン麺」の「ビャン」である。57画という驚異の画数を誇るが、西安料理「ビャンビャン麺」の「ビャン」にしか使われな

続きを読む »

「かきかたプリントメーカー」がかなり豪華になった

2019年1月に公開した「かきかたプリントメーカー」だが、11月に大型アップデートをして、その後もいろいろと小さなアップデートを重ね、なかなか良い感じになった。使えるレイアウトが6種類に増えて、特訓から遊び、季節の行事まで様々な用途に対応できるようになった。 おまけ。へのへのもへじが練習できる。 先週のアップデートでは「絵日記スタイル」に画像のアップロード機能を追加した。もともとあったA4とB5に加えて新たに日本の郵便はがきのサイズもサポートしたので、絵葉書っぽく使うこともできる。 ちなみに、開発者の家庭の

続きを読む »