楕円運動アニメクラス
楕円運動アニメ本丸二階 ie/Chrome 個別継承クラス作成
ie/Chrome 個別継承クラスファイルを作成することにします。
まずは ie/Chrome 個別対応継承クラス class Oval_keyf extends Oval が何をするのか説明します。
画像を移動させるには、@keyframes を使って、パーセント値と座標指定をすればよかったはずです。
0%{
transform:translate(474px,237px);
}
のような書き方です。
でも、-webkit- なるやっかいものがいるのですよね。
ベンダ－プレフィクションを書くのは、面倒なだけですよね。
今回も面倒なことになっています。
今回の場合で言うと、$oval1['ic'] 及び $oval2['ic'] が IE と Chrome の区別
のためのパラメ－タをもっています。
これが 1 ならば、class Oval の中で、ベンダ－プレフィクション -webkit-
を書込んで出力するようにしています。
よって、最終的には例えば
プレフィクションありの時
0%{-webkit-transform:translate(405px,405px)}
プレフィクションなしの時
0%{transform:translate(405px,405px)}
のように出力します。
これが、ie/Chrome 個別対応継承クラス class Oval_keyf extends Oval の機能です。
楕円運動アニメクラス本丸二階個別継承クラスファイル内容
本丸二階個別対応継承クラスファイル内容は、Move Imageに戻り、
左サイドナビ｢楕円運動アニメクラス｣の中の
｢ 本丸二階個別継承クラス PHP ファイル｣
から見てください。
まず、Oval クラスを継承するために、cir_oval_cla.phpを読込みます。
require_once ('class/cir_oval_cla.php');
継承クラス名とファンクション定義
まず継承クラス名を宣言します。
class Oval_keyf extends Oval {･･････}
継承クラスの動作を {････} の中に記述します。
extends Oval は、このクラスは Oval クラスを継承していることを宣言しています。
次に継承クラス内のファンクションを定義します。
public
function Oval_keyf($oval){･･････}
このファンクションは継承クラスの外からも呼ばれますので public 宣言をします。
継承クラス function ファイル作成
継承クラス class Oval_keyf extends Oval {･･････}
の中にある
function Oval_keyf($oval){･･････}
部分を作成していきます。
Oval_keyf というクラスを呼び出されたとき処理すべき動作が
{････} の中に記述されています。
引数 $oval を渡されるとこれは連想配列なので、最初に必要な animation-name
を取出します。:
$this->_name = $oval['name'];
おっと、 $this-> ってなんだっけ！
クラス内ではメンバ変数を $this->_**** で定義するですよね。
クラス内でメンバ変数にアクセスするには"this"を使って
$this->_連想配列のインデックス名
今回の例では
$this->_name
のように記述します。
引数としてもらった変数をクラス内で使用するメンバ変数に置換えます。
すなわち
$this->_name = $oval['name'];
とすれば、$oval['name'] をクラス内で利用することができます。
-webkit-付き @keyframes を出力
ここで、echo 文で
echo"@-webkit-keyframes ".$this->_name."{";
と書くと
$oval['name'] = "test1"
だったとすると
@-webkit-keyframes test1{
と出力してくれます。
次に、最初はヌルだった $oval['ic'] を
$oval['ic'] = 1;
と置換えます。
このまま、インスタンスを作成します。
$keyfc = new Oval($oval);
(ここの動きは後述)とします。
引数 $oval を渡すので、クラス Oval さん処理してね、ということになります。
すると引続き
0%{-webkit-transform:translate(237px,0px);}
･･･････
のように書き出してくれます。
ここは、クラス Oval の動きがわからないと理解できません。
理解したい方は、Move Imageに戻り、
左サイドナビ｢楕円運動アニメクラス｣の中の
楕円運動アニメクラス本丸三階移動計算クラス
を見てください。
ここまでをまとめると出力は、
@-webkit-keyframes test1{
0%{-webkit-transform:translate(237px,0px);}
･･････
100%{-webkit-transform:translate(237px,0px);}
のようになります。
-webkit- なし @keyframes を出力
次に、1 だった $oval['ic'] を
$oval['ic'] = 0;
と置換えます。
このまま、インスタンスを作り直します。
$keyfc = new Oval($oval);
とします。
異なる引数 $oval を渡すので、クラス Oval さん処理してね、ということになります。
すると、引続き -webkit- なしで、
@keyframes test1{
0%{transform:translate(237px,0px);}
･･･････
のように書き出してくれます。
最後に、
echo"}"; とすると
}
が出力されます。
ここまでをまとめると出力は、
@keyframes test1{
0%{transform:translate(237px,0px);}
･･････
100%{transform:translate(237px,0px);}}
のようになります。
@keyframes 出力まとめ
-webkit- 有り無し @keyframes を出力をまとめると
@-webkit-keyframes test1{
0%{-webkit-transform:translate(237px,0px);}
･･････
100%{-webkit-transform:translate(237px,0px);}
@keyframes test1{
0%{transform:translate(237px,0px);}
･･････
100%{transform:translate(237px,0px);}}
となります。
楕円運動アニメクラス本丸三階 移動位置計算クラス に続く
楕円運動アニメクラス本丸 style sheet 設定ファイル作成-1 に戻る
楕円運動アニメクラス本丸 style sheet 設定ファイル作成-2 に戻る