canvasで大量の円がランダムに動くパーティクルを実装してみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのぜんちゃんです。 最近はアニメーション表現を増やすために、canvasの勉強を始めました。そこで、今回はcanvasやJavaScriptの基本技術を使って、円がランダムに動くパーティクルアニメーションを実装したいと思います。 今回作るアニメーションはこちらです。 円を作成・描画する canvas要素を作成し、そのcanvas内に円を作っていきます。 まずは一つだけ作りたいと思います。 <canvas id="canvas"></canvas> // キャンバス要素を取得 const canvas = document.getElementById('canvas'); // キャンパスに描画するコンテキストを取得 const ctx = canvas.getContext('2d'); // キャンバスサイズをwindowサイズに canvas.wi
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
この発想はすごい！アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js
アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。 Freezeframe.js -GitHub Freezeframe.jsの特徴 Freezeframe.jsのデモ Freezeframe.jsの使い方 Freezeframe.jsの特徴 Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。 下記は、ホバーで
svg / canvas出力ができるbodymovinの紹介 - KAYAC engineers' blog
やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で１番プログラムできないおじさんの町田（@machida-yousuke）と申します。 今回は、「映像業界?フロントエンド業界？が注目しているオープンソースライブラリ bodymovin」について紹介します。 ちなみに私は、元某インターネット広告代理店の映像クリエイター兼フリーランスのモーショングラフィッカーでした。 ※この記事はAfterEffects（以下「AE」と称する）の基本的な操作、用語を理解している前提で進めていきます。 ※bodymovinのバーションは V 4.6.10、AEのバーションはadobe AfterEffects cc 2017で進めていきます。 （V 4.6.10から使用言語によっておきるバグの修正がされています。） ※使用PCはMacです。 bodymovinとは AE
Webデザインの見せ方やアイデアが素晴らしい、最近気になったチェックしておきたいWebサイトのまとめ
Webデザインのセンスを磨く方法の一つは、他人の作ったものを数多く見ること。 コンテンツの見せ方やレイアウト、繊細なアニメーションを使ったインタラクションなど、デザインのアイデアが素晴らしい、最近気になったチェックしておきたいWebサイトを紹介します。 Wrk フランスのWeb制作会社のサイト。ぱっと見、普通の矩形パネルに見えますが、CanvasとSVGを使った弾力性に富んだレイアウトやグラフィックは非常に楽しめます。 縦長ページの構成は新感覚で、ナビゲーションのスマホ時にフッタのコンテンツと合体するのはいいアイデアですね。 Booounce! ショートムービーやアニメーションGIFをコレクションしているサイトで、バウンスの名のようにバウンドを伴うエフェクトが気持ちいいです。ナビゲーションの細かいアニメーションをはじめ、一覧表示、進むと戻る、作品の見せ方、なにもかもがインタラクション性に優
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
