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

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

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

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

もっと見る

List

  • 2016/04/29

lup - JavaScriptで手軽にCSS3アニメーションを実現

CSS3でアニメーションが追加されたとは言え、効果的に実装するのは色々面倒です。そのため、分かってはいつつもなかなか手出しできないという人は多いのでは内でしょうか。そんな方に使ってみて欲しいのがlupです。jQuery風に簡単な指定を使ってアニメーションできるJavaScriptライブラリです。## lupの使い方一例...

List

  • 2016/04/15

Advance - iOS/Mac OSX/tvOS用のアニメーションライブラリ

アニメーションというのは一般的な開発の中でも特に専門的な技術が必要なものになります。より自然な動きを表すためにはちょっとした遅延であったり、ぶれが効果的であったりして、それを実装するのはとても大変です。そこでアニメーションライブラリを積極的に使っていきましょう。今回はiOS/Mac OSXで使えるAdvanceを紹介し...

List

  • 2016/03/20

asciimatics - アスキーアートでアニメーション

最近CUI関連のツールに注目が集まっています。グラフィックスを駆使してまるでGUIアプリケーションのようなUIを再現したり、画像を表示するなどGUIを使わずとも多くの機能が実現できるようになっています。今回はそんなCUIでの高度なテクニックの一つを紹介します。asciimaticsはCUIでアニメーションを実現します。...

List

  • 2016/02/29

pageSwitch - 多彩なアニメーションが指定できるページ切り替え

SPA(Single Page Application)ではページの切り替わり時にアニメーションしながら表示することが多いです。それによって一連の動作に流れが生まれ、継続的に使い続けられます。ページを切り替える際のアニメーションは多数ありますが、pageSwitchを使えば多彩なアニメーションから選んで実装できます。#...

List

  • 2015/11/01

Motion UI - CSS3/Sassで実装されたアニメーションライブラリ

Web上でアニメーションを実現する方法は幾つかあります。JavaScript、SVG、CSS3アニメーション、Canvasなどと選択肢があり、どれがベストなのか考えてしまうかも知れません。GPUを使いつつ、手軽に使い始められそうなものとしてCSS3があります。今回紹介するMotion UIはCSS3のアニメーション機能...

List

  • 2015/10/22

Popmotion - ごく小さなアニメーションライブラリ

Web上での多彩な表現を支える存在がアニメーションです。マテリアルデザインのようなちょっとしたアニメーションもありますし、目を引くためにも動かしながら表示するのは大事な効果と言えるでしょう。今回はそんなアニメーションを実現するライブラリ、Popmotionを紹介します。わずか12KB(ミニファイ、圧縮後)のJavaSc...

List

  • 2015/10/12

Spriter - SCMLを使ったJavaScriptアニメーションライブラリ

アクションゲームの要とも言えるのがキャラクターの動きです。3Dゲームとなると60fpsで動くようなレベルで求められるでしょうが、2Dにおいてもそこまでいかなくとも多彩な動きが求められるはずです。今回はそんな2Dキャラクターのアニメーションをサポートするライブラリ、Spriterを紹介します。JavaScript製なので...

List

  • 2015/07/05

Dynamics.js - 物理系アニメーションライブラリ

アニメーションは何の意味もなく動かしても面白くありません。一回転させたり、ひっくり返ったりと現実世界を投影するような動きは目を引きやすく、表現としても分かりやすいです。そこで使ってみたいのがDynamics.js

List

  • 2015/06/09

iconate.js – Web Fontをアニメーション

最近のWebサイトでは単色のアイコンを使うことが増えています。言葉で説明しない分、分かりやすいのですが、ユーザの目を引きたい時になかなか目立たせることができないという問題もあります。そこで使ってみたいのがiconate.js

List

  • 2015/05/30

Animate Plus - CSS/SVGを用いたアニメーションライブラリ

ユーザビリティを高めるためにちょっとしたアニメーションを組み込むアプリ、サイトが増えています。スプラッシュ的なものではなく、押した時に反応していることを確認したり、処理中である旨を通知するのに使えます。そんなアニメーションを手軽に扱えるライブラリがAnimate Plusです。CSSやSVGを使いつつ、JavaScri...

List

  • 2015/05/11

