３次ベジェ曲線アニメクラス

３次ベジェ曲線アニメクラス class ファイル作成

３次ベジェ曲線アニメクラス class ファイル
bez_cla.php
を作成していきます。
基本は、
Move Image に戻り 左サイドナビ｢複数３次ベジェ曲線アニメ｣の中の
複数３次ベジェ曲線アニメ function PHP ファイル
とほとんど同じです。
これから作成するファイル内容は、
Move Image に戻り
左サイドナビ｢複数３次ベジェ曲線アニメ｣の中の
｢３次ベジェ曲線アニメクラス class PHP ファイル｣
から見てください。
ファンクション名は Bezier_3n()とします。
これからその差分について説明します。

クラス Bezier_3n 作成

まず、自分のクラス名 Bezier_3n を宣言、
class Bezier_3n{～～}
{～～}の部分に、その実行すべきプログラム内容を記述します。
クラス内で使用する各変数をクラス外からアクセスできないように private 宣言します。
private $we;
private $t_end;
private $t_dvp;
private $t;
private $tt;
private $y;
private $x;
protected function __construct ($bezier){～～}
の{～～}の部分に、その実行すべきプログラム内容を記述します。
アクセス修飾子 protected を指定することにより、継承クラス(サブクラス)のみが この function にアクセスできます。

__construct ってなに？

クラスを利用する場合最初に new 演算子によってインスタンス化します。
たとえば、
$bez = new Bezier_3n($bezier[$i]);
のような感じです。
このインスタンス化のタイミングで実行される特別なメソッドがコンストラクタです。
コンストラクタの名前は必ず、__construct です。
先頭はアンダ－スコアが２つです。
従って、コンストラクタの初めには各プロパティの初期化やクラス内部で利用する外部リソ－スの初期化処理が実行されます。
ただし、初期化が必要ない場合には、__construct　は省略することができます。
なお、コンストラクタは戻り値を返す必要もありませんし、また、返してもいけません。
初期化した後、何もしないか又は何らかの処理を実行するだけです。

-webkit- の文字を設定

まず、変数 $we の中に -webkit- の文字を設定するか否かを決めます。
引数 $bezier['ic'] が 1 ならば、$we = "-webkit-" とします。

  $we="";	
  if($bezier['ic'] == 1){
    $we="-webkit-";	
   } 

３次ベジェ曲線クラス軌跡の計算刻み

複数３次ベジェ曲線アニメファンクションファイル作成
の中の｢複数３次ベジェ曲線軌跡の計算刻み｣と考え方は同じです。
３次ベジェ曲線軌跡の計算では、0～1 まで 0.01 刻みで $tt を大きくし、 $x,$y を計算しました。
今回、３次ベジェ曲線クラス軌跡の計算ではここに工夫が必要です。
３次ベジェ曲線では軌跡は１個で 100　ポイント計算しました。
ベジェ曲線クラス軌跡では軌跡がＮ個であるとし、全体で 100 ポイント計算するとすれば ３次ベジェ曲線クラス軌跡１個あたりの計算ポイント数は 100／Ｎ と言うことになります。
今、$bezier['dv'] には、３次ベジェ曲線の集合数が入っていますので、 計算時の最終ポイントを $t_end とすれば
$t_end = 100 / $bezier['dv']
となります。
例えば、
$bezier['dv'] = 4
とすれば
$t_end = 100 / 4 = 25
となります。
すなわち、$t = 0 ～ 25 とし 26 回、軌跡位置を計算します。
この時の刻み値 $tt は
$tt = $t / $t_end
で求めることができ、$tt は 0～1 となります。

３次ベジェ曲線軌跡の計算

Move Image に戻り、左サイドナビ｢３次ベジェ曲線アニメ｣の中の
３次ベジェ曲線の原理
を見てください。
始点　 B0 (X0,Y0)
制御点 B1 (X1,Y1)
制御点 B2 (X2,Y2)
終点　 B3 (X3,Y3)
とすると
X(t)
= X0 (1－t)3
+ X1・3t (1－t)2
+ X2・3t2(1－t)
+ X3・t3
Y(t)
= Y0 (1－t)3
+ Y1・3t (1－t)2
+ Y2・3t2(1－t)
+ Y3・t3
でした。
これを PHP に置換えます。
X(t)→$x、Y(t)→$y、t→$tt
と置換えると

  $x =
   $bezier['x0']*pow((1-$tt),3)
  +$bezier['x1']*3*$tt*pow((1-$tt),2)
  +$bezier['x2']*3*pow($tt,2)*(1-$tt)
  +$bezier['x3']*pow($tt,3);
  $y =
   $bezier['y0']*pow((1-$tt),3)
  +$bezier['y1']*3*$tt*pow((1-$tt),2)
  +$bezier['y2']*3*pow($tt,2)*(1-$tt)
  +$bezier['y3']*pow($tt,3);      

となります。

％位置表示

全体の何％の位置がここですよと、
**%{
   transform:translate(**px,**px)
}
の様な書式で出力するのでしたよね。
１番目の３次ベジェ曲線軌跡では、
echo $t."%{".$we."transform:translate(".$x."px,".$y."px);}";
で、OK ですが、これでは２番目以降の３次ベジェ曲線軌跡ではうまくいきません。
そこで、$bezier['no'] から何番目の３次ベジェ曲線軌跡かを知って
$t_dvp = ($bezier['no'] - 1) * $t_end
とすれば、現在計算している $x,$y 座標が何％位置のものか確定することができます。
例えば $bezier['no'] = 2、 $t_end = 25（４つ３次ベジェ曲線がある時 100/4 = 25）ならば
$t_dvp = (2 - 1) * 25 = 25
となり、、$t = 0 ～ 25 なので
echo $t + $t_dvp ."%{".$we."transform:translate(".$x."px,".$y."px);}";
と出力すれば、適切な％位置に、座標を出力することができます。
ちなみに、$we には、空白か "-webkit-" のどちらかがはいっていますね。

これで、３次ベジェ曲線アニメクラス class ファイルの作成は完了です。
次ぎに、３次ベジェ曲線アニメクラス確認に進みます。