JointJS - 多彩な図を描けるJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。 今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図を描けます。 JointJSの使い方 デモです。まずは回転する図形。 こんな図形も描けます。なお、緑と赤のポイントはドラッグでラインを接続できます。 各オブジェクトはマウスでドラッグできます。 図はグルーピングされていたり、コネクトされている場合は線も一緒に動きます。 デモです。赤いポイントがアニメーションしています。 パイチャートともちょっと違う図形です。 各要素
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
GreenSock – 高速なHTML5アニメーションライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5によってかつてFlashが行っていた領域がJavaScript/CSS3によって実現されています。その一つにアニメーションがあります。これまでFlashバナーなどで提供されていたアニメーションが、Web標準の技術だけで行えるようになっています。 とはいえ、できるようになったと言ってもやり方は簡単ではありません。そのためには専用ライブラリがあった方がいいでしょう。そこで今回はGreenSockを紹介します。 GreenSockの使い方 GreenSockの紹介動画です。 これまでFlashでやっていたようなアニメーションが実現できています。 GreenSockが作り出すアニメーションはFlashと遜色ないのではないでしょうか。もちろんJavaScirptと連携させてつかうこ
HTML5アニメーションを簡単に作成できるツール「Google Web Designer」＆「HTML5 MAKER」｜BLACKFLAG
Webページ上にアニメーション演出を組み込もうとする場合、 今ではJavaScript（jQuery）やCSS3など、実装方法がいくつかありますが HTML5でのアニメーション動作を簡単に作成することができる 気になる便利ツールが2点ほどあったので自分用メモとして紹介してみます。 Google Web Designer 言わずと知れたGoogleさんから公開している HTML5アニメーションをつけた広告を制作できるツール「Google Web Designer」。 ツールは無料でダウンロードすることができます。 この「Google Web Designer」では広告バナーのみならず 画像ギャラリーなども簡単に作れるようになっており 操作も直感的に制作できるようになっています。 作成したデータは一式ダウンロードすることができ 組み込みも簡単にできます。 試しに作成してみたサンプルはこちら。
Google Web Designer の概要 - Google Web Designer ヘルプ
オンライン広告や動画をデザインする Google Web Designer は、視覚的なコーディング インターフェースを使用して、ビジネス向けの HTML5 広告、画像、動画などのさまざまなウェブ コンテンツをデザイン、作成できる高度なウェブ アプリケーションです。Google Web Designer のデザインビューを使用すれば、描画ツール、テキスト、3D オブジェクトを活用してコンテンツを作成し、そのすべてをタイムラインでアニメーション化できます。 コードを開発する Google Web Designer のコードビューでは、CSS、JavaScript、XML の各形式のファイルを作成できます。構文のハイライト表示機能やコード オートコンプリート機能を備えているので、コードの記述が簡単になるとともに入力ミスを減らすこともできます。 メディアとインタラクティビティを追加する Goog
Google Web Designer - Home
魅力的な動画、画像、HTML5 ベースのデザインを作成してあらゆるデバイスに配信し、ビジネスをアシスト ビジネスでの使用のみが想定されています ビジネスのアイデアを形にするための機能 Google Web Designer は、人を惹きつける美しい動画、画像、HTML5 広告を簡単に作成できるツールです。アニメーションやインタラクティブな要素を使って、クリエイティブな発想を形にすることができます。表示するスペースやオーディエンスに合わせてコンテンツの規模を調整できるように、レスポンシブ ワークフローや動的ワークフローを備えています。 モードを選ぶ アニメーションの作成には、シンプルなシーンをつなげて作るクイックモードと、タイムライン上でレイヤを使用して作る詳細モードがあります。モーションパスやカスタム イージングを使って、アニメーションを思いのままにコントロールできます。 3D 3D コン
animachine - Google Chrome上でGreenSockを使ったHTML5アニメーションを作成
GoogleがFlashバナーを自動的にHTML5に変換する広告配信技術を発表しました。これにより既存資産を活用したままモダンなWeb環境においても広告配信が可能になります。つまりHTML5でもFlash並のアニメーション表現が可能になっているのです。 そこでさらに高度なアニメーションを実現したい時に使えるのがGreenSockです。そしてGreenSockをベースにアニメーションを作成できるエディタがanimachineになります。 animachineの使い方 animachineはGoogle Chrome機能拡張で、実行するとGreenSockで作られたコンテンツ上にエディタ機能を表示してくれます。アニメーションは繰り返し実行され、任意のポイントで停止させて編集ができます。HTML5アニメーションの作成が捗ることでしょう。 animachineはHTML5/JavaScript製、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
js-sequence-diagrams