WebのUIは基本的に静的で、アニメーションはそれだけ目を引きます。かといって今は簡単にアニメーションが実装できるようになっていますので、ほんの少し揺れた程度ではスルーされてしまうでしょう。 そこでwheelnav.jsの登場です。wheelnav.jsはダイナミックに回転する、目を引くこと間違いなしのライブラリです。 wheelnav.jsの使い方 デモです。マウスオーバーで文字が回転、クリックで円全体が回転します。 メニューに使った場合。アプリではこういうUIがありますよね。 初代iPodっぽいホイールUI。 こんな複雑なUIも可能です。 縦型メニューと組み合わせると格好良さそうです。 wheelnav.jsは回転するナビゲーションUIとなっています。Raphaël.jsを使っており、SVGで描画されています。メニューでの利用が基本のようですが、アイディア次第で色々な場面で使えそうです
Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く