クリエイター界激震 簡単にキーフレームアニメを作れるソフトに「無料で公開していいクオリティじゃない」の声
簡単にキーフレームアニメーションを作れるフリーウェア、「AnimeEffects」が「無料で公開していいクオリティーじゃない」と話題になっています。ニコニコ動画に使い方の紹介動画が公開されているのですが、非常に大きな可能性を感じさせてくれます。 同ソフトは、1枚の絵をアニメーションさせるためのソフト。pngやjpgなどの画像ファイルも使えますが、psd（Photoshop用の画像ファイル）を読み込ませるとレイヤーなども読み込んでくれるため、より多彩な動きを実現できます。 動画では、走るポーズをとったサーバルちゃん（テレビアニメ「けものフレンズ」の主人公の1人）のpsdファイルから走るアニメーションを作製しています。手足を別パーツとして動かすことで、自然な走る動きが作成できるもよう。 psdファイルを読み込んで いろいろと作業をすると 走るアニメーションが完成 どのパーツを上に表示するかを決
SpinKit - 凄いテクニック。CSS3を使った各種スピナー MOONGIFT
CSS3だけで作れちゃうのが凄いですね！ 処理中にユーザがストレスを感じないように表示されるスピナー。最も簡単なのはアニメーションGIFを表示することかなと思いますが、背景色を微妙に違ったり、大きさを適切に考えないといけないなど画像だけに扱いがちょっと面倒に感じることがあります。 そこで使ってみたいのがSpinKitです。なんとCSS3のアニメーションを使ってスピナーを実現しています。 一例。四角いパネルが回転します。 円が次々に大きさを変えていくパターン。 棒の長さが変わっていくパターン。 スクリーンショットでは分かりづらいので動画を撮影しました。 例えば棒の長さが変わるウェーブの場合、次のようなスタイルシート設定になります。 .spinner { margin: 100px auto; width: 50px; height: 30px; text-align: center; fon
さりげないアニメーションがいい感じ、HTML/CSSでシンプルに実装するタブコンテンツ
コマ数を落としているから、アニメがうまく見えてないかも タブコンテンツはシンプルながら、さりげないアニメーションが仕込まれておりいい感じです。上記はgifアニメーションで、実際のデモは下記ページで確認できます。 Pure CSS Tabs タブ切替のトリックは、ラジオボタンです。タブとして表示されているラベルをクリックするとラジオボタンがチェック状態になり、コンテンツが表示されます。 HTML タブとコンテンツは1セットでリスト要素で実装します。 <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1">タブ 1</label> <div id="tab-content1" class="tab-content"> <p>コンテンツ 1</p> </div> <
「HTML5で冷気を表現したサイトがすごいな」を分解してみた！ / SQUEEZE - Web Design Studio -
「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。 スムーズなループアニメーション (1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
動画をアニメーションGIFに変換するウェブアプリケーション作った - hitode909の日記
rokugaっていうウェブアプリケーションを作った．ブラウザ上で動画をアニメーションGIFに変換できる．Google Chromeでもちょっと動くけどSafariで見るのが良い． http://rokuga.herokuapp.com/ 使い方 こんな感じで，動画をドロップしてくださいとか言ってる． 1コマずつ出てきて，このコマとこのコマ，この速さ，みたいな指定ができる． 完成したアニメーションGIFは名前を付けて保存しましょう． 特徴 ブラウザで再生できる動画なら何でも変換できる Macなら動画はQuickTime Playerで撮れるので気軽に使える リアルタイムにプレビューしながら仕上がりを確認できる コマ送りは逆再生，行ったり来たり，シャッフルに対応 Herokuで動かしたらCPUが遅くて動画の変換にす時間かかる git cloneしてローカルで動かすとちょっと速い ソースコード→
CSSアニメーションの初歩をおさらい
最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま
CSS3アニメーションをWebブラウザ上で作成&実行·Stylie MOONGIFT
StylieはCSS3のキーフレームベースのアニメーションをグラフィカルに設定できるソフトウェアです。 CSSでアニメーションを実行できるのは知られていますが、その実装となるとかなり面倒な雰囲気があります。しかしStylieを使えばグラフィカルに簡単に設定が可能です。 デフォルトの表示です。左から右へボールが流れていきます。 単純に流れる以外の動きも指定できます。 こんな感じで曲線にすることも。始点と終点はドラッグで移動できます。 対応ブラウザを選択することでCSSの内容が変化します。 StylieはRekapiというアニメーションライブラリをベースにしています。そのための設定をグラフィカルに指定できるツールと言えそうです。ボールの画像も自由に指定できるので、色々試してみてください。 StylieはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されて
グリー株式会社 | ニュースリリース | プレスリリース 2012年 | グリー、UnityおよびHTML5に対応したスマートフォンアプリの開発支援ソリューション「LWF」をオープンソースソフトウェアとして
グリー、UnityおよびHTML5に対応したスマートフォンアプリの開発支援ソリューション「LWF」をオープンソースソフトウェアとして公開 グリー株式会社（本社：東京都港区、代表取締役社長：田中良和、以下「グリー」）は、UnityおよびHTML5に対応したスマートフォンアプリの開発支援ソリューション「Lightweight SWF」（以下「LWF」、読み：エル ダブリュー エフ）を、2012年10月18日、オープンソースソフトウェアとして公開しました。 「LWF」は、独自ファイルフォーマットに基づくアニメーションエンジンで、Flashコンテンツから変換したアニメーションデータを、UnityとHTML5で再生できます。グリーは、2012年北米やヨーロッパなどの地域でリリースしたモバイルソーシャルゲーム「Alien Family」や「Animal Days」（※）の開発において「LWF」を採用し
Happy Elements Labs: ソーシャルゲームのアニメーションと CreateJS
エンジニアの草苅です。 突然ですが、ソーシャルゲームのアニメーションはどのようなライブラリやツールを使って実現されているかご存じでしょうか？ 今回はそのあたりを簡単にご紹介しようと思います。 ソーシャルゲームのアニメーションは大きく分けて、フィーチャフォン向けとスマートフォン向けの二つがあります。 フィーチャーフォン向けアニメーション ほとんどの場合、Flash Lite で制作されており、ほとんどの場合 ActionScript 1.1で作られています。 これは ActionScript 1.1 にすることでほとんど100%に近いくらいの携帯電話で動作させることができるからです。 ただ、Flash Lite はかなり制限事項（100kb制限など）が多いことから、バイナリ置換などでテキストや画像を差し替えたり、バイナリ文字列をつなぎ合わせて swf を
緩急をともなったイージングのアニメーションをCSSやJSで実装する時のスニペットのまとめ -Easing Functions
にょい～ん、ぐい～んなどの緩急をともなったアニメーションを実装するCSSやJavaScriptのスニペットをまとめたEasing Functionsを紹介します。 Easing Functions Cheat Sheet Easing Functions -GitHub イージングのアニメーションの動きを確認 イージングのアニメーションの種類 イージングのアニメーションの実装 イージングのアニメーションの動きを確認 イージングとは動きに加速や減速を加え等速で動くのとは違ったエフェクトを与えるもので、最初ゆっくりでだんだん早くしたり、床にバウンドするような動きを与えます。 登録されているイージングのアニメーションの動きは、それぞれのグラフをホバーするとレッドのアローがその動きをします。
iView Slider
画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ
JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT
tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000本のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。本当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。
[JS]とっても簡単な記述でアニメーションが実装できる単体のスクリプト -Move.js
Move#ease イージングは29種類用意されており、同時にアニメーションさせることもできます。 JavaScript move('#example-10 .box1').x(400).end(); move('#example-10 .box2').ease('in').x(400).end(); move('#example-10 .box3').ease('out').x(400).end(); move('#example-10 .box4').ease('in-out').x(400).end(); move('#example-10 .box5').ease('snap').x(400).end(); move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end(); setTimeout(functio
[JS]FlashもHTML5も無しで、美しいアニメーションを実装するスクリプト -jCSML
FlashもHTML5もSilverLight, SVGも使わずに、IE7+, iPhone, iPad, Androidで動作するアニメーションを作成できるjQueryのプラグインを紹介します。 jCS Media Library [ad#ad-2] jCSMLの対応ブラウザ jCSMLのデモ jCSMLのダウンロード jCSMLの対応ブラウザ jCSMLの対応環境は下記の通りです。 HTML5非対応のIE7でも、Flash非対応のiPhoneでも動作します。 IE7+ Firefox3.6+ Chrome Safari iPhone iPad Android jCSMLのデモ jCSMLの多彩で美しいデモをいくつか紹介します。 各デモはチュートリアルも兼ねており、コードも一緒に掲載されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Spirit - The animation tool for the web
HTML5のアニメーションを簡単に作成できるサイト「HTML5 MAKER」 | ライフハッカー・ジャパン
HTMLで作るクリスマスカードのコード例を紹介する・Codecademy Code Cards
Engadget | Technology News & Reviews
デザインも豊富、カスタマイズも可、ローディング用のGIFアニメーションをさくっと作成できる -Loader Generator