ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - アニメーションの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

32409?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fscreenshot2011-11-25-10.58.46_thumb

  • 2011/12/03

CSS3を使った高度なアニメーションライブラリ「Animate.css」

Animate.cssはCSS3を使ったアニメーションライブラリです。様々なイフェクトが用意されています。Animate.cssはCSS3を使ってアニメーションを実現するライブラリです。何はともあれ、デモ動画を見て何が実現できるのか知ってください。トップページです。ここの各ボタンを押すとアニメーションが実行されます。デ...

32252?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fscreenshot2011-11-21-17.09.22_thumb

  • 2011/11/29

Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ「CAKE(Canvas Animation Kit Experiment)」

CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE(Canvas Animation Kit Experiment)はCanvasタグを使ってアニメーションを実現しま...

31547?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fd0c6fc321306d65fa7166cebbde4bc00

  • 2011/11/13

要注目!CSSとJavaScriptで作るアニメーション「Animatable」

AnimatableはJavaScriptでCSSのプロパティを変化させることでアニメーションさせるJavaScriptライブラリです。最近、CSSだけで作るアニメーションというのが流行っています。CSS3であればtransitionという要素でアニメーションが起こせますが、さらにJavaScriptを使って多彩なアニ...

29820?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-20-17.49.54_thumb

  • 2011/10/02

注目!Flash CS風のUIでHTML5のタイムラインアニメーション作成「Radi」

RadiはHTML5対応のタイムラインベースのアニメーション作成ソフトウェア。RadiはMac OSX用のフリーウェア(β版中につき無料)。Webブラウザ上でインタラクティブでタイムラインベースのアニメーションを作ろうと思ったらFlashを使うのが一般的だ。しかしそれはHTML4までだ。HTML5になればCanvasタ...

27544?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f06%2fscreenshot2011-06-13-10.13.41_thumb

  • 2011/06/24

ついにここまで。Web上でアニメーションを作成する「AJAX Animator」

AJAX AnimatorはWebブラウザ上でフレーム単位のアニメーションを作成するWebアプリケーション。AJAX AnimatorはPHP製のオープンソース・ソフトウェア。Webアプリケーションの領域が広がっている。Webアプリケーションが数多くなると、よりWebの利用率が上がり、さらにWeb化を促していく。これま...

25828?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2fscreenshot2011-03-02-16.01.07_thumb

  • 2011/03/14

JavaScriptでタイムラインベースのアニメーションを実現する「mashi」

mashiはJavaScriptベースのタイムライン指定のアニメーションを実現するツールキット。mashiはJavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを実現しようと思うと、技術的に候補にあがるのがアニメーションGIF、Flashそして動画だろう。どれもあまり動的に作り出すもの...

24005?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2010%2f12%2fscreen-shot-474

  • 2010/12/17

Spriteを使ったJavaScript製のアニメーションライブラリ「Sprite.js」

Sprite.jsはJavaScript製のオープンソース・ソフトウェア。JavaScriptを使ってゲームを作る場合、キャラクターの描画には二種類の方法が考えられるだろう。一つは画像を使う方法、もう一つはドット単位やCanvasを使って直接描画する方法だ。32体の人形が歩き回るデモ 後者はあまりに面倒だ。だから大抵画...

List

  • 2010/03/17

iPhoneでも使える。JavaScriptを使った簡易アニメーション「Spritely」

SpritelyはJavaScript製/jQueryプラグインのオープンソース・ソフトウェア。iPhone + Webの最大の問題点と挙げられるのがFlashを使えないために効果的なアニメーションが利用できないということだ。GIFアニメーションを使う手もあるが、クリックやインタラクティブな動作ができないのはいただけな...

List

  • 2010/02/23

今日のアニメ情報をAndroidでチェックする「KyoAni」

KyoAniはAndroid向けのフリーウェア(ソースコードは公開されている)。日本ではアニメがとても数多く放送されている。新しく放映しているものはもちろん、過去の再放送や特別編などとても全てを追いかけるのは無理なくらい放送が多い。アニメワン連動アプリ だがそんなアニメを追いかける日々もアニメワンというサイトを使えばチ...

List

  • 2009/11/16

CSSとJavaScriptを組み合わせたアニメーションライブラリ「emile」

emileはCSS/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを行う際、まず思いつくのはFlashを使った手法だろう。だがそこまで複雑なアニメーションでもなく、そもそもFlashを扱うのが苦手な場合はどうしたら良いだろう。そこで使えそうなのがJavaScriptだ。 ...

List

  • 2008/12/14

リアルタイムアニメーションエディター「Animata」

モーションキャプチャという技術はご存知だろう。よく光学式が採用されるが、人の体にマーカーをつけてそのマーカーの動きをコンピュータに読ませるものだ。アニメーションやスポーツ、医療分野などで利用されることがある技術だ。ちょっとキャラクターに愛らしさが足りない?でも技術はすごい! そんな人の動きをキャラクターに真似させたアニ...

List

  • 2008/09/06

Blenderを使った3Dアニメ第二弾Plumiferosで使われているBlender強化版「PlumiBlender」

3Dアニメーションと言えばピクサーが最も有名だろう。最近ではディズニーアニメもそうした雰囲気になってきているが、若干異なる部分はある。ピクサーの映画は膨大な時間と人的リソース、多数のハードウェアが組み合わさった素晴らしいものだ。Blenderを強化しているそこまでたどり着くのは難しいかも知れないが、十分に高品質で良くで...

List

  • 2008/03/23

プログラミングするアニメーションツール「NodeBox」

2Dのアニメーションや、グラフィックスを描こうと思うと、プログラマの方は尻込みしてしまうだろう。デザインの世界はプログラミングとは全く異なるセンスが要求される世界だ。だからデザインが苦手な人も多い。だが、そのデザインをプログラミングするとしたらどうだろう。何となくできそうな感じはしないだろうか。今回紹介するオープンソー...

List

  • 2007/12/08

iPod Touch対応のJavaScriptアニメーションエンジン「iAnime.js」

iPod Touchは音楽を聴くだけでなく、無線LANを使ってブラウジングできるのが魅力だ。外で暇つぶしにゲームをすることもできる。SafariベースなのでJavaScriptへの対応もまず問題ない。そこでWebベースで遊べるゲームを紹介しよう。今回紹介するオープンソース・ソフトウェアはiAnime.js、JavaSc...

List

  • 2007/11/01

アニメーション作成もWeb化の時代へ「Ajax Animator」

時代はWebアプリケーションを求めている。これまでローカルアプリケーションでやるのが当たり前だったものを次々にWeb化している。画像編集やカレンダー等、様々なWebアプリケーションが登場しているが、ついに出てきたのがアニメーションの作成だ。今回紹介するオープンソース・ソフトウェアはAjax Animator、Webベー...