SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net
Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
requestAnimationFrame and Date.now in WebKit - latest log
2015-03-03 の一連のツイートがこちら performance.now() iOS 8.0 で追加されて、iOS 8.1 で削除されてた— コラーゲンたっぷりさん (@uupaa) 2015, 3月 3 正しくは、「iOS 8.1.1 で」ですね performance.now() 削除されてたのソース。 WebKit のとこ https://t.co/gvpnz9Wwk2— コラーゲンたっぷりさん (@uupaa) 2015, 3月 3 performance.now()の無効化が何故痛いかというと、Date.nowは相当重い部類のAPIという認識なのでアニメーション中には一回も呼びたくないしTimer系を呼ばないように組み上げると速くなる。 その辺の事情を知らない人はバンバン呼んでるけど、あれはよろしくないです— コラーゲンたっぷりさん (@uupaa) 2015, 3月 3
CreateJS 日本語リファレンス
CreateJSとは、HTML5でリッチコンテンツを制作するためのJavaScriptライブラリです。 EaselJS EaselJSはcanvas向けに保持されたグラフィックスモードを提供するJavascriptライブラリであり、完全な階層構造の表示リスト、 コアインタラクションモデル、canvasでの2Dグラフィックスを簡易にするヘルパークラスを含みます。 EaselJSはリッチなHTML5Canvasにおけるリッチなグラフィックスやインタラクションに役立つソリューションを提供します。
CSSアニメーションの応用事例 - ワザノバ | wazanova
http://css-tricks.com/css-animation-tricks/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約3時間前 Zach SaucierがCSSアニメーションを駆使したテクニックを披露しています。 #1) Jump to another state mid-animation CSS animationで、微妙に数値の違う二つのkeyframe（例えば、.001%）を利用して、propertyを新しい値に即ジャンプする方法。 CSSコード @keyframes toggleOpacity { 50% { opacity: 1; } /* Turn off / 50.001% { opacity: 0.4; } / Keep off state for a short perio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
