UI改善にキラリと役立つ！ 今こそ導入したいSVGアニメーションの作り方まとめ - ICS MEDIA

2017/07/12 156 users SVG マイクロインタラクション UI改善 CSS アプローチ

SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「 SVGで始めるマイクロインタラクション入門 」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。... 続きを読む

一から学ぶベジェ曲線 | プログラミング | POSTD

2017/02/23 151 users 曲線 POSTD 形態 ベジェ曲線 動作

ベジェ曲線は、曲線を描くのに役立つ美しい抽象概念です。最もよく使われる形態である3次ベジェ曲線は、曲線を描いて格納するという問題を4つの座標を格納するという問題に変えます。点の2つは曲線の端点となっているので、多くのベジェ曲線を使ってさらに複雑な構造を正確に作り上げることが容易になります。(編注：SVGアニメーションについては 元記事 で動作をご確認ください。) 皆さんは線分のことをどう表現します... 続きを読む

SVGアニメーションの現状 | プログラミング | POSTD

2015/07/10 396 users SVG POSTD ヒント プログラミング オプション

SVGの世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧... 続きを読む

SVG女子を90%軽くしたSVG軽量化テク+α #svggirl | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/04/25 240 users ラスベガス あいつ アニメーション HTML カヤック

あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神... 続きを読む