複数３次ベジェ曲線アニメ

複数３次ベジェ曲線アニメファンクションファイル作成

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

-webkit- の文字を設定

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

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

例えば、渡された引数 $bezier が
$bezier = $bezier[1] だったとし、もし
$bezier[1]['ic'] = 1 だったとすると
$bezier['ic'] = 1
となりこの場合、
$we = "-webkit-"
となります。

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

左サイドナビ｢３次ベジェ曲線アニメ｣の中の
３次ベジェ曲線の原理
を見てください。
始点　 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 に置換えます。

pow( ) 関数について説明します。
書式は、
pow (数値, 累乗の指数);
です。
引数で与えられた数値を指数の数だけ掛合わせ、その結果を返します。
ただし、累乗が計算できない場合には、警告が発生し「false」を返します。
サンプル
$a = pow(4, 3) = 43 = 64
となります。
よって、
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);      

となります。

複数３次ベジェ曲線軌跡の計算刻み

３次ベジェ曲線軌跡の計算では、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
で求めることができ、0～1 となります。

％位置表示

全体の何％の位置がここですよと、
**%{
   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-" のどちらかがはいっていますね。

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