CSS3のanimationでボールの放物線運動

させてみた。

というのもトスジャグリングのシュミレータみたいなのを製作したいときに放物線の描画は必須だし試しにやってみようと思って。

HTML5のcanvasとかの方が正確な放物線を描けると思うけれど、
CSS3にもanimationという機能があるということなので実装してみた。

#ball {
    -webkit-animation: translate1 2s linear infinite alternate;
    background: red;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 400px;
    left: 20px;      
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
}

@-webkit-keyframes translate1{/* キーフレームの設定*/
    0% {-webkit-transform: translate(0px, 0px) scale(1.2, 0.8);}
    5% {-webkit-transform: translate(25px, -68px);} 
    10% {-webkit-transform: translate(51px, -130px);}
    15% {-webkit-transform: translate(76px, -184px);}
    20% {-webkit-transform: translate(102px, -230px);}
    25% {-webkit-transform: translate(128px, -270px);}
    30% {-webkit-transform: translate(153px, -302px);}
    35% {-webkit-transform: translate(178px, -328px);}
    40% {-webkit-transform: translate(204px, -346px);}
    45% {-webkit-transform: translate(229px, -356px);}
    50% {-webkit-transform: translate(255px, -360px);}
    55% {-webkit-transform: translate(280px, -356px);}
    60% {-webkit-transform: translate(305px, -346px);}
    65% {-webkit-transform: translate(331px, -328px);}
    70% {-webkit-transform: translate(356px, -302px);}
    75% {-webkit-transform: translate(382px, -270px);}
    80% {-webkit-transform: translate(407px, -230px);}
    85% {-webkit-transform: translate(433px, -184px);}
    90% {-webkit-transform: translate(458px, -130px);}
    95% {-webkit-transform: translate(484px, -68px);}
    100% {-webkit-transform: translate(509px, 0px) scale(1.2, 0.8);}

放物線を20個の直線に分割したら、わりと放物線に見えた。
どのパートでどの直線を描けばいいかを指定しないといけず、その計算にはPythonで実装した下のプログラムを使った。
力学の知識を使ったのは超久々な気がする。

from math import *
v = 90.0
g = 10.0
sin = 2.0*sqrt(2.0)/3.0
cos = 1.0/3.0
t0 = 2*v*sin/g

for par in [x*5 for x in range(0,21)]:
	x = v*cos*t0*par/100.0
	y = v*sin*t0*par/100.0-(1.0/2.0)*g*pow(t0,2.0)*pow(par,2.0)/10000.0
	print par, x, y, t0*par/100.0

縦長の放物線になるように, 初期速度 $v$ の角度 $\theta$ は以下のように設定。
$\displaystyle sin \theta = \frac{2\sqrt{2}}{3}$
$\displaystyle cos \theta = \frac{1}{3}$

速度の大きさはなんとなく $|v|= 90$ , 重力加速度は $g = 10.0$ に指定してみた。

初期速度のパラメータ（角度、大きさ）をいじれば違う形の放物線になりますが、今回はこんな感じで。