SVGとアニメーション１〜pathに沿って移動するアニメーション | IT工房｜AI入門とWeb開発
SVGのpathに沿ってアニメーションさせる CodeGridの記事が元ネタです。（有料ですがフロントエンドの方にはお勧めのサイトです。） シンプルなサンプル このサンプルのアニメーションの仕組みは刻々と進む時間に対してpathの特定の長さを指定して、getPointAtLengthで現在のpath長さの座標を導き出します。その座標を円の中心座標にすることで移動をさせています。 具体的にはタイマーはsetIntevalを使用せずに、requestAnimationFrame()を使うことで代用しています。 requestAnimationFrameはブラウザの再描画の準備が整ったら次の関数を読み込みます。読み込む速度はブラウザに依存しています。そのため、経過時間を取得する処理を追記する必要があります。今回は変数elapsedTimeに現時刻から経過時間を算出して使用しています。 HTMLコ
Emacsの中で動く作図ツールを作る
先日も書きましたが最近はEmacsの中で動く作図ツールを作っています。 ソース: misohena/el-easydraw: Embedded drawing tool for Emacs (github.com) 図1: org-modeの中で思いついた時に図を描きエクスポートするまでの様子 以前囲碁の棋譜編集ツールを作ってその時にも書きましたが、Emacsの中でこのくらいのことは出来ても罰は当たらないと思うんですよね(このくらい出来て当然だろ！の意)。 org-modeは素晴らしいツールでいろんな事が出来ますが、文書の中に別の要素を埋め込んで統一的に編集する機能はまだまだ改善の余地が沢山あると思います。(ソースコードブロックのようなテキストベースでプログラマーが誰でも喜ぶような物は充実していますけど) 特にGUI要素が全然足りません。例えば図を描くならditaaやPlantUMLなんか
ズーム可能なSVGを実装する方法の解説 | 株式会社カブク
ソフトウェアエンジニアの畠山です。今回は，SVGに対して"Pan"と"Zoom"を実装する方法を解説します。 PanとZoomのためのライブラリはsvg-pan-zoomなどがありますが，今回はこういったライブラリを使用しないで実装してみます。 ※ Google Chrome 69でしか動作検証していません。 SVGのviewBox まず最初に，svgタグのviewBox属性についておさらいしておきます。なぜならこのviewBoxを使ってPanとZoomを実現するからです．viewBox属性は”min-x”, “min-y”, “width”, “height” の4つの数値リストをスペース区切り（もしくはカンマ区切り）で指定します． 例えば，viewBox属性に[min-x min-y width height] = [0 0 100 100] を指定すると以下のようになります。 <sv
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
Free vectors icons
No notifications to show yet You’ll see useful information here soon. Stay tuned!
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
