技術 - アニメーションの記事一覧
Snap.svg – アニメーションもサポートしたJavaScript連携可能なSVGライブラリ
HTML5の時代になってSVGにも注目が集まっていますが、個人的に思うのはAdobeはその何年も前からSVGに取り組んでいたなということです。IEで使えるSVGプラグインビューワーも早い段階から出していましたし、IllustratorもSVG書き出しを相当前のバージョンからサポートしています。そんな中、Adobeがさら...
IFTTTで使っているiOS用キーフレームアニメーションライブラリ「Jazz Hands」
Jazz HandsはiOS用、MIT Licenseのオープンソース・ソフトウェアです。iOSアプリの中でシンプルなアニメーションを実現したいと思ったらチェックして欲しいのがJazz Handsです。IFTTTで実際に使われているキーフレームベースのアニメーションライブラリです。最初の場面。スワイプ操作でアニメーショ...
Webでここまで！Google製のHTML5広告アニメーションツール「Google Web Designer」
Google Web DesignerはWindows/Mac OSX用のソフトウェアです。これまでアニメーションできるバナーと言えばFlashで作られてきました。しかし時代はHTML5/JavaScript/CSS3です。そこでGoogleが開発したのがGoogle Web Designerです。バナーを作ります。ダ...
フォーム入力のフォーカス移動をスムーズに「Focus transition」
Focus transitionはCSS3製のオープンソース・ソフトウェア（MIT License）です。ちょっとした工夫でユーザビリティは大きく向上します。今回はWebフォームにおいてTabキーを押した時にアニメーションを実現するFocus Transitionを紹介します。インストールしました。任意のWebフォーム...
CSS3だけで実現する多彩なアニメーション「magic」
magicはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。Webページは基本的に静的で、動くものは訪問者の目を引きます。アニメーションGIF、Flash、動画などがありますが今回はユーザの操作によるインタラクティブなアニメーションを実現するmagicを紹介し...
Flash風なテキストアニメーション「Nanimator」
NanimatorはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。Flashの出番がどんどん減っています。と同時に求められるのがこれまでFlashで行っていた操作をHTML5でできるようにする事です。今回は簡易アニメーションを実現するNanim...
Web Animationsを体験できるJavaScriptライブラリ「web-animations-js」
web-animations-jsはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。HTML5/CSS3になってWeb上でアニメーションを表現する方法は幾つか存在します。しかしいずれの方法にしても一長一短はあり、そんな中で現在W3Cで考えられているのがWeb Anima...
CSS3によるパノラマ3Dイフェクト「CSS3-panorama」
CSS3-panoramaはスタイルシート製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。CSS3ではスタイルシートだけでアニメーションが実現できる機能があります。それを使って作られたサンプルソフトウェアがCSS3-panoramaです。見ているだけで非常に面白いイフェクトになっ...
ダイナミックなアニメーションを実現する「Anima」
AnimaはJavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。CSS3になって、スタイルシートを駆使すれば華麗なアニメーションが実現できるようになってきました。しかしそこには限界もあります。そこでより本格的なアニメーションを作り上げたいと考える方はAnimaをベースにしてみる...
紙で作ったスリットを使ったアニメーション作成「animbar」
animbarはスリットを使った紙ベースのアニメーションを制作するソフトウェアです。紙でアニメーションと聞くとパラパラ漫画を思い浮かべますが、今回はスリットを使った面白いアニメーションを紹介します。そして、それを作成できるソフトウェアがanimbarです。メイン画面です。画像を追加します。全て同じ大きさでないといけませ...
胸熱。Webブラウザ上のMikuMikuDance「MMD.js」
MMD.jsはPMD/VMDを読み込んでWebGLを使って描画するソフトウェアです。先日mmd.jsを紹介しましたが、さらに完成度の高いMMDをWebGLを使ってレンダリングするのがMMD.jsです。踊っている1シーン。かなりスムーズです。見ている向きを変更できます。上からができる、ということは…。後ろ向きだってもちろ...
JavaScriptで実現するアニメーションライブラリ「Shifty」
ShiftyはJavaScriptでスタイルタグを書き換えてアニメーションを実現するライブラリです。Webベースでアニメーションをしようと思うとCSS3を使ったり、Canvasタグを使うのが一般的です。しかし今回は素のJavaScriptのみでアニメーションを実行するShiftyを紹介します。デモです。ボールが左右に行...
CanvasタグからアニメーションGIFを生成「jsgif」
jsgifはCanvasタグに描画した内容をアニメーションGIFに変換するソフトウェアです。簡易的なアニメとしてよく使われているのがアニメーションGIFです。まだまだ意外と人気で、動画をあえてアニメーションGIFに変換して楽しむようなサイトも数多く存在します。そんなアニメーションGIFを発展させてくれそうなのがjsgi...
2013/04/09
2013/04/09業務で使えるオープンソース（71）「Webアニメーション」
今回のテーマはWebアニメーションです。Webサイト内で使うと強い印象を残すことができます。最近では実現するための技術も複数出てきています。今回はそうした技術、関連ソフトウェアをまとめて紹介します。
SVGを使ってイラスト制作過程をアニメーション化「Lazy Line Painter」
Lazy Line PainterはSVGファイルを読み込んで、描く過程をアニメーションにしてくれるJavaScriptライブラリです。イラストや絵画はアナログな世界ではできあがった作品を見るのみですが、デジタルであればその作成過程を何度も繰り返し楽しめます。そんな面白さが感じられるのがLazy Line Painte...
面白い！動画を編集した上でアニメーションGIFに変換「rokuga」
rokugaは動画を読み込んでアニメーションGIFに変換するソフトウェアです。VineはアニメーションGIFのような動画を撮影、共有できるのが特徴ですが同じように動画からアニメーションGIFを作れるのがrokugaです。動画をドロップします。動画解析中。解析されました。フレーム単位で下に画像が表示されています。ランダム...
2D/3D双方をこなせるCanvasタグを使ったアニメーションライブラリ「taccgl」
taccglはHTML5/Canvasを使った2D/3Dアニメーションライブラリです。Web上でインタラクティブなアニメーションを実現したいならば参考にしてみて欲しいのがtaccglです。2Dおよび3Dに対応したアニメーションをHTML5のCanvasで実現します。例です。立方体が回転します。完全にばらばら。細く切れた...
CSS3で作られた音声付きアニメーション「The Good Man」
The Good Manはスーパーマンを題材にしたCSS3アニメーションです。2013年、スーパーマンの新作であるマン・オブ・スティールが公開されます。スーパーマン誕生を描いた本作を表現しているかのようなCSS3アニメーションとしてThe Good Manを紹介します。トップページです。字幕付きです。滑らかなアニメーシ...
一風変わったアニメーションを実現する「jQuery.kabuki」
jQuery.kabukiは日本の歌舞伎をモチーフにしたJavaScriptアニメーションライブラリです。一風変わったアニメーションを使ってみたいと思ったならばjQuery.kabukiを使ってみるのはいかがでしょう。日本流の伝統的芸能、歌舞伎にヒントを得たアニメーションライブラリです。その動作は実際に見てもらうという...
スマートフォン/PCに対応したHTML5アニメーションライブラリ「Collie」
CollieはDOM/Canvasを使ったPC/スマートフォン双方に対応したアニメーションライブラリです。HTML5の登場以後、にぎわっているのがアニメーションです。様々なライブラリが登場していますが、今回はCollieを紹介します。アニメーションおよびゲームの開発に利用できます。デモです。犬をドラッグできます。折り紙...