SpineでGF(仮)のガールを動かしてみた（メイキング2/2:カードイラスト実践編） | CyberAgent Developers Blog
こんにちは！ガールフレンド（仮）（以下GF(仮)）でフロントエンドとアニメーションを担当している小倉です。 前回の記事では、イラスト素材をSpineで読み込み、ボーンを一通り配置し、少しウェイトを設定するところまでやりました！ 今回の記事では「カードイラスト実践編」として、リアル頭身のキャラを立体的に動かす方法や、目パチ、口パクなどを紹介していきます。 最後の方では、After Effectsによるカメラワークやライティングの話も軽くご紹介します。 成果物 下記の動画は、過去に「タッチして動く！SSRカード」としてLive2Dを使って制作した「[瞬き厳禁!]櫻井明音」の素材を使って、SpineとAfter Effectsを併用して制作したものです。 女の子の動きはSpineで「トランスフォームコンストレイント」という機能を多用して動かし、ついでに簡易的なバンプマップも作成し、After E
SpineでGF(仮)のガールを動かしてみた（メイキング1/2:Spine基礎編）
こんにちは！ガールフレンド（仮）（以下GF(仮)）でフロントエンドとアニメーションを担当している小倉です。 今回は、2DアニメーションツールのSpineを使って、リアル頭身のカードイラストを動かしてみたので、そちらの紹介とメイキングを「Spine基礎編」と「カードイラスト実践編」の2本立てで書いていきたいと思います！ 今回の記事ではイラスト素材をSpineで読み込み、ボーンを配置し、少しウェイトを付けるところまでご紹介します。 もう既にSpineの経験がある方は、こちらの記事を飛ばし、明日更新予定の「カードイラスト実践編」から読んでいただいても問題ないかと思います。 Spineとは Spineは、「ボーン」を使って2Dイラストに様々な動きをさせることができるゲーム用アニメーションソフトウェアです。 Spineには下記の3つのバージョンがあるので、まずはTrialを試してみてください！ Tr
クリエイター界激震 簡単にキーフレームアニメを作れるソフトに「無料で公開していいクオリティじゃない」の声
簡単にキーフレームアニメーションを作れるフリーウェア、「AnimeEffects」が「無料で公開していいクオリティーじゃない」と話題になっています。ニコニコ動画に使い方の紹介動画が公開されているのですが、非常に大きな可能性を感じさせてくれます。 同ソフトは、1枚の絵をアニメーションさせるためのソフト。pngやjpgなどの画像ファイルも使えますが、psd（Photoshop用の画像ファイル）を読み込ませるとレイヤーなども読み込んでくれるため、より多彩な動きを実現できます。 動画では、走るポーズをとったサーバルちゃん（テレビアニメ「けものフレンズ」の主人公の1人）のpsdファイルから走るアニメーションを作製しています。手足を別パーツとして動かすことで、自然な走る動きが作成できるもよう。 psdファイルを読み込んで いろいろと作業をすると 走るアニメーションが完成 どのパーツを上に表示するかを決
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
ノミ・ダニ駆除薬通販｜犬｜チュアブル・スポットタイプ｜ぽちたま薬局
ノミ・ダニ駆除薬（犬） 総合 ランキング 1位 ネクスガード 1箱：6,950円～ 2位 レボリューション【犬用】 1箱：4,766円～ 3位 レボスポット（レボリューションジェネリック）【犬用】 1箱：2,350円～ 4位 ネクスガードスペクトラ 1箱：6,800円～ 5位 アドボケート【犬用】 1箱：4,175円～ 1位 ネクスガード 1箱：6,950円～ 2位 ネクスガードスペクトラ 1箱：6,800円～ 3位 レボスポット（レボリューションジェネリック）【犬用】 1箱：2,350円～ 4位 レボリューション【犬用】 1箱：4,766円～ 5位 アドボケート【犬用】 1箱：4,175円～ 1位 ネクスガード 1箱：6,950円～ 2位 ネクスガードスペクトラ 1箱：6,800円～ 3位 レボスポット（レボリューションジェネリック）【犬用】 1箱：2,350円～ 4位 アドボケート【犬
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
アニメOPEDの“スピード感” - OTACTURE
ノリの良いオープニングには“スピード感”がある。 楽曲に合わせて映像が流れていく快感は本編では味わえない特別なものだ。 今期だと『ノーゲーム・ノーライフ』のOPとか、スピード感があってとても良い。 オープニング映像というのは基本的には そういった「スピード感」や「変化」の連続で出来ている。 具体的に分類すると「加速」、「減速」、「等速」、「（急）停止」、「高速カッティング」、「色彩変化」、「フレームイン／アウト」等々。 これらの要素をうまく継ぎ接ぎして、楽曲のリズムと合わせていくのである。 等速 「等速」表現の場合、 基本的にはオブジェクトが画面の横に（あるいは縦に）等速で通過していくのを撮ることになる。 『ノーゲーム・ノーライフ』OP 密着マルチは「等速」を表現するのに使われる。 複数のセルがそれぞれ横にスライドし、「奥行き」や「等速」の動きを生みつつも、 この画面全体のスピード感は一番
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
無料でHTML5を使った広告やアニメーションが直感的に作れる「Google Web Designer」ベータ版でアニメーションを作ってみました
iOSはFlashに対応していないため、これまでウェブデザインには限界がありましたが、そんなウェブデザインの幅を広げるであろう、動くHTML5広告を制作できるツール「Google Web Designer」ベータ版がGoogleから公開されました。非常に直感的に使えるツールとなっており、アニメーションやイメージギャラリーも簡単に作れるということなので、実際にアニメーションなどを作ってみました。 Google Web Designer http://www.google.com/webdesigner/ 実際に作成したアニメーションは以下のような感じです（動いていない場合はブラウザを更新して再読み込みすれば再度動きます）。 まずは「Download Web Designer Beta」をクリック。 利用規約が表示されるので、「Agree and Download」をクリックしてダウンロードを
だれかのまなざし
あらすじ 舞台は少し未来のプラウド―― 就職を機に一人暮らしを始めた社会人2年生の岡村アヤ、通称「あーちゃん」。 お母さんは医師の仕事で海外に赴任し、今はお父さんと猫のミーさんだけでプラウドに住んでいる。 お父さんはひとり暮らしを始めたあーちゃんをいつも気かけているが、二人の間には微妙な距離が。 そしてあーちゃんが幼い頃にやってきた猫のミーさんは、今ではすっかり歳老いて...。 ある日の夜、仕事で疲れた体をベッドに横たえ、目を閉じるあーちゃん。 三人で過ごした楽しい日々、お母さんが海外に行く寂しさ、そして慰めてくれたミーさんの姿。――次々と過去の思い出が頭の中をかけめぐる。 そんな中、一本の電話が......。 あーちゃんと家族が織りなすストーリーを美しいアニメーションで表現したショートムービー。 「時を超えても、家族の絆をより深く美しく包み込む」という、 未来に向けてのプラウドのメッセー
CSS3アニメーションを使ったかっこいいページを簡単につくりたい！そんな人に -CSS3 Animation Cheat Sheet
Appleのプロダクトページのように、スクロールをトリガーにCSS3アニメーションが展開するようなページを簡単に実装できるCSS3 Animation Cheat Sheetを紹介します。 「Cheat Sheet」という名称が紛らわしいですが、各種CSS3アニメーションをセットにしたスタイルシートで、ページに外部スタイルシートを加え、classをちょこちょこつけるだけで、簡単にCSS3アニメーションをページに実装できます。 CSS3 Animation Cheat Sheet CSS3 Animation Cheat Sheetのデモ CSS3 Animation Cheat Sheetの使い方 CSS3 Animation Cheat Sheetのデモ デモは2種類あります。 CSS3のキーフレームアニメーションを使用しているため、モダンブラウザでご覧ください、IEは10で。 まずは、
貧乏の原因｜辛い生活から脱出するための節約方法を紹介！
辛い貧乏生活から脱出するにはどうすれば良いのでしょう？そのためには貧乏になった理由、節約方法を知っておく必要があります。当サイトでは貧乏の原因、主婦に嬉しいご飯の節約レシピなどを詳しく紹介しています。 辛い貧乏からは、脱出するには方法がちゃんとあります。 お金では、買えないものはあるとよくいいますがそれはただの言い逃れです。 辛い状況から脱出するには、自分に言い訳をしている間は無理があります。 まずは、今の貧乏の理由を見つけることです。 そして、今の状況が辛いと感じるのなら脱出するにはどうするのか真剣に考えることです。 お金がないのなら、まずは収入が上がるように仕事を頑張ることです。 これ以上、仕事は頑張れないのなら後は、お金の使い方の意識を変えることです。 貧乏という人ほど、つまらない見栄をはったり無駄使いをしています。 そして、少しの節約をバカにしていませんか？ まず、一番にしてほしい
スマフォアプリの操作が気持ちいいエフェクトがたくさん！タップ操作時のエフェクトのまとめ -Tapotype
Tapotype 掲載されている各エフェクトはタップやクリック操作で、実際にアニメーションで動作します。 サイト閲覧には、Safariをオススメします。 各エフェクトはカテゴリ別にまとめられており、それぞれ詳細ページも用意されています。
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現
