この1年、Webのパフォーマンスで変わったことは？──HTML5 Conference 2016
この1年、Webのパフォーマンスで変わったことは？──HTML5 Conference 2016 川田寛（ピクシブ株式会社） こんにちは、ふろしきです。HTML5 Conference 2016の当日は、38度近くの熱があり、発表時はろれつが回ってませんでした。しかし、伝えたいことは伝えられたと思っています。その内容とは… 「この1年でWebのパフォーマンスの技術にどんな動きがあったのか」 というダイジェスト。ここで話した3つのテーマについて、本記事でもご紹介。 1. レイアウト処理を減らす HTML5がバスワードするよりもずっと前から、CSSでアニメーションさせることはごくごくあたりまえ。JSが扱えないデザイナーであっても手軽にアニメーションできる良い世界になりました。しかしそこに、モバイルが出現したことで、JSだけで満足という人たちもCSSの機能を活用しなくてはいけなくなりました。 モ
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を理解する - console.lealog();
理解できたらいいな・・。 だいぶ今さら感はあるのですが、改めて知っておきたいタイミングなので。 参考：window.requestAnimationFrame - Web API リファレンス | MDN 一定間隔で処理を繰り返す CanvasでもCssアニメーションでも、「描画処理を繰り返し実行する」ところは一緒。 そこをどうやって実装するかという話で、今まではsetIntervalやsetTimeoutを再帰で呼んだりしてました。 setInterval var anim = function() { console.log('Animations here.'); }; window.setInterval(anim, 1000); 一番わかりやすいし手軽です。 だいたいいつもコレなんじゃないでしょうか。 setTimeout var anim = function() { cons
アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのおじいちゃんです。 今回はパフォーマンスを意識したアニメーションを実装できる「requestAnimationFrame」について書きたいと思います。 requestAnimationFrameとは requestAnimationFrameは、アニメーション実装時など、再描画が頻繁に行われる処理に使えるメソッドになります。 window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。 引用元：MDN setTimeoutやsetIntevalと比較されることが多いですが、主に以下のような違いがあります。 requestAnima
Aerotwist - FLIP Your Animations
Animations in your web app should run at 60fps. Not always easy to achieve that, and it really depends on what you're trying to do, but I'm here to help. With FLIP. Last updated: 11 Feb 2015 Est. Read Time: 8 min Share this: Twitter Tagged: #performance, #transitions Update 17th May, 2022 - The lovely folks at GSAP have made their FLIP Plugin freely available - check it out! Recently I've had the
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
setAnimationFrameTimeout :: [ FLAT ] Develop | ONO TAKEHIKO from aguije inc.
