３次ベジェ曲線アニメ

３次ベジェ曲線アニメスタ－トファイル作成

３次ベジェ曲線アニメスタ－トファイル 3_bezier_index0.php
を作成することにします。
ファイルは至って簡単です。
ファイル内容は、 Move Image に戻り左サイドナビ｢３次ベジェ曲線アニメ｣の中の
３次ベジェ曲線アニメｽﾀ-ﾄ PHP ﾌｧｲﾙ
から見てください。

viewport 追加

iPhone やスマートフォンでサイトを表示させると、字や画像が小さくなってしまいます。
これを防止するため最初の方の行で、meta タグの viewport 指定をします。
あまり追加したくないですが Google さんが追加しろしろとうるさいので追加します。
作法は、
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
沢山の方が機械的に入れている基本形です。
これなら、ユーザーがズームできるし、最近のスマートフォンでは表示も適切です。
ただ、iOS 5 以前では、画面を横向きにするとページが拡大されるという問題があったようです。
現状は、iOS 9 になっているので、みなさんこの問題は無視しているようです。
width で指定しているのが viewport の幅です。
width = device-width としているので、viewport の幅は表示デバイスの幅に設定されます。
ブラウザは、ウェブページを表示する前にウェブページを viewport の大きさに合わせてレンダリング(表示準備)します。
ここでは、initial-scale = 0.5 と指定していますので、レンダリングした結果を、デフォルトでは viewport の幅がブラウザウィンドウの幅の 1/2 に合うように縮小して表示します。

スタイルの読込

アニメ軌道のスタイルシ－トは PHP を利用して書込みます。
<?php
include "3_bezier0.php";
?>
スタイルシ－トは、3_bezier0.php を読出せばこれによって作成されます。
3_bezier0.php ファイルの説明は後述します。

DIV 作成

アニメ軌道を作ります。
<div id="object1"></div>
"object1"の軌道 DIV を作り、この軌道に沿って画像を移動します。
これで、
３次ベジェ曲線アニメスタ－ト PHP ファイル
3_bezier_index0.php
は作成完了です。
とてもシンプルです。

３次ベジェ曲線アニメスタ－ト CSS ファイル作成

３次ベジェ曲線アニメスタ－トCSSファイル bezier_style.css
を作成します。
ファイル内容は、 Move Image に戻り左サイドナビ｢３次ベジェ曲線アニメ｣の中の
３次ベジェ曲線アニメスタ－ト CSS ﾌｧｲﾙ
から見てください。
アニメ－ション CSS を作成するには、CSS3 で記述する必要があります。
HTML5/CSS3 で初めて出てきた書式 @keyframes で動く軌跡を規定します。
しかしながら、今回はこの部分はこの CSS ファイルでは規定せず、3_bezier0.php で設定しています。
よって、このCSS ファイルでは、@keyframes 部分は書かず、その他の必要部分を記述します。

-webkit- はなぜ必要

-webkit-animation- と -animation- は全く同じものです。
なぜ２つも同じことを書く必要があるのか？
ベンダ－プレフィクションを書くのは、面倒なだけですよね。
ここが、HTML5/CSS3の発展途上の問題点です。
･･･現状は、-animation- を認識できるのは、Internet Explorer、Mozilla Firefox だけです。
他のブラウザ、Google Chrome、Opera は、-webkit-animation- しか認識できないのです。
もう少し時間がたてば、-webkit-animation- は必要なくなると思うのですが･･･
と今までは考えていたのですが、Google Chrome、Opera は改版されていて、現在は｢-webkit-｣なしで動くようです。
Safari は Windows 版は改版停止になっているので、これはあきらめるとして、後は、Android と iOS9 が｢-webkit-なし｣に対応しているとすれば、もう、｢-webkit-なし｣で行くのもいいかなと思ってはいるのですが確認できていません。
困ったものです。

animation プロパティ

animation-name

@keyframesで定義した名前と同じにします。
今回は、test1 としました。

animation-duration

アニメーション一回分の時間の長さ(秒)を指定します。
今回は 10s としました。

animation-timing-function

アニメーションが継続している際に、そのアニメーションの進行速度の割合を変更して調整することで動きを滑らかにすることができます。
これは一般的にイージング機能と呼ばれるものです。

ease（初期値）

開始と完了を滑らかにする
linear（一定）
ease-in（ゆっくり始まる）
ease-out（ゆっくり終わる）
ease-in-out

（ゆっくり始まってゆっくり終わる）

等が指定できます。
今回は linear としました。

animation-iteration-count

アニメーションの繰り返し回数を指定します。
初期値は、１でアニメーションが開始から終了まで一回再生されます。
値にinfiniteを指定すると、アニメーションの再生を無限に繰り返します。
値に整数以外の数値を指定すると、再生サイクルの途中でアニメーションが終了します。
今回は infinite としました。

animation-delay

アニメーションの開始を遅らせる時間を指定します。
初期値は、０でアニメーションがすぐに実行されます。今回は、０（初期値指定なし）としました。

animation-fill-mode

基本定義は次の通りです。

none：（デフォルト）

アニメーションで指定されたスタイルは、アニメーションの実行前や実行後には適用されない。
forwards：

アニメーションの最後に適用されたキーフレームの指定によって計算された値を維持。
通常「100%」か「to」のキーフレーム。
backwards：

「0%」または「from」キーフレームで定義された値を即座に適用。
なおかつ、animation-delayプロパティで指定した時間の間もその状態を維持する。
both：

forwards と backwards の両方の規定に従う。
よって、アニメーションの設定は実行前と実行後の両方に適用。

これでは何を言っているのかわかりません。
具体的に説明すると
animation-delayによりアニメーションが遅延されている場合はアニメーションが実行されるまでの時間、そしてアニメーションが終了したあとの状態をどのようにするかが指定できます。
animation-fill-mode:none だとファイルの読込みに時間がかかると、画像が一旦予期せぬ位置に表示されます。
これを防ぐことができます。
例えば、animation-fill-mode:both にすると画像がスタ－ト位置で待っていてくれます。

position 指定

position 指定がやっかいです。
動くイメ－ジが同じ位置関係で表示される必要があります。
よって、absolute 指定にする必要があります。

動かす画像の大きさの指定

画像の大きさは、
width:125px;
height:125px;
としました。

３次ベジェ曲線アニメ設定ファイルに続く
３次ベジェ曲線の原理に戻る
３次ベジェ曲線アニメ作成概要に戻る