楕円運動アニメ

楕円運動アニメ設定ファイル作成概要

どんな楕円運動軌跡を作成するのかおさらいします。
軌跡図のカンプをもう一度示します。

楕円運動アニメ設定ファイル作成

ファイル内容は、左サイドナビ｢楕円運動アニメ｣の中の
｢楕円運動アニメ設定 PHP ファイル｣
から見てください。
まずは、
include "oval_func.php";
で、楕円運動アニメ Function ファイルすなわち、楕円運動アニメのためのユ－ザ定義関数を呼び出します。

楕円運動アニメ Function ファイルの各定数設定

次に、楕円運動アニメのためのユ－ザ定義関数で使用する各定数を設定していきます。
上の軌跡図を見ながら考えていきましょう。

$r:半径 r

r = 237 pxですね、よって
$r = 237
となります。

$vy:楕円の傾斜角度

$drがマイナスの時、$vy ＋で時計方向、右肩下がりです。
今回は 45°右肩下がりとします。
よって、
$vy = 45
となります。

$v:スタート角度

時計盤で３時の位置からの仮スタ－トとします。
よって、$v = 0 とします。
ただ、実際は楕円の傾斜角度 45°右肩下がりを考慮する必要があります。
実スタ－トは３時の位置から 45°時計方向に進んだ位置からとなります。

$k:周る角度

一周させますので、$k=360 となります。

$n:分割数

分割数は15ぐらいで円に見えます。
大きいほど円に近づきます。
今回は、$n = 24
15°おきにしたいと思います。

楕円の中心座標

今回の楕円の中心座標は(237px,237px)です。
よって
$cx = 237
$cy = 237
となります。

楕円縦横比、時計まわり？

今回は、楕円縦横比 d は、0.75 横長、反時計回りに設定します。
よって
$dr = -0.75
とします。

transform:translate()命令を出力

今回は、animation-name は、test1 としました。
よって、
$name = "test1"
とします。
ベンダ－プレフィクション -webkit- の出力が面倒です。
まずは、-webkit- ありで出力します。
$ic = 1 ならば、-webkit- ありで、transform:translate() 命令が出力されます。
出力すべき書式例は、
@-webkit-keyframes test1{
0%{
-webkit-transform:translate(474px,237px)
}
です。
test1 は $name = "test1" で、
0%{ ～～ }の書きぶりは
oval($r,$v,$vy,$k,$n,$cx,$cy,$dr,1);
として
function oval($r,$v,$vy,$k,$n,$cx,$cy,$dr,$ic)
を呼び出すことで実現できます。
これを PHP で表現すると、
echo"@-webkit-keyframes ".$name."{";
oval($r,$v,$vy,$k,$n,$cx,$cy,$dr,1);
echo"}";
となります。

-webkit-なしで出力

今度は、transform:translate()命令を-webkit-なしで出力します。
$ic≠１ならば、-webkit- なしで、transform:translate() 命令が出力されます。
この場合は、$ic=0 としました。
よって、これを PHP で表現すると、
echo"@keyframes ".$name."{";
oval($r,$v,$vy,$k,$n,$cx,$cy,$dr,0);
echo"}";
となります。

楕円運動アニメ確認に進む
楕円運動アニメFunctionファイル作成に戻る
楕円運動アニメ初期ファイル作成に戻る
楕円運動アニメ作成概要に戻るく