楕円運動アニメ

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

このファイルの動きがわかれば、楕円運動アニメは理解できたも同然です。
ファイル内容は、左サイドナビ｢楕円運動アニメ｣の中の
｢楕円運動アニメ Function PHP ファイル｣
から見てください。
楕円運動アニメのためのユ－ザ定義関数を作成します。
$r:楕円基本半径
$v:スタート角度
$vy:楕円の傾斜角度α、＋で右肩下がり(時計方向に傾斜)
$k:周る角度、$n:分割数
$cx:楕円の中心 X座標
$cy:楕円の中心 Y座標
$dr:まわる方向と楕円の縦横比を設定
$dr が＋の時、時計方向に移動
$dr が－の時、反時計方向に移動
$dr＝±1 の時は円になる
$dr は以下の範囲内に設定することを推奨
-2＜$dr＜-1 縦長反時計まわり
-1＜$dr＜-0.5 横長反時計まわり
0.5＜$dr＜1 横長時計まわり
1＜$dr＜2 縦長時計まわり
$ic:ieとChromeの区別
をパラメ－タとして渡すと、渡されたパラメ－タに対応する X,Y座標を計算して返してくれます。

楕円運動アニメの原理

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

度数θをラジアンに変換

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

for 文を回す

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

楕円を傾斜角度α回転する

楕円を角度α回転します。
回転角度α°を $vy とし度数をラジアンへ変換する deg2rad 関数を使用し回転していない時のXo,Yo座標を回転後のXn,Yn座標($xn,$yn)に変換します。
楕円の中心点(0,0)から(Xo,Yo)までの距離 R を $R とすると
傾斜した楕円上の各点の座標（Xn,Yn）とすると、
Xn = Xo・cosα - Yo・sinα
Yn = Xo・sinα + Yo・cosα
なので、
$xn = $x * cos(deg2rad($vy)) - $y * sin(deg2rad($vy))
$yn = $x * sin(deg2rad($vy)) + $y * cos(deg2rad($vy))

中心からの位置に移動

ここまでは中心位置を仮に(0,0)に置いていたので、中心を正規の位置に移動します。
本来は楕円の中心は (Xc,Yc)=($cx,$cy)ですから移動後のX,Y座標($x,$y)は
X = Xc＋Xn
Y = Yc＋Yn
$x = $cx + $xn;
$y = $cy + $yn;
となります。

パーセント値と座標指定

移動させるには、@keyframes を使って、パーセント値と座標指定をすればよかったはずです。
0%{
transform:translate(474px,237px);
}
のような書き方です。
そこで、
echo $i*(100/$n)."%{".$we."transform:translate(".$x."px,".$y."px);}";
とすれば、よいはずです。

座標点を検証する

それでは、$i=0、$n:分割数=24、$dr:-0.75、$r:半径=237、$cx=237、$cy=237、$a:Δθ=15、$vy:45
の時で検証してみましょう。
$i*(100/$n) = 0×100÷24 = 0
よって、0% となります。
$x = $r*cos(deg2rad($a*$i))
= 237×cos(deg2rad(15×0)
= 237
$y = $dr*$r*sin(deg2rad($a*$i))
= -0.75×237×sin(deg2rad(15×0)
= 0
回転します。
$xn = $x * cos(deg2rad($vy)) - $y * sin(deg2rad($vy))
= 237×cos(45) - 0
= 237×0.7071
= 168
$yn = $x * sin(deg2rad($vy)) + $y * cos(deg2rad($vy))
= 237×sin(45) + 0
= 237×0.7071
= 168
中心位置を移動し($x,$y)の位置を本来の位置に戻します。
$x = $cx + $xn;
= 237 + 168 = 405
$y = $cy + $yn;
= 237 + 168 = 405
となります。
よって、
transform:translate(405px,405px)
と出力されます。

-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(405px,405px)}
プレフィクションなしの時
0%{transform:translate(405px,405px)}
と出力されます。

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

楕円運動アニメ