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

複数３次ベジェ曲線アニメ設定ファイル

どんな複数３次ベジェ曲線アニメ運動軌跡を作成するのかおさらいします。
軌跡図のカンプ－複数３次ベジェ曲線軌跡図面をもう一度示します。

複数３次ベジェ曲線アニメ設定ファイル作成

ファイルは、
Move Image に戻り
左サイドナビ｢３次ベジェ曲線アニメ｣の中の
｢３次ベジェ曲線アニメ設定 PHP ファイル｣
を基本に作成します。
ファイル内容は、
Move Image に戻り
左サイドナビ｢３次ベジェ曲線アニメ｣の中の
｢複数３次ベジェ曲線アニメ設定 PHP ファイル｣
から見てください。
まずは、
include "php/3n_bezier_func.php";
で、複数３次ベジェ曲線アニメ Function ファイルすなわち、複数３次ベジェ曲線運動アニメのためのユ－ザ定義関数を呼び出します。

複数３次ベジェ曲線アニメ Function ファイルの各定数設定

次に、複数３次ベジェ曲線アニメのためのユ－ザ定義関数で使用する各定数を設定していきます。
上の軌跡図を見ながら考えていきましょう。

青線の３次ベジェ曲線の各点の設定

スタ－トの青線の各点を配列 $bezier[1] として設定します。

  $bezier[1] = array(
   'x0' => 0,   // X軸-始点
   'y0' => 0,   // Y軸-始点
   'x1' => 0,   // X軸-制御点1
   'y1' => 650, // Y軸-制御点1
   'x2' => 450, // X軸-制御点2
   'y2' => 650, // Y軸-制御点2
   'x3' => 450, // X軸-終点
   'y3' => 300, // Y軸-終点
   'ic' => 1,
   'no' => 1,   // スタ－ト順位
   'dv' => 4    // ３次ベジェ曲線の集合数
  );

とします。
各点の値は、複数３次ベジェ曲線軌跡図面から読み取ります。
ここで、'no' => 1 はスタ－ト順位を示しており、この例では最初にスタ－トする３次ベジェ曲線であること示しています。
又、'dv' => 4 は３次ベジェ曲線の集合数を表しており、この例では集合数が４個あることを示しています。
なお、'ic' => 1 は機械的に設定します。

赤、茶、緑線の３本の３次ベジェ曲線の各点の設定

同様に、残りの３本の３次ベジェ曲線の各点を配列 $bezier[2]～配列 $bezier[4] として設定します。

  $bezier[2] = array(
   'x0' => 450, // X軸-始点
   'y0' => 300, // Y軸-始点
   'x1' => 450, // X軸-制御点1
   'y1' => -50, // Y軸-制御点1
   'x2' => 0,   // X軸-制御点2
   'y2' => -50, // Y軸-制御点2
   'x3' => 0,   // X軸-終点
   'y3' => 600, // Y軸-終点
   'ic' => 1,	
   'no' => 2,   // スタ－ト順位
   'dv' => 4    // ３次ベジェ曲線の集合数
  );
  $bezier[3] = array(
   'x0' => 450, // X軸-始点
   'y0' => 0, // Y軸-始点
   'x1' => 450, // X軸-制御点1
   'y1' => 650, // Y軸-制御点1
   'x2' => 0,   // X軸-制御点2
   'y2' => 650, // Y軸-制御点2
   'x3' => 0,   // X軸-終点
   'y3' => 300, // Y軸-終点
   'ic' => 1,	
   'no' => 3,   // スタ－ト順位
   'dv' => 4    // ３次ベジェ曲線の集合数
  );
  $bezier[4] = array(
   'x0' => 0,   // X軸-始点
   'y0' => 300,   // Y軸-始点
   'x1' => 0,   // X軸-制御点1
   'y1' => -50, // Y軸-制御点1
   'x2' => 450, // X軸-制御点2
   'y2' => -50, // Y軸-制御点2
   'x3' => 450, // X軸-終点
   'y3' => 600, // Y軸-終点
   'ic' => 1,
   'no' => 4,   // スタ－ト順位
   'dv' => 4    // ３次ベジェ曲線の集合数
  );

とします。
各点の値は、複数３次ベジェ曲線軌跡図面から読み取ります。
ここで、'no' => * はスタ－ト順位を示しており、4 ならば４番目にスタ－トする３次ベジェ曲線であること示しています。
又、'dv' => 4 は３次ベジェ曲線の集合数を表しており、この例では集合数が４個あることを示しています。
実は、'dv' => 4 は $bezier[1] にだけ設定すればよいのですが、$bezier[2]～$bezier[4] にも機械的に設定しています。
なお、'ic' => 1 は機械的に設定します。

transform:translate() 命令を出力

今回は、animation-name は、test1 としました。
ベンダ－プレフィクション -webkit- の出力が面倒です。
まずは、-webkit- ありで出力します。
$bezier['ic'] = 1 ならば、-webkit- ありで、transform:translate() 命令が出力されます。
出力すべき書式例は、
@-webkit-keyframes test1{
0%{
-webkit-transform:translate(**px,**px)
}
です。
0%{ ～～ }の書きぶりは
Bezier_3n($bezier[$i]);
として、$i を 1～ $bezier[1]['dv']（ここでは 4 ）まで変化させて
function Bezier_3n($bezier[$i])
を呼び出すことで実現できます。
これを PHP で表現すると、
echo"@-webkit-keyframes test1{";
for($i = 1; $i <= $bezier[1]['dv']; $i++){
Bezier_3n($bezier[$i]);
}
echo"}";
となります。

-webkit-なしで出力

今度は、transform:translate() 命令を -webkit- なしで出力します。
$bezier[$i]['ic'] ≠ 1 ならば、-webkit- なしで、transform:translate() 命令が出力されます。
今回は、 $bezier[$i]['ic'] = 0 としました。
よって、これを PHP で表現すると、
for($i = 1; $i <= $bezier[1]['dv']; $i++){
$bezier[$i]['ic'] = 0;
}
これで、'ic' => 0 にしましたので -webkit- なしで @keyframes を出力する準備が完了です。
このあと前項と同じように処理すれば、-webkit- なしで transform:translate() 命令を出力することができます。
echo"@keyframes test1{";
for($i = 1; $i <= $bezier[1]['dv']; $i++){
Bezier_3n($bezier[$i]);
}
echo"}";

複数３次ベジェ曲線アニメファンクションファイル作成に進む
複数３次ベジェ曲線アニメスタ－トファイル作成に戻る
複数３次ベジェ曲線アニメ作成概要に戻る