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

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

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

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

もっと見る

List

  • 2013/05/17

紙で作ったスリットを使ったアニメーション作成「animbar」

animbarはスリットを使った紙ベースのアニメーションを制作するソフトウェアです。紙でアニメーションと聞くとパラパラ漫画を思い浮かべますが、今回はスリットを使った面白いアニメーションを紹介します。そして、それを作成できるソフトウェアがanimbarです。メイン画面です。画像を追加します。全て同じ大きさでないといけませ...

List

  • 2013/04/25

胸熱。Webブラウザ上のMikuMikuDance「MMD.js」

MMD.jsはPMD/VMDを読み込んでWebGLを使って描画するソフトウェアです。先日mmd.jsを紹介しましたが、さらに完成度の高いMMDをWebGLを使ってレンダリングするのがMMD.jsです。踊っている1シーン。かなりスムーズです。見ている向きを変更できます。上からができる、ということは…。後ろ向きだってもちろ...

List

  • 2013/04/20

JavaScriptで実現するアニメーションライブラリ「Shifty」

ShiftyはJavaScriptでスタイルタグを書き換えてアニメーションを実現するライブラリです。Webベースでアニメーションをしようと思うとCSS3を使ったり、Canvasタグを使うのが一般的です。しかし今回は素のJavaScriptのみでアニメーションを実行するShiftyを紹介します。デモです。ボールが左右に行...

List

  • 2013/04/12

CanvasタグからアニメーションGIFを生成「jsgif」

jsgifはCanvasタグに描画した内容をアニメーションGIFに変換するソフトウェアです。簡易的なアニメとしてよく使われているのがアニメーションGIFです。まだまだ意外と人気で、動画をあえてアニメーションGIFに変換して楽しむようなサイトも数多く存在します。そんなアニメーションGIFを発展させてくれそうなのがjsgi...

List

  • Premium_s 2013/04/09

業務で使えるオープンソース(71)「Webアニメーション」

今回のテーマはWebアニメーションです。Webサイト内で使うと強い印象を残すことができます。最近では実現するための技術も複数出てきています。今回はそうした技術、関連ソフトウェアをまとめて紹介します。

List

  • 2013/02/28

SVGを使ってイラスト制作過程をアニメーション化「Lazy Line Painter」

Lazy Line PainterはSVGファイルを読み込んで、描く過程をアニメーションにしてくれるJavaScriptライブラリです。イラストや絵画はアナログな世界ではできあがった作品を見るのみですが、デジタルであればその作成過程を何度も繰り返し楽しめます。そんな面白さが感じられるのがLazy Line Painte...

List

  • 2013/02/12

面白い!動画を編集した上でアニメーションGIFに変換「rokuga」

rokugaは動画を読み込んでアニメーションGIFに変換するソフトウェアです。VineはアニメーションGIFのような動画を撮影、共有できるのが特徴ですが同じように動画からアニメーションGIFを作れるのがrokugaです。動画をドロップします。動画解析中。解析されました。フレーム単位で下に画像が表示されています。ランダム...

List

  • 2013/02/09

2D/3D双方をこなせるCanvasタグを使ったアニメーションライブラリ「taccgl」

taccglはHTML5/Canvasを使った2D/3Dアニメーションライブラリです。Web上でインタラクティブなアニメーションを実現したいならば参考にしてみて欲しいのがtaccglです。2Dおよび3Dに対応したアニメーションをHTML5のCanvasで実現します。例です。立方体が回転します。完全にばらばら。細く切れた...

List

  • 2013/01/23

CSS3で作られた音声付きアニメーション「The Good Man」

The Good Manはスーパーマンを題材にしたCSS3アニメーションです。2013年、スーパーマンの新作であるマン・オブ・スティールが公開されます。スーパーマン誕生を描いた本作を表現しているかのようなCSS3アニメーションとしてThe Good Manを紹介します。トップページです。字幕付きです。滑らかなアニメーシ...

List

  • 2013/01/14

一風変わったアニメーションを実現する「jQuery.kabuki」

jQuery.kabukiは日本の歌舞伎をモチーフにしたJavaScriptアニメーションライブラリです。一風変わったアニメーションを使ってみたいと思ったならばjQuery.kabukiを使ってみるのはいかがでしょう。日本流の伝統的芸能、歌舞伎にヒントを得たアニメーションライブラリです。その動作は実際に見てもらうという...

List

  • 2012/12/26

スマートフォン/PCに対応したHTML5アニメーションライブラリ「Collie」

CollieはDOM/Canvasを使ったPC/スマートフォン双方に対応したアニメーションライブラリです。HTML5の登場以後、にぎわっているのがアニメーションです。様々なライブラリが登場していますが、今回はCollieを紹介します。アニメーションおよびゲームの開発に利用できます。デモです。犬をドラッグできます。折り紙...

List

  • 2012/12/10

CSS3アニメーションをWebブラウザ上で作成&実行「Stylie」

StylieはCSS3のキーフレームベースのアニメーションをグラフィカルに設定できるソフトウェアです。CSSでアニメーションを実行できるのは知られていますが、その実装となるとかなり面倒な雰囲気があります。しかしStylieを使えばグラフィカルに簡単に設定が可能です。デフォルトの表示です。左から右へボールが流れていきます...

List

  • 2012/10/29

JavaScriptとCSS Spriteを組み合わせてアニメーション「MovieCrop.js」

MovieCrop.jsはCSS Spriteを使ったアニメーションライブラリです。Sprite画像を使うとマウスオーバーと連携させてボタンの押し下げによる配色変更を行ったりできます。それと似たような仕組みを使ってアニメーションを実現してしまうのがMovieCrop.jsです。例。単純にくるくる回転し続けます。再生、停...

43371?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f10%2fscreenshot-2012-10-02-12.10.11_thumb

  • 2012/10/12

PNGを結合させてアニメーションを実現「Animation Encoder」

Animation EncoderはPNG画像を結合させてアニメーションPNGを実現させてしまうソフトウェアです。何らかの説明動画を表示するのにあたってIE6からiPadまで表示でき、かつ減色したりしないで表示するにはどうしたら良いだろうか。Animation Encoderが選んだのはPNGを結合して表示するという無...

List

  • 2012/09/23

品質高いJavaScriptアニメーションライブラリ「BonsaiJS」

BonsaiJSはFlashアニメーション並みの動作が可能なJavaScriptライブラリです。JavaScriptによるアニメーションライブラリが増えています。BonsaiJSもその一つです。多彩なアニメーション処理が可能になっていますのでぜひご覧ください。トップページです。ここもアニメーションされています。マウスを...

42698?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f09%2fscreenshot-2012-09-10-10.55.40_thumb

  • 2012/09/19

JavaScriptでインパクトあるアニメーションを実現「jsAnim」

jsAnimはJavaScript製のアニメーションライブラリです。Webページ上にインパクトあるアニメーションを実現しようと思ったら、これまではFlashを使うのが一般的でした。しかし今後はJavaScriptで十分かも知れません。そんな未来を感じさせるのがjsAnimです。サンプルです。キャラクターが左右に動きます...

40888?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f07%2f3dsearch3_thumb3

  • 2012/07/26

作ろう。SWF出力にも対応したアニメーション作成ソフトウェア「K-Sketch」

K-Sketchはアニメーションを作成するソフトウェアです。Windowsで動作します。アニメーションを作るというのはとても大変な作業です。一コマ一コマ描いて、それを連続で流していきます。手軽にアニメーションを作れるソフトウェアとしてFlashがありますが、今回紹介するK-Sketchもシンプルながらアニメーションが作...

40855?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f07%2fscreenshot-2012-07-18-10.32.10_thumb

  • 2012/07/25

JavaScript製の高度なアニメーションライブラリ「tween.js」

tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。...

List

  • 2012/07/17

Mozilla製。みんなで作るイラストアニメーション「Parapara Animation」

Parapara Animationはタブレットなどで描いたイラストをアニメーションを作成するMozilla製のソフトウェアです。Mozillaが作り出すソフトウェアはオープンなWebを実感させるものが多数あります。今回はParapara Animationを紹介します。ベースになる大きなキャンバスの上にみんなが作った...

List

  • 2012/05/19

JavaScript/CSSを使ってスクロールによるアニメーションを実現「skrollr」

skrollrはCSSを使ってスクロールによってアニメーションを実行するライブラリです。最近プロジェクトやアプリ紹介ページで見られるようになったスクロールアニメーション。それを実現するライブラリがskrollrです。デモです。スクロールを開始します!回転しながら飛んでくる文字!下から上がってくる文字!横からスライドも。...