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

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

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

デザイナーでもできる、 AfterEffectsからのSVGアニメーション書き出し - LOGzeudon

2017/06/11 70 users LOGzeudon AfterEffects デザイナー

2017 - 06 - 11 デザイナーでもできる、 AfterEffectsからのSVGアニメーション書き出し デザイン 日記 After Effects でつくったモーショングラフィックは、プラグインを利用して簡単に書き出し、ブラウザ表示できます。 （複雑なアニメーションだと重たいので注意） 書き出す方法 まずはごにょごにょしてアニメーションをつくります。 Bodymovin Add-on で... 続きを読む

なかなか気付かれにくいけれど、見つけたら「おおっ！」となるSVGアニメーションのテクニック | コリス

2017/04/12 60 users コリス テクニック

ヘッダに配置されたハンバーガーメニュー。 まぁ、ハンバーガーメニューでなくてもいいのですが、スクロールするとヘッダから流体のようにちゅるんと分離するアニメーションを紹介します。 実装しても気付かれにくいですが、見つけたら ...記事の続きを読む 続きを読む

SVGのアニメーションもこれなら簡単！文字や図形を一筆書きのように線で描くSVGアニメーションの作り方 | コリス

2017/04/04 90 users 一筆書き コリス SVG 図形 アニメーション

文字や図形、そしてイラストやロゴなどを一筆書きのように、線・ラインで描くSVGのアニメーションが驚くほど簡単に作成できるオンラインツールを紹介します。 下記のように一つずつ順番に描いたり、3つを同時に描いたり、タイミング ...記事の続きを読む 続きを読む

一から学ぶベジェ曲線 | プログラミング | 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で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神... 続きを読む