３次ベジェ曲線アニメ

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

３次ベジェ曲線アニメファンクションをファイル作成していきます。
ファイル内容は、
Move Image に戻り
左サイドナビ｢３次ベジェ曲線アニメ｣の中の
｢３次ベジェ曲線アニメファンクション PHP ファイル｣
から見てください。
まず、変数 $we の中に -webkit- の文字を設定するか否かを決めます。
引数 $bezier['ic'] が 1 ならば、$we = "-webkit-" とします。

  $we="";	
  if($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%{
  -webkit-transform:translate(**px,**px)
}
の様な書式で出力します。
echo $t."%{".$we."transform:translate(".$x."px,".$y."px);}";
これを、$t を 0 から 100 まで、+1 しながら、言換えれば $tt を 0 から 1 まで、+ 0.01 しながら繰返せば終わりです。