wheelnav.js - 目を引く回転型メニュー

WebのUIは基本的に静的で、アニメーションはそれだけ目を引きます。かといって今は簡単にアニメーションが実装できるようになっていますので、ほんの少し揺れた程度ではスルーされてしまうでしょう。そこでwheelnav.js

Missing

  • 2015/04/21

Cquence – 簡易的なアニメーションをお手軽に

Web上でアニメーションを流すのはFlashの時代から行われてきましたが、その作成はとても大変なイメージがあります。キャラクターをパーツごとにばらしたり、その動きを制御すると言った具合です。シーンごとのアニメーションを簡単に制御できれば良いという程度であれば大げさなツールは使わず、Cquence

List

  • 2015/04/08

Dom-Animator.js – 誰も気づかない…ソースコードの中でアニメーション

時々Webサイトのソースコードを見るとそこに求人情報であったり、開発時の文句であったり、何らかの秘密のメッセージが埋め込まれていたりします。デザインの綺麗さについソースコードを見てしまうなんて人もいるのではないでしょうか。そんな方達を期待してWebサイトに仕込んでおきたいのがDom-Animator.js

List

  • 2015/03/16

animachine - Google Chrome上でGreenSockを使ったHTML5アニメーションを作成

GoogleがFlashバナーを自動的にHTML5に変換する広告配信技術を発表しました。これにより既存資産を活用したままモダンなWeb環境においても広告配信が可能になります。つまりHTML5でもFlash並のアニメーション表現が可能になっているのです。そこでさらに高度なアニメーションを実現したい時に使えるのがGreen...

List

  • 2015/02/26

Digital Rain - マトリックス風表現をGoで

マトリックスと言えば黒い画面の中に半角文字が流れ落ちてくる表現が有名です。あれを見るとマトリックスを思い出すという方も多いのではないでしょうか。Digital Rainではまさにそんな表現を行っています。特徴的なのはGoを使っている点でしょう。## Digital Rainの使い方!こんな感じです。Canvasに描画し...

None

  • 2015/02/24

gifify - コマンド一つで動画をアニメーションGIF化

アニメーションGIFが人気です。動画とは違って再生ボタンを押したりする手間もなく、音がないのが安心なこともあります。短い間で何度も繰り返されるとじわじわくる動画にぴったりです。そんなアニメーションGIFを動画から作成してくれるのがgififyです。動画とはまた違う面白さを秘めたコンテンツを作ってみてください。## gi...

List

  • 2015/02/21

frame.js - FlashのようにWebGLアニメーションを編集

まだ開発途中ながらこれは期待大!WebGLはHTML5上で3Dグラフィックスを扱うために作られた技術です。その可能性は大いに感じられるところですが、扱うのが難しいためになかなか手出ししづらいものがあります。ごりごりコーディングするのは面倒で、やはり専用のエディタが欲しいと思うでしょう。そのためのエディタになるのがfra...

List

  • 2015/01/20

snabbt.js - DOM/テキストのシンプルなアニメーション

HTML5登場以降、JavaScriptやCSS3を使ったアニメーションが人気になっています。一言でアニメーションと言っても様々で、イラストを使ったものもあれば、単純にテキストやDOMを動かすと言った類のものもあります。今回紹介するsnabbt.jsは後者のシンプルなアニメーションライブラリになります。クリックやマウス...

List

  • 2014/12/13

RAMAnimatedTabBarController - iOSアプリのタブバーでさり気ないアニメーション

マテリアルデザインの肝になるのはリアルの物体を意識させる操作感です。押した時、フォーカスした時にそれぞれアニメーションを使いつつユーザに操作したという実感を提供するのが大事です。iOSアプリのタブバーではハイライト表示を切り替えて今どのタブにいるのかを明示しますが、RAMAnimatedTabBarController...

List

  • 2014/12/12

SVG Morpheus - SVGアイコンの切り替えをアニメーション化

SVGの良いところは画像と異なりバイナリではないので解析すれば様々な利用法が考えられる点にあります。単純にブラウザ任せに描画するだけでは勿体ないでしょう。ぜひその構造を読み取って、SVGならではの面白さを考えてみましょう。今回はその一つ、SVG Morpheusを紹介します。SVGアイコンから別なアイコンへのモーフィン...