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

powered by hm solution

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

お問い合わせ

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

忘れた頃に役にたった学校での勉強

簡単なアニメーション

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に下方向の移動量を設定しておき、その値を毎回加算するようにしています。
これで重力があるときの動きが表現できました。

まとめ

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

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

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

powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.