テオ・ヤンセン機構をHTML5 Canvasでアニメーションに - roombaの日記
はじめに オランダのアーティストであるTheo Jansen(テオ・ヤンセン)氏は、風力によって歩行する巨大な脚「ストランドビースト」をつくったことで有名です。「ストランドビースト」には特殊なリンク機構(Jansen's Linkage)が用いられており、これによって風力による回転運動を生物のように生き生きとした脚の動きに変換しています。 Theo Jansen Japan Jansen's linkage - Wikipedia, the free encyclopedia 以下のような組み立てキットも発売されています。私も持っていますが楽しいです。 大人の科学マガジン Vol.30 (テオ・ヤンセンのミニビースト) (Gakken Mook) 作者: 大人の科学マガジン編集部出版社/メーカー: 学習研究社発売日: 2011/01/14メディア: ムック購入: 13人 クリック: 267
第17回 アニメーションの基礎 | gihyo.jp
こんにちは、太田です。3回ほどJavaScriptの基礎的な内容が続いたので、今回はグラフィカルなアニメーションについて解説します。グラフィカルなJavaScriptというと、難しい・応用的なイメージがあるかもしれませんが、JavaScriptでのアニメーションとはすなわちCSSを段階的に操作するということで、そのポイントを抑えれば中身は単純なものです。 アニメーションの前提知識 HTMLにおける通常のアニメーションを構成するのは、「特定の要素」に対して、「そのCSSプロパティ」を「ある時点からある時点まで」の時間の中で、「ある値からある値に操作」する、といった要素です。 特定の要素と、CSSプロパティについては問題ないと思います。問題となるのは「時間と値の操作」です。 まず、単純にインクリメントするだけというサンプルを見てみましょう。 良くないアニメーション var y = 0;
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
