HTML5 <canvas> アニメーション ボール跳ね返り – SCRATCHBRAIN labs
HTML5 <canvas>タグを使ってアニメーションを試してみた。 ボールが水平に移動し、端までいくと跳ね返って反対方向に移動するというもの。 摩擦はなし。 イメージ画像 [アニメーションサンプルの動作確認はこちら] 基本的な流れは、ボールを描いたら、一度canvasを白紙にして、少し移動した位置にボールを再描画する、の地道な繰り返し。あたかも連続してボールは移動しているようだけれど、実際は描いては消す、描いては消すということをやっている。 繰り返し処理は、下のソース18行目のsetInterval関数を使う。 draw関数が10ミリ秒間隔で実行され、ボールが描画される。 28〜30行目でボールがはみ出したかを判定。 はみ出した場合は、速度にマイナスを掛けて、反対方向の力にする。 <script> var ctx;// canvas var vx = 2;// 速度 var
CSS3のアニメーションってすごい。 - ありの日記
下の記事でほとんどCSSだけでアニメーションしているサンプルがっ。 -webkit-transformを使ったCSSアニメーションを試してみた at HouseTect, JavaScriptな情報をあなたに CSS3のアニメーション機能ってのはすごい。JavaScriptで動かすのに比べて簡単でかつなめらかに動く気がする。まだ、動作するブラウザが限られているっぽい（Webkit系とFirefoxくらいなのかな）んだけど、今からでもやっておくべきだと思った。 CSSアニメーション系の仕様 CSS Animations Module Level 3 CSS Transitions Module Level 3 CSS 2D Transforms Module Level 3 CSS 3D Transforms Module Level 3 CSS transformを使って3Dっぽく見せるサ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
