SVG + React でつくる レイヤーの自由変形 / Layer Transformation with React + SVG
動機 Webでよく使うアイコンはせいぜい数種類なのに、Font AwesomeやMaterial Design Iconsなどの「どんどん増えていくWebフォント」を使うのはどうなんだろうと思い、ためしにReactを使ってSVGのアイコンセットのようなものを作ってみました。 結果、アイコンが表示されるまでのラグもなく、タイプ数も若干減らせそうでいい感じです。 デモ jsfiddleにデモを準備しました。(デモは仕方なくJavaScript1.7です) アイコンはMaterial Design IconsのSVGを使っています。 実用的な使い方 下記のようにモジュールに分け、browserifyとbabelifyを使うのが便利だと思います。 import React from 'react'; const Icon = (props) => ( <svg style={{width: '24
ここでプレーできる。Chrome/Firefox以外はしらん。 http://mizchi-sandbox.github.io/ar2/ gyazoのフレームレートが低いけど、実際には60FPS出てるはず。 リポジトリはここ mizchi-sandbox/ar2 · GitHub 昔作ってた mizchi/actrogue · GitHub と似たようなのを、物理エンジンのっけてReactとSVGで再現したら楽なんじゃないか、という発想で作り始めた。ReactとSVGのパフォーマンス面での技術検証でもある。 なにこれ 物理エンジンを60FPSで回してSVGに形状をマッピングしてReactで差分描画する。 この方式の利点は、SVGで簡単な形状を手書きしながら高速にプロトタイピングでき、描画速度も最低限確保できる点にある。弾幕を生成すると大量のオブジェクトが飛び交うので、下手に人間がチューニン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く