Javascriptで「自然」な動きをするには?

powered by hm solution

お問い合わせ:0120-290-727
受付時間:10:00~18:00(土日祝は除く)

お問い合わせ
ブログTOP » web » プログラミング » Javascriptで「自然」な動きをするには?

Javascriptで「自然」な動きをするには?

grav
しげじゅん
忘れた頃に役にたった学校での勉強

簡単なアニメーション

Javascriptを使うと、簡単にアニメーションが作成できます。
以下の画像をクリックすると、上下左右に画像が移動するようになっています。

動きが機械的というか、とても不自然ですね・・・。どうすればこれが自然に動いてるようになるのでしょうか。

まず、この動きのコードを確認してみます。コードの全体はこちらです。このコードのアニメーションを実行している部分を抜粋したものが下記です。

function main_loop() {
    //前回実行時の時間差をミリ秒で取得
    ct = (new Date()).getTime();  
    dt = ct - prevtime;             
    
    //経過時間から移動量を計算
    x += vx*dt/1000;                
    y += vy*dt/1000;
    
    // x座標がcanvas.widthのサイズを超えたら反転する
    if( x+image_width > canvas1.width ){
        x = canvas1.width-image_width;
        vx = -vx;
    }
    else if( x < 0 ){
        x = 0;
        vx = -vx;
    }
    
    //y座標がcanvas.heightのサイズを超えたら反転する
    if( y+image_height > canvas1.height ){
        y = canvas1.height-image_height;
        vy = -vy;
    }
    else if( y < 0 ){
        y = 0;
        vy = -vy
    }
    
    //画面クリア
    context.fillStyle = "#ffffff";
    context.fillRect(0, 0, canvas1.width, canvas1.height);
    
    //画像描画
    context.drawImage(img, x,y );
    
    prevtime = ct;

}

実行している内容は、

  1. 前回の実行時間と今の時間から、移動量を計算
  2. 計算した結果、画面からはみ出たら移動の方向と速度を反転
  3. 画面全体を再描画

という内容です。これだと動きが不自然になってしまうので、自然な動きになるよう改造してみます。

重力をつける

「自然に見える」という事は、「現実で見慣れている物と同じような動きをする」という事なので、先ほどの動きに重力をつけてみます。

そもそも重力があるとどんな動きになるの?

重力があるときの特徴をまとめると、

  1. 支えがない状態だと、下に落ちる
  2. 落ちる速度は、時間が立つと早くなっていく
grav

です。地球の重力の場合、空気抵抗などを無視すると1秒間に時速35kmずつ加速していきます。結構速いですね。
では、先ほどの特徴2番目、「落ちる速度は、時間が立つと早くなっていく」をプログラムで実装してみましょう

重力つきのアニメーション

画像クリックで開始します。

下方向の動きが自然になりました。コードの全体はこちらです。このコードから、アニメーションを実行している部分を抜粋すると
こちらになります。

function main_loop() {
    //前回実行時の時間差をミリ秒で取得
    ct = (new Date()).getTime();  
    dt = ct - prevtime;             
    
    //重力加速
    vy += ga*dt/1000;
    
    //経過時間から移動量を計算
    x += vx*dt/1000;                
    y += vy*dt/1000;
    
    // x座標がcanvas.widthのサイズを超えたら反転する
    if( x+image_width > canvas1.width ){
        x = canvas1.width-image_width;
        vx = -vx;
    }
    else if( x < 0 ){
        x = 0;
        vx = -vx;
    }
    
    //y座標がcanvas.heightのサイズを超えたら反転する
    if( y+image_height > canvas1.height ){
        y = canvas1.height-image_height;
        vy = -vy;
    }
    else if( y < 0 ){
        y = 0;
        vy = -vy
    }
    
    //画面クリア
    context.fillStyle = "#ffffff";
    context.fillRect(0, 0, canvas1.width, canvas1.height);
    
    //画像描画
    context.drawImage(img, x,y );
    
    prevtime = ct;
}

追加したのは7行目、「重力加速」のコメントがついている所です。予め変数gaに下方向の移動量を設定しておき、その値を毎回加算するようにしています。
これで重力があるときの動きが表現できました。

まとめ

自然な動きをプログラムで表現するには、動きを数字で計算できる形にする必要があります。
たとえば、画面端にぶつかった時の動きを自然にするには、反発係数の式を使って動きをプログラミングします。

興味がある方は、物理の入門書などを参考にするともっといろいろな動きが表現できるとおもいます。

記事で使用したコード全てをダウンロード

人気記事

カテゴリ一覧

ホームページを新規制作・リニューアルしたい方 ホームページ診断 神戸ホームページ制作センター採用情報
弊社が手がけた制作実績 スタッフブログ ECの運営ならコンサルロケッツにお任せください!!ギュイーン!!
充実の運用サポート 失敗する業者選びの典型例

制作サイトSEO対策実績

今月のSEO対策結果
キーワード順位
出張マッサージ 京都
1位
手元供養 通販
1位
ユニバーサルマナー
1位
外壁塗装 神戸
2位
整体 大阪
1位
姫路 工務店
2位
ブライダルまつげ 神戸
2位
神戸 温泉
1位
葬儀 神戸
1位
温泉 神戸
2位
葬儀 大阪
4位
出張マッサージ 名古屋
3位
学生 プロモーション
1位
オークション 代行
3位
コンテナ 販売
3位
目 資格
1位
学生 広告
1位
大阪 ホテル
1位
ヘアサロン 南船場
3位
リフォーム
1位
ブランドメガネ 買取
3位
防犯カメラ 神戸
1位
大阪 ホテル
1位
兵庫 探偵
2位
出張マッサージ 神戸
1位
カルジェルネイル 神戸
2位
フィラリア予防
3位
神戸 ネットカフェ
1位
薬剤師 求人
1位
合宿免許 ローン
1位
美容院 南船場
3位
神戸 婚活
1位

2013年09月調査結果の一部

ホームページ制作対応エリア

制作エリア
【営業地域】
大阪府/奈良県/滋賀県/京都/和歌山/三重/兵庫県/神戸市/神戸市北区/神戸市西区/三田市/宝塚市/川西市/篠山市/三木市/小野市 /尼崎市/芦屋市/明石市/伊丹市/西宮市/姫路市/西脇市/豊岡市/加古川市/加西市/加東市/相生市/赤穂市/朝来市/淡路市/市川町/宍粟市/竜野市/丹波

【受注可能地域】
大阪府/兵庫県/京都府/滋賀県/奈良県/
和歌山県/三重県/岡山県/徳島県など
全国各地
Googleビジネスパートナー
powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.