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

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

３次ベジェ曲線アニメクラス継承 class ファイル
bez_cls_ex.php
を作成していきます。
基本的には、
Move Image に戻り左サイドナビ｢複数３次ベジェ曲線アニメ｣の中の
｢複数３次ベジェ曲線アニメ設定 PHP ファイル｣
の後半部分を参考にします。
これから作成する継承クラスファイルの内容は、左サイドナビ｢３次ベジェ曲線アニメ｣の中の
３次ベジェ曲線アニメクラス継承 class PHP ﾌｧｲﾙ
をみてください。
クラス名は Bez_keyf とします。
これからその内容について説明します。

クラス Bezier_3n を継承

まず、クラス Bezier_3n (移動位置を計算する基本クラス) を継承するために、 bez_cla.phpを読込みます。
require_once ('bez_cla.php');
次ぎに自分のクラス名 Bez_keyf と継承元のクラス名 Bezier_3n を宣言、
class Bez_keyf extends Bezier_3n{
さらに、クラス内で使用する各変数をクラス外からアクセスできないように private 宣言します。
private $wekey;
private $j;
private $i;
private $bez;
private $bezier;
そして、
public function Bez_keyf($bezier){～～}
の{～～}の部分に、その実行すべきプログラム内容を記述します。

@keyframes 命令を出力

ベンダ－プレフィクション -webkit- の出力が面倒です。
まずは、-webkit- なしで出力します。
すなわち $j = 0 とします。
animation-name は、
引数 $bezier[0]['name']
の中に設定されています。
今回は、test1 か又は、test2 です。
test1 を例にとると
$j = 0 のとき
$wekey = "@keyframes" とし
echo $wekey . $bezier[0]['name']."{";
とすると、@keyframes test1{
と出力されます。
その後に、$bezier['ic'] = 0 すなわち、
$j は最初は 0 ですので、
$bezier[$i]['ic'] = $j;
として、-webkit- なしで、 transform:translate( ) 命令を出力します。
出力すべき書式例は、
@keyframes test1{
0%{
transform:translate(**px,**px)
}}
です。
0%{ ～～ }の書きぶりは
$bez = new Bezier_3n($bezier[$i]); として、$i を 1～ $bezier[0]['dv']（ここでは 4 又は 1 ）まで変化させて
Bezier_3n クラスを呼び出すことで実現できます。
これを PHP で表現すると、

  echo $wekey .
    $bezier[0]['name']. "{";
  for
   ($i=1;$i<=$bezier[0]['dv'];$i++)
  {
   $bezier[$i]['ic'] = $j;
   $bezier[$i]['dv'] =
     $bezier[0]['dv'];
   $bez =
     new Bezier_3n($bezier[$i]);
  }
  echo"}";

となります。

-webkit-ありで出力

今度は、transform:translate( ) 命令を -webkit- ありで出力します。
$j = 1 のとき
$wekey = "-webkit-@keyframes" とし
echo $wekey . $bezier[0]['name']."{";
とすると、-webkit-@keyframes test1{
と出力されます。
このあとに引き続き出力すべき書式例は、
-webkit-@keyframes test1{
0%{
-webkit-transform:translate(**px,**px)
}}
です。
0%{ ～～ }の書きぶりは
$bez = new Bezier_3n($bezier[$i]);
として、$i を 1～ $bezier[0]['dv']（ここでは 4 又は 1 ）まで変化させて
Bezier_3n クラスを呼び出すことで実現できます。
$j は、0,1 と変化しますので、
$bezier[$i]['ic'] = $j = 1 ならば、
-webkit- ありで、transform:translate( ) 命令が出力されます。
よって、今度は
@-webkit-keyframes test1{
0%{
-webkit-transform:translate(**px,**px)
}}
と出力されます。

これで、３次ベジェ曲線アニメクラス継承 class ファイルの説明は終わりです。
引き続き、３次ベジェ曲線アニメクラス class ファイル作成に進みます。

３次ベジェ曲線アニメクラス class ファイル作成に進む
３次ベジェ曲線アニメクラス設定ファイルに戻る
３次ベジェ曲線アニメクラススタ－トファイル作成に戻る
３次ベジェ曲線アニメクラス作成概要に戻る

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