NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2015.04.08

JavaScriptで落下するボールのアニメーションを表現する方法

小林
(編集部注:2014年01月22日に公開された記事を再編集したものです。)

お疲れ様です。小林です。

落下させたいときってありますよね。
自分自身とか。


【こちらもおすすめ】
「Canvasで落下するボールのアニメーションを表現する方法」
「CSS3・JS・jQueryなど、フロントエンドのみでアニメーションを実装する方法」

JavaScriptで落下するボールを表現する

サンプル

まずは以下のデモをご覧になってください。

落下するボールのデモ

何色でした?(※アニメーションが見れなかった方はリロードしてみてください。)

金や銀色だった方、今年はすごいことになるかもしれませんよ。

白だった方。あ・・・(察し

解説

作り方を解説します。

HTML

<body>
<span id="ball"></span>
</body>

うん。spanですね。

CSS

body {
margin:0;
padding:0;
background-color: #333;
}
#ball {
display: block;
width: 140px;
height: 140px;
position: absolute;
border: solid 8px #000;
border-radius: 50%;
background-color: #ffffff;
}

うん。ボールっぽいですね。
仕組みとしましては、position=absoluteにして、topを変更していこうっていう寸法です。

Javascript

var ball = document.getElementById("ball")
,bh = ball.offsetHeight
,bw = ball.offsetWidth
,left = ( window.innerWidth / 2 ) - ( bw / 2 )
,top = -ball.offsetHeight
,ground = ( window.innerHeight / 2 ) - ( bh / 2 );
ball.style.left = left + "px";
ball.style.top = top + "px";

準備ですね。ウィンドウサイズとボールのサイズを取得して、スタート地点の位置を算出しています。

var y = top
,b = ground
,v = 0
,R = 0.48;
function gravity() {
y+= ++v;
if( y >= b ) {
y = b;
v*= -R;
if ( !~~v ) {
clearInterval(g)
}
}
document.getElementById("ball").style.top = y + "px";
}
var g = setInterval(gravity, 10);

メイン関数です。
setInterval()で10ミリ秒毎に実行します。
こうすることによって、アニメーションのタイムラインを擬似的に作りだすわけですね。

まずは、ボールの位置を変更します。始点からの距離を増やしていくイメージです。

y+= ++v;

跳ね返りを考えなければこれだけでオッケーです。どんどん進んでいきます。

document.getElementById("ball").style.top = y + "px";

ちょっと飛んでgravity関数の最後の方ですが、ボールの位置を更新します。

if( y >= b ) {
y = b;
v*= -R;
if ( !~~v ) {
clearInterval(g)
}
}

跳ね返る部分ですね。
目標位置まで到達したら、反発係数っぽいものをマイナスで乗算してやります。
最後に動きがなくなったらclearInterval()しています。

まとめ

いかがでしたか?
簡易なものですが、使いどころがありそうですよね。

最後に、ひとつ。

落ちるのは簡単だ、だが、登るのはどうだろうか?
そうです。たとえ今が辛くとも、どうか自分を信じて、たゆまぬ努力を続けてください。
いつかきっと報われるときがくるはずです。

 

【フロントエンドでアニメーションを実装】

CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法

SVGとjQueryで絵を描いているようなアニメーションを実装する方法

刀でズバッと斬るようなアニメーションをHTML・CSS・JS(jQuery)で実装する方法

CSS3のanimationで春うららかな桜を降らせてみた(雨にも雪にもなる!)

CSS3だけで作れる格好良いローディングアニメーション5つ!