[B! animation] ksto_rock54のブックマーク

キャラクターに命を吹き込むディズニーの技術　アニメーションに魅力を与える12の原則 | Disney DAILY

アニメーターたちは、いったいどうやって真っ白なキャンバスに生命を吹き込んでいるのでしょう。パスカルを見て思わず笑ってしまったり、カールの心情に深く共感を覚えたり、恋を叶えようとひたむきにがんばるアリエルに憧れたり。ディズニーキャラクターたちは、まるで生きているかのようにみずみずしい感覚を与えてくれます。それはきっと、アニメーターの技術によるところが大きいはず。その謎を解き明かすためには、まず、アニメーションにおける12の原則を理解しておく必要があります。ウォルト・ディズニー・スタジオに在籍していた2人の伝説のアニメーター、オーリー・ジョンストンとフランク・トーマスによって有名になった12の原則。現在でも、アニメ業界を志す人々は全員学んでおかなくてはならない基本中の基本とされています。オーリーとフランク、実は『Mr.インクレディブル』（2004）の最後にカメオ出演しています。(そうです

ksto_rock54 2018/10/26

animation

リンク

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）

ksto_rock54 2018/10/26

animation

リンク

機械メカニズム模型のアニメーション

総合博物館ではヒューマンシステム論研究室（大学院情報学研究科システム科学専攻）と共同で、機械メカニズム模型の動きが分かるように、順次、動画像によって機械メカニズム模型を再構築することを進めてきました。以下にそれらの動画像を示します。同じ働きをする機械メカニズムが複数ある（例えば往復直線運動・回転運動変換メカニズム）のは、そのうちのどれかが特許で使えないため、他のメカニズムが考案され代用された、という歴史的な経緯があります。機械メカニズムのアニメーション (-->関係論文) （アニメーションの作成にあたっては、科学研究費補助金 [平成11-12年、萌芽的研究、課題番号：11878026] を受けました。記して謝意を表します。）からくりの機構我が国は明治になって欧米から近代機械工業技術を輸入しましたが、上のような教育模型もその例と考えられます。しかし、それ以前の江戸時代には「からくり」

ksto_rock54 2017/08/14

リンク

現場で使えるアニメーション系JSライブラリまとめ(2018年版) – TweenMax, CreateJS, WebAnimation, Velocityなど - ICS MEDIA

現場で使えるアニメーション系JSライブラリまとめ GSAP, CreateJS, WebAnimation, VelocityなどウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。今回紹介するメジャーなJSライブ

ksto_rock54 2017/02/17

リンク

あえてズレを入れるのがミソ！ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA

アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。本記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。本記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となって