ぽよぽよGIFアニメーカーから重要なお知らせ サーバー移行のためURLが変更になります。 新URL:http://poyopoyo.gifanimaker.com こちら ブックマークされている方はお手数ですが、移動先で再度ブックマークをお願いします。 Tweetもしていただけると嬉しいです。 今後とも、ぽよぽよGIFアニメーカー をよろしくおねがいします。
はじめまして。 X Production部 / TechArt and Animation チーム所属で、アニメーションディレクターを拝命しております、清田 徹と申します。 はやいもので2015年ももう半分終わってしまいましたね。 おそろしいですね。 今回は、最近よく和製スマートフォンゲームで見かけるようになった、多関節2Dキャラクターモーションについてお話ししたいと思います。 多関節2Dキャラクターモーションならではのノウハウって意外と世の中に広まってないなと思いましたのでそのあたりも交えつつお話できればと。 まずは、今回サンプルとして用意したキャラクターをご紹介。 下記のようなパーツ構成になっています。 【パーツ構成】 頭:Head 胸:Chest 腰:Hip 上腕:UpperArm (左右共通) 腕:Arm (左右共通) 手:Hand 腿:Thigh (左右共
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時(メニューが展開しているときなどのアクティブ時)のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
こんにちは、デザイナーのぺちこです。 今回はUIデザイン・プロトタイピングツールの「Atomic」をご紹介します。 ブログのネタ探しにネットサーフィンをしていたら偶然見つけたものなのですが、サイトを見ているだけで簡単そう&すごそう!と思ったので実際に使ってみました。 Atomicとは https://atomic.io/ まずは、思わず使いたくなった紹介動画をご覧ください。 アニメーションまでつけた分かりやすいプロトタイプが、なんともサクサクと簡単に……!しかも無料。(beta版だけかもしれませんが) これはとりあえず試してみるしかない! 公式サイトの「SIGN UP FOR FREE」から登録ができます。 「Atomic」の特徴 それでは「Atomic」の特徴について、くわしくご紹介します。 ブラウザ上で使える 「Atomic」は、WindowsでもMacでも使えるオンラインツールなので
Code Sketchは2014年5月から始めたCodePenで書き残してきたJavaScriptによるスケッチの記録です。 Code Sketch is the collection of the sketch with code, Javascript on CodePen from May 2014.
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ:ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
snabbt.js 複数の要素をなめらかに動かすアニメーションライブラリ「snabbt.js」 複数の要素を魚群のように規則正しく動かすことで面白い効果を作ることができます 関連エントリ 超カッコいいテキストアニメーション効果を作れるjQueryプラグイン「LetterFX」 数値のカウント上昇をアニメーション表示できる「countUp.js」 スムーズな色切替アニメーションが実現できる「sweep.js」 スクロールに連動してアニメーションやパララックス効果が作れる「ScrollMagic」
JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK! デモページ SVG Loadersの使い方 使い方は、簡単! Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGファイルをダウンロードします。 SVG Loaders -GitHub Step 2: HTML あとは、imgタグで配置するだけです。 <img src="svg-loaders/puff.svg" /> アイコンのカラーを変更したい時は、svg要素のfill属性を変更します。 <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64
目次 目次 はじめに 揺れもののギミックについて 揺れる対象の設定 揺れものの順番を制御 スカートや髪のめり込み対策 はじめに 今日はユニティちゃんの髪とか胸とか、そういった揺れものパーツを揺らすギミックについて解説します。 ユニティちゃんライブ公開!とりあえず役立ちそうな情報とか、入手方法とかまとめてる - テラシュールブログ さて使い方についてですが、ぶっちゃけユニティちゃんパッケージ付属のドキュメントに詳しく書いてあります。 ユニティちゃんライブには付いてないかもしれません。のでUnityChanパッケージから入手して下さい。 UnityChan.unitypackageを展開後、Assets/UnityChan/Documents/unitychan_dynamic.pdfで確認出来ます。 実際細かい設定についてはドキュメント読めば多分OKなので、とりあえず設定したい人向けに設定方
さて、はっきりいって、廃棄物放置場所と化しており、全く更新してなかったこの日記でありますが、 いしかわじゅん氏「安彦良和は動きがかけない」⇒安彦氏「アニメーターの僕に、動きが描けないだって?」(「王道の狗」白泉社版4巻から) こっちのエントリを読んで思う事があったので更新しときます。内容は「映像コンテンツにおける動き」です。 まあ、上記のエントリの話は、いしかわじゅんが「安彦良和は動きがかけない」って批判してるわけなんですけど、これねえ、 こっちでアニメーターの西澤晋が全く逆のこと言ってて面白いんですがね(ちなみにこの本はとても良い本で絵を勉強してる人なら一読の価値があります)。どんな話かってーと、この本の野球のバッティングの4サイクルプロセスって話の所なんですが、引用しますが、 アニメの場合はすべての行程を描くことができますが、漫画はその中の一枚ないし二枚で動きを表現します。しかも、すべ
Bouncy Scrolling ※アニメーションGIFにしたらサイズがすごかったので静止画像です。 デモページには他にもたくさんのデモがあります。 Impulseの使い方 実装は各デモによってHTMLやJavaScriptが異なるので、「Pulldown Menu」で実装方法を紹介します。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ここは全デモ共通です。 <head> ... <script src="/scripts/impulse.js"></script> </head> Step 2: HTML ヘッダ、メニュー、コンテンツをそれぞれdiv要素で実装します。 <body> <div class="nav-header"> <div class="hamburger-menu-handle"></div> </div> <div class="pu
アルゴリズムを理解するのにビジュアル化することは非常に有効で、プログラムをビジュアル化することで理解が進むのもまた同じ。そこで、アルゴリズム・プログラミングの理解が進むようにと、アルゴリズムを記述したプログラムコードを一挙にビジュアル化することで、アルゴリズム&プログラミングを同時に学習できる一挙両得なサービス「VisuAlgo」が公開されています。 VisuAlgo - visualising data structures and algorithms through animation https://visualgo.net/en 上記のVisuAlgoサイトで試しにソートアルゴリズムの基本プログラム「バブルソート」をビジュアル化してみます。「Sorting」の「bubble」をクリック。 検索窓の下に「bubble」と表示されたのを確認したら「Sorting」の画像をクリック。
KineticJS is a fast, robust, HTML5 Canvas Library that is no longer maintained. The last stable version is v5.1.0, and it's pretty darn solid. You can find the github project here. I am also no longer maintaining the CDN which hosted KineticJS files. If your site was using KineticJS hosted on Amazon's S3 CDN services, I'm very sorry for having to pull the plug, but it was getting very costly. For
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く