HTML5+Canvasで学ぶ物理アニメーションの基礎
Posted: 2015.07.28 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して物体が落下するという簡単な物理アニメーションを作成してみます。 Canvasアニメーションの基礎については下記を参考にしてください。 この記事は下記をベースとして進めます。 HTML5で作るCanvasアニメーションの基礎 HTML5+Canvasでパーティクルっぽいのを作ってみる 基本となるオブジェクトを作成する 前回作成したParticleオブジェクトを少し編集します。 var Particle = function(scale, color, vx, vy) { this.scale = scale; //大きさ this.color = color; //色 this.vx = vx; //X速度 this.vy = vy
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
2次元物理計算エンジンをブラウザで実現する「Matter.js」
面白いアニメーションを作るために物理演算エンジンを使いこなせればとても便利ですが、自力で物理演算に取り組むには高度な知識と技術が必要となります。そんな扱いの難しい物理演算を手軽に導入できるJavaScriptのAPIが「Matter.js」です。 Matter.js - a 2D rigid body JavaScript physics engine http://brm.io/matter-js/ Matter.jsでどんなことができるのかはデモを見れば一発で分かります。上記サイトの「Demo」をクリック。 すると、「Matter.js Physics Engine Demo」という物理エンジンのデモページが開くので、プルダウンメニューにあるデフォルトパラメータを指定して、「Reset」をクリックすればOK。2Dのアニメーションが再生され、Matter.jsでどんなことができるのかが直
『スマートフォンで動くリアルタイム3Dグラフィック』
はじめまして。 アメーバ事業本部コア室コアディベロップメントグループの新屋です。 コア室では3Dアニメーションライブラリの開発を行っています。 リアルタイム・プリレンダ問わず3Dモーショングラフィックが好きで趣味でも3Dの制作をしています。プリレンダはTAKCOMさん、WOWのdaihei shibataさん、ogaoooooさん、リアルタイムはMasato Tsutsuiさん等の作品が好きです。 リアルタイム3D 昨今のスマートフォンの処理能力の向上に伴い、webブラウザでも一昔前にPCで動作していたようなリッチなコンテンツも高速に処理できるようになりました。 スマホサービスでは必ずと言っていい程CSSやjavascriptでのUI・演出アニメーションが組込まれています。 そうしたアニメーションの表現力を引き上げる方法の一つとしてリアルタイム3Dを紹介します。 リアルタイム3Dを扱う言語
Home - ui-transitions
Your go-to blog for Android, iPhone, and Mac tutorials. Master the art of seamless user interfaces with our expert guides, tips, and the latest trends in UI animations. Let’s transform the way users interact with technology, one transition at a time. Happy learning! Welcome to this tutorial on how to connect JBL earbuds to your Android device! In this guide, we will walk you through the step-by-st
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
» スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic
パララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。 そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。 スクロールや、リサイズといったJavaScriptのイベントは連続で処理されます。そういったイベントの「開始した時」「動作している時」「停止した時」の状態が取れるjQueryのプラグインを作成しました。 jQuery.MovingState このプラグインを使い、CSS3 Animationsを動的に操作してみたいと思います。 CSS3 Animationsを一時的に停止
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
requestAnimationFrame ＜ よーしおまえらー、アニメーションにsetInterval使うなよー - くろまほうさいきょうでんせつ
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの？ 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」:phpspot開発日誌
HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」 2011年04月08日- Test HTML5 Desktop Notification Plugin HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」。 画面の右下にポップアップ通知を出す機能がHTML5であるみたいですが、それをjQueryで超簡単に実装するプラグイン。 jQueryで実装することで、とりあえず次のように簡単に実装できます。画像のパスなんかも指定してアイコンを設定出来ます。 $.jwNotify({ image : 'path-to-image-file', title: 'title-to-be-shown', body: 'body-of-the-notification', timeout:
JavaScriptでタイムラインベースのアニメーションを実現する·mashi MOONGIFT
mashiはJavaScriptベースのタイムライン指定のアニメーションを実現するツールキット。 mashiはJavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを実現しようと思うと、技術的に候補にあがるのがアニメーションGIF、Flashそして動画だろう。どれもあまり動的に作り出すものではないので、再利用性やシステムとの親和性は高くない。 画面上の部分がアニメーションする もっと手軽にアニメーションを作ったり閲覧することができれば、Webサービスのアピール方法が変わるかもしれない。そのためのツールキットがmashiになる。タイムラインに則って、情報をスムーズに切り替えることが可能だ。 mashiはベースになる幾つかのツールキットを組み合わせつつ、app.jsというファイルを編集してタイムラインを作っていく。作られたアニメーションは再生ボタンがあり、それを
jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） - KAYAC engineers' blog
JavaScript Advent Calendar 20105日目のago（@kyo_ago）です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
[JS]背景やボーダーの不透明度をアニメーションで変更するスクリプト -Transify
IE6にも対応した、指定したエレメントの背景やボーダーの不透明度をアニメーションで変更するjQueryのプラグインを紹介します。 IE6でのキャプチャ Transifyの特徴 あらゆるエレメントの背景とボーダーの不透明度を変更します。 設置は簡単で、軽量のスクリプト。 主要ブラウザの全てで動作します。 機能するのは、背景のカラー、背景の画像、ボーダーです。 マウスのホバーで、不透明度をアニメーションで変更します。 jQuery1.4.3でテスト済みです（前のバージョンでも動作します）。 [ad#ad-2] Transifyの実装 「jquery.js」と「transify-min.js」を外部ファイルとして指定し、下記のように記述します。 「#selector」は任意のエレメントを指定します。 $('#selector').transify(); デフォルトでの不透明度は60%に設定されて
これはいい！iPadテーマのjQuery画像ギャラリー:phpspot開発日誌
Build an iPad-Themed Image Slider with jQuery | Design Shack これはいい！iPadテーマのjQuery画像ギャラリー。 画像ギャラリースクリプトは色々ありますが、iPadの中に映し出されたようなブラウザ上で動作する画像ギャラリーです。 デモページを見れば、細かなデザインにもAppleっぽさが取り入られているが分かります。 ちょっと変わったことをしたい場合や、iPadに関連するサイトやアプリ紹介ページなんかで使えるかもしれませんね。 関連エントリ 画像ギャラリーを作る際に使えるFlashやJavaScriptを活用したライブラリ＆サンプル集 超クール画像ギャラリーが作れるJavaScriptライブラリ どんな写真も指定サイズにまとめてギャラリーにできるjQueryプラグイン「Image Scale Carousel」 画像ギャラリー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sign in - Google Accounts
5509.me