技術 - アニメーションの記事一覧
Wick - Webベースのアニメーション作成エンジン
かつてWeb向けにアニメーションを作るソフトウェアと言えばFlash CSが数多く使われてきました。現在ではAnimate CCを使っている人が多いのではないでしょうか。中にはAdobe製品は価格が高いので躊躇してしまっている方もいるかも知れません。そんな方に一度触ってみて欲しいのがWickです。ごく簡単な機能しかあり...
LayaAir - 一つの言語からFlash/HTML5/モバイル向けにコード出力できるアニメーションエンジン
HTML5によって（またはiOSによって）Flashは絶滅に瀕しています。問題はFlashがなくなった後の世界でいかに効果的なアニメーションやインタラクティブな操作を実現できるかです。HTML5でできますが、非常に面倒でしょう。そこで使ってみたいのがLayaAirです。ゲームやアニメーションで使えるレンダリングを行って...
Shape Shifter - 異なるSVGに変化するアニメーションを生成
SVGとこれまでの画像バイナリと決定的に違う部分はなんと言ってもプログラムから操作しやすいということでしょう。アニメーションの定義などはSVG内でもできますが、より詳細なアニメーションはJavaScriptで制御できます。そんなSVGを使って形状変化するアニメーションを定義できるのがShape Shifterです。##...
mo · js - Web上でモーションアニメーションを実現
Webの表現力は上がったと言われていますが、そのためのテクニックは必要です。SVGやCanvasを使いこなすのは相当難しく、専用のライブラリを使う方が手軽にアニメーションなどが実現できます。今回紹介するmo · jsもその一つで、モーションアニメーションが実装できるライブラリです。## mo · jsの使い方実装例です...
Radiobox.css - ラジオボタンに選択時のアニメーションを追加
フォームで選択した際に何のフィードバックもないと不安になってしまいます。文字を入力していれば分かりやすいのですが、マウスでクリックした時に適切なフィードバックは必要でしょう。今回はラジオボタンにおける選択時のアニメーションを提供するRadiobox.cssを紹介します。## Radiobox.cssの使い方前半の6つで...
Textillate.js - CSS3を使って華麗なテキストアニメーションを実現
CSS3になって表現力が広がっています。これまでFlashやJavaScriptを駆使しないとできなかったことが、スタイルシートだけで実現できるようになっています。スタイルシートを使えばGPUを使うのでより滑らかに表現できます。今回はTextillate.js、CSS3を使ってテキストアニメーションソフトウェアを紹介し...
Proton - 高度な表現も実現できるHTML5のパーティクルライブラリ
Webの表現力はHTML5によって高まっていますが、そう簡単に高度な表現ができるわけではありません。目を引くようなアニメーション、グラフィックスを実現させようと思ったら相当量のコードを書かなければならないでしょう。今回はそんな作業を軽減してくれるパーティクルライブラリProtonを紹介します。## Protonの使い方...
g9 - インタラクティブなWebグラフィックスを実現
HTML5によってWeb上での表現力が高くなり、これまでFlashなどを使わないとできなかったようなアニメーション表現がWeb標準だけで実現できるようになっています。とは言え、ただアニメーションするだけでは面白くありません。面白いのはよりインタラクティブな、マウスやキーボードを使って自分で操作できるものでしょう。今回は...
Kissui.scrollanim - CSS3/JavaScriptによるスクロールアニメーション
SPA（シングルページアプリケーション）で効果的なのがスクロールに伴うアニメーションです。ページ全体が長くなりがちなので、アニメーションを盛り込むことで変化をつけられるようになります。今回紹介するKissui.scrollanimはCSS3ベースのアニメーションライブラリになります。高速でスムーズなアニメーションが実現...
css-keyframer.js - CSS3のスタイル設定を使ったキーフレームアニメーション
アニメーションは一コマ一コマ指定しながら作成することもできますが、作成に時間がかかります。それに対してキーフレームを指定して、そこへの変化（または移動）を指定する方式はコンピュータ側でアニメーションを補完してくれる分、効率的にアニメーションが作成できます。今回紹介するcss-keyframer.jsはそんなキーフレーム...
Star Wars Intro - スターウォーズのイントロをスタイルシートだけで再現
みんな大好きなスターウォーズ。そしてスターウォーズと言えば、映画開始直後のオープニングの演出は誰もが知っているところだと思います。あの瞬間からスターウォーズの世界に引き込まれていくことでしょう。そんなスターウォーズのイントロをCSSだけで再現したのがStar Wars Introです。ぜひご覧ください！## Star ...
GPU.js - GPUを使ったアニメーションライブラリ
Webブラウザ上で3Dをぐりぐりと動かすようなアニメーションを作る場合、WebGLを使うのは基本として、処理においてもGPUを使う方が効率的になります。とはいえ、GPUを使ってどう処理を行えば良いのか分からないことでしょうそこで使ってみたいのがGPU対応のライブラリです。今回はアニメーションライブラリとしてGPU.js...
Yarrow - アニメーションする矢印をSVGで作成
SVGコンテンツの面白いところとして、Flashのようなアニメーションもサポートしていると言うことです。コンテンツを徐々に描いていくようにすれば良いだけなのですが、手作業で実現するのは無理があるでしょう。そこで使ってみたいのがYarrowです。HTMLのプレゼンなどと組み合わせると効果的かも知れません。## Yarro...
lup - JavaScriptで手軽にCSS3アニメーションを実現
CSS3でアニメーションが追加されたとは言え、効果的に実装するのは色々面倒です。そのため、分かってはいつつもなかなか手出しできないという人は多いのでは内でしょうか。そんな方に使ってみて欲しいのがlupです。jQuery風に簡単な指定を使ってアニメーションできるJavaScriptライブラリです。## lupの使い方一例...
Advance - iOS/Mac OSX/tvOS用のアニメーションライブラリ
アニメーションというのは一般的な開発の中でも特に専門的な技術が必要なものになります。より自然な動きを表すためにはちょっとした遅延であったり、ぶれが効果的であったりして、それを実装するのはとても大変です。そこでアニメーションライブラリを積極的に使っていきましょう。今回はiOS/Mac OSXで使えるAdvanceを紹介し...
asciimatics - アスキーアートでアニメーション
最近CUI関連のツールに注目が集まっています。グラフィックスを駆使してまるでGUIアプリケーションのようなUIを再現したり、画像を表示するなどGUIを使わずとも多くの機能が実現できるようになっています。今回はそんなCUIでの高度なテクニックの一つを紹介します。asciimaticsはCUIでアニメーションを実現します。...
pageSwitch - 多彩なアニメーションが指定できるページ切り替え
SPA（Single Page Application）ではページの切り替わり時にアニメーションしながら表示することが多いです。それによって一連の動作に流れが生まれ、継続的に使い続けられます。ページを切り替える際のアニメーションは多数ありますが、pageSwitchを使えば多彩なアニメーションから選んで実装できます。#...
Motion UI - CSS3/Sassで実装されたアニメーションライブラリ
Web上でアニメーションを実現する方法は幾つかあります。JavaScript、SVG、CSS3アニメーション、Canvasなどと選択肢があり、どれがベストなのか考えてしまうかも知れません。GPUを使いつつ、手軽に使い始められそうなものとしてCSS3があります。今回紹介するMotion UIはCSS3のアニメーション機能...
Popmotion - ごく小さなアニメーションライブラリ
Web上での多彩な表現を支える存在がアニメーションです。マテリアルデザインのようなちょっとしたアニメーションもありますし、目を引くためにも動かしながら表示するのは大事な効果と言えるでしょう。今回はそんなアニメーションを実現するライブラリ、Popmotionを紹介します。わずか12KB（ミニファイ、圧縮後）のJavaSc...
Spriter - SCMLを使ったJavaScriptアニメーションライブラリ
アクションゲームの要とも言えるのがキャラクターの動きです。3Dゲームとなると60fpsで動くようなレベルで求められるでしょうが、2Dにおいてもそこまでいかなくとも多彩な動きが求められるはずです。今回はそんな2Dキャラクターのアニメーションをサポートするライブラリ、Spriterを紹介します。JavaScript製なので...