楕円運動アニメクラス

楕円運動アニメクラス本丸 style sheet 設定ファイル作成-1

どんな楕円運動軌跡を作成するのかここで説明します。
ファイル内容は、Move Image に戻り、左サイドナビ｢楕円運動アニメクラス｣の中の
｢楕円運動アニメクラス設定 PHP ファイル｣
から見てください。
ファイルとしては簡単です。
楕円形状を設定する各パラメ－タ配列を array 命令で決め、インスタンスを設定するだけです。
まずは、
require_once ('class/cir_ex_cla.php');
で、楕円運動アニメ継承クラスを読込みます。
これで、Oval_keyf() メソッドを使用できるようになります。
Oval_keyf() メソッドの作成方法は、Move Image に戻り、左サイドナビ｢楕円運動アニメクラス｣の中の
｢楕円運動アニメ本丸二階個別継承クラス作成｣
から見てください。
ここでは、このメソッドを使ってインスタンスを使用すると、楕円軌道が作成されるととりあえず思ってください。
今回は２つの異なる楕円軌道を作成します。

require_once について一言

ちょっと脱線します。
require_once 文は require とほぼ同じ意味ですが、ファイルがすでに読込まれているかどうかを PHP がチェックするという点が異なります。
すでに読込まれている場合はそのファイルを読込みません。
ちなみに、ファイルの内容を差込みたいときはinclude()を使います。

円軌道作成

まず、円軌道を作成します。
画像が時計方向に全周円運動するように軌道設定します。
各設定値は連想配列 $oval1 に記述します。

円の animation-name

今回、円の animation-name は、test1 としました。
animation-name は、$oval1['name'] の中に記述します。よって、
$oval1 = array('name' => 'test1');
とします。

r: 半径

円の半径 r は 237px とします。よって
$oval1 = array('r' => 237);
とします。

v: スタート角度

v：スタート角度と始点位置の関係は次のようになります。

始点位置時計文字盤	スタート角度 v
始点位置時計文字盤	dr = ＋	dr = －
０時	270	90
３時	0	0
６時	90	270
９時	180	180

なぜこうなるのかは、Move Image に戻り、左サイドナビ｢楕円運動アニメ｣の中の
楕円運動アニメ Function ファイル作成詳細
から見てください。
今回は楕円縦横比 dr を＋とし、時計盤で０時の位置からのスタ－トとします。よって
$oval1 = array('v' => 270); とします。

vy: 楕円の傾斜角度

円の時は、何も考えず 0 度を設定します。よって、
$oval1 = array('vy' => 0);
とします。

k: 周る角度

一周させますので、360 度を設定します。よって、
$oval1 = array('k' => 360);
とします。

n: 分割数

分割数は15ぐらいで円に見えます。
大きいほど円に近づきます。
今回は、24 分割 15°おきにします。よって、
$oval1 = array('n' => 24);
とします。

cx,cy: 円の中心座標

今回の円の中心座標は(237px,237px)です。よって、
$oval1 = array('cx' => 237,'cy' => 237);
とします。

dr: 楕円縦横比、時計まわり？

今回は、時計まわりの円としますので、dr は、1 に設定します。プラスに設定すると時計回りになります。よって、 $oval1 = array('dr' => 1);
とします。

ic: -webkit-有無

$oval1 = array('ic' => 1);
と設定すると、-webkit- ありで、transform:translate() 命令が出力されるのですが、これは継承クラスで操作しますので、ここではとりあえずヌルを設定、
$oval1 = array('ic' => '');
とします。

円設定まとめ

以上をまとめると
$oval1 = array(
'name' => 'test1', //animation-name
'r' => 237, //半径
'v' => 270, //スタート角度
'vy' => 0, //傾斜角度
'k' => 360, //周る角度
'n' => 24, //分割数
'cx'=> 237, //中心Ｘ座標
'cy'=> 237, //中心Ｙ座標
'dr'=> 1, //縦横比率
'ic'=> '' //-webkit-有無
);
となります。

円インスタンスの作成

各引数値が決まりましたので、円のインスタンスを作成します。
インスタンス名を $cic1 とすると
$cic1 = new circle_keyf($oval1);
circle_keyf はこれから作成する楕円運動アニメクラスのメソッド名です。
これで、画像が全周円運動をする準備ができました。
時計方向に円形に動きます。

引続き楕円軌道を作成する必要がありますが、少し長くなりましたので一旦ここで区切ります。

楕円運動アニメクラス本丸 style sheet 設定ファイル作成-2 に進む
楕円運動アニメクラス北丸 CSS ファイル作成に戻る
楕円運動アニメクラス城内スタ－トファイル作成に戻る
楕円運動アニメクラス作成概要に戻る

楕円運動アニメクラス