円運動アニメ

円運動アニメ Function ファイル作成概要

このファイルの動きがわかれば、円運動アニメは理解できたも同然です。
ファイル内容は、左サイドナビ｢円運動アニメ｣の中の
｢円運動アニメ Function PHP ファイル｣
から見てください。
円運動アニメのためのユ－ザ定義関数を作成します。
$r:半径、$v:スタート角度
$k:周る角度、$n:分割数
$cx:円の中心 X座標
$cy:円の中心 Y座標
$dr:時計まわり？
$ic:ieとChromeの区別
をパラメ－タとして渡すと、渡されたパラメ－タに対応する X,Y座標を計算して返してくれます。

円運動アニメの原理

円運動アニメを表示するには、円の中心を (Xc,Yc)、円の半径を r、円の中心角度を θとした時
X = Xc＋r・cosθ
Y = Yc－r・sinθ
となる各X,Y座標を計算していけばよいはずです。
これをPHP関数で表現していきます。

度数θをラジアンに変換

PHP関数の sin関数、cos関数は、角度はラジアンで指定します。
したがって、度数をラジアンへ変換する deg2rad 関数を使用する必要があります。

for 文を回す

for 文のル-プカウンタ $i を回しながら各X,Y座標を計算していきます。
１回あたり角度をΔθずつ増加させながら計算します。
Δθを $a、X座標を $x、X座標を $y で表すと、
$x = $cx + $r*cos(deg2rad($a*$i))
$y = $cy - $r*sin(deg2rad($a*$i))

パーセント値と座標指定

移動させるには、@keyframes を使って、パーセント値と座標指定をすればよかったはずです。
0%{
transform:translate(474px,237px);
}
のような書き方です。
そこで、
echo $i*(100/$n)."%{".$we."transform:translate(".$x."px,".$y."px);}";
とすれば、よいはずです。
それでは、$i=0、$n:分割数=24、$r:半径=237、$cx=237、$cy=237、$a:Δθ=15
の時で検証してみましょう。
$i*(100/$n) = 0×100÷24 = 0
よって、0% となります。
$x = $cx + $r*cos(deg2rad($a*$i))
= 237 + 237×cos(deg2rad(15×0)
= 474
$y = $cy - $r*sin(deg2rad($a*$i))
= 237 - 237×sin(deg2rad(15×0)
= 237
よって、
transform:translate(474px,237px)
と出力されます。

-webkit- は困りもの

ベンダ－プレフィクションを書くのは、面倒なだけですよね。
今回も面倒なことになっています。
$ic：IE と Chrome の区別
のためのパラメ－タをもらって、これが 1 ならば、ベンダ－プレフィクション -webkit- を書込むようにしています。
$we="";
if($ic == 1){
$we="-webkit-";
}
よって最終的には、
echo $i*(100/$n)."%{".$we."transform:translate(".$x."px,".$y."px);}";
の部分は、
プレフィクションありの時
0%{-webkit-transform:translate(474px,237px)}
プレフィクションなしの時
0%{transform:translate(474px,237px)}
と出力されます。

円運動ｱﾆﾒFunctionﾌｧｲﾙ作成詳細に進む
円運動アニメ設定ファイル作成に戻る
円運動アニメ初期ファイル作成に戻る
円運動アニメファイル概要に戻る
円運動アニメ作成概要に戻る

円運動アニメ