JavaScriptでアニメーションを書く初歩の初歩
JavaScriptを使ってアニメーションを書くときに有用なテクニックの、基本中の基本をご紹介します。おそらく、このブログを見ている人のほとんどにとっては釈迦に説法だと思います。今回、requestAnimationFrameの話すらしません。その点、ご留意ください。 まず、JavaScriptでアニメーションをする場合に気をつけないといけないのが、一度JavaScriptの実行（Context）を抜けないとブラウザに描画が反映されないということです。簡単に言うと、 <html><head><title>bad sample</title><script> onload = function() { var e = document.getElementById("e"); for(var i = 0; i <= 100; i += 5) { e.style.left = e.style.
キャラクターのアニメーション処理 - 強火で進め
キャラクターに設定してあるアニメーションを実行する方法を解説します。 今回はキャラクターとアニメーションデータは付属のものを使います。 プロジェクトを作成し、Projectのビューで右クリックをし、「Character Controller」をImportします。 ※もちろん、プロジェクト作成時に「Character Controller.unityPackage」にチェックを付けて追加してもおいても良いです。 First Person Controllerについては必要無いのでチェックを外してから「Import」ボタンを押します。 3rd Person ControllerにはデフォルトでScriptファイルが幾つかついていますので全てRemoveします。 次に「Animation」の項目の「Play Automatically」のチェックを外します。 3rd Person Contro
CreateJS の SpriteSheet クラス - akihiro kamijo
CreateJS には、スプライトシートを簡単に扱えるように、SpriteSheet というクラスが提供されています。 スプライトシートは、アニメーションを構成する 1 つ以上のフレームを、1 つの画像ファイルにまとめたものです。例えば、幅と高さが 100 ピクセルのフレーム 4 つを横一列にぴったり並べると、幅が 400 ピクセル、高さが 100 ピクセルのスプライトシートになります。 スプライトシートをアニメーションとして扱うためには、SpriteSheet クラスが、「どのスプライトシートの」「どの領域を」「何番目に再生すれば良いのか」、を知らなければなりません。そのため、SpriteSheet のコンストラクタには、以下の 3 種類の情報を渡します。 スプライトシートの画像ファイル名 フレームの情報 （位置、大きさ等） フレームを再生する順序 それぞれ、複数存在する場合 （例えば
[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards
パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 上：垂直くるっ、下：水平くるっ CSS Flip Boardsの実装 くるっとなるのはスタイルシートのエフェクトで、スクリプトは使用されていません。 Step 1: HTML 表・裏のパネル2枚をそれぞれdiv要素にし、それらを2つのdivで内包します。 垂直にはtop、水平にはleftを指定します。 垂直にくるっ <div class="flip-boards"> <div class="board top"> <div class="front"><h2>パネル：表</h2></div> <div class="flipped"><h2>パネル：裏</h2></div> </div> </div> 水平にくるっ <div class="fl
CSSアニメーションの初歩をおさらい
最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま
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
[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー
jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla
PROJECT TEAM DoGA
CGアニメコンテスト上映会の模様のニコニコ生放送「タイムシフト視聴」およびYouTubeでの再配信について、配信期限を11月30日までに延長しました。ニコニコ生放送は一般会員でもタイムシフト視聴できます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UnityのJavaScriptでアニメーション : Nanashi-soft
mdlab.jp