CSSだけで実現
表題について当ブログでは何度も取り上げましたが、今回はJavaScriptを使わないでcssだけで実現しています。月は自転しながら地球の回りを公転していますが両者の回転の関係で月の裏側を目で見ることができません。先般、ある国で人工衛星で撮影した「月の裏側映像」が公開されたように記憶しています。
今まで発表した公転と自転の動きはJavaScriptによる働きが大きかったですが、cssのanimation機能を使ってシンプルに実現できました。
JavaScriptにanimationiterationの終了イベントを捉えて簡単な操作から複雑な制御まで可能になると踏んだのですが、何度か動作を繰り返すうちに、不思議な動作が発見されて今回の公開は見送りになりました。
今回は、HTMLとcssにより、公転と自転を確認しました。アニメーションの動作プログラミングは豊富な経験とは言い難いですが、複数のanimationを組み合わせても期待した動作になりました。人命に関わるような制御に対してcssによる信頼性はデータ不足です。天体の動作を解説するような利用方法に応用できるでしょう。
動作例
ここで示した動作は大円が時計回りに2周しますが5個の小円は、大円の1周目は大円に同期して反時計方向に自転するので公転と自転が相殺されて常に下向きになります。大円の2周目において、5個の小円の自転は停止しているので小円の動きは大円と一体です。
『公転と自転』の文字は次第に傾き始め1.5周では真っ逆さまになり2周終了に近づくにしたがって正常な向きになります。アニメーションはゲームのような動きを単に処理すると考えていましたが精密な動作にも向いています。
実演
再実行にはブラウザのロードボタンを押します。
サンプルコード
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#all03 { /* 全体（大円） */
animation: kf0 12s linear 1 forwards; /* 大円を事実上2回転させる、小円とはdurationを個別に設定して同期する アニメーションを最後の状態で停止させる(animation-fill-mode) */
}
#rota0,#rota1,#rota2,#rota3,#rota4 { /* 小円 */
animation: kf1 6s linear 1 reverse; /* animation, reverseは大円の回転方向と逆にする指定 */
}
@keyframes kf0 { /* 公転に用いる */
0% { transform:rotate(0deg); fill:palegreen; }
100% { transform:rotate(720deg); fill:hotpink; } /* 大円を事実上2回転させるために720 */
}
@keyframes kf1 { /* 自転に用いる */
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } /* 大円の1回転中のみ回転 */
}
@keyframes fadein {0%{opacity:0;}100%{opacity:1;}} /* 後でメッセージが飛び出す */
</style>
</head>
<Div style="position:relative; position:absolute; top:50%; left:50%; margin-right:-50%; transform:translate(-50%, -50%); width:560px; height:560px; border:0px solid blue;">
<svg xmlns="http://www.w3.org/2000/svg" width="560" height="560">
<g id="all03" style="transform-origin:50% 50%; stroke:blue; font-size:48px; font-family:'Arial'">
<circle id="hypo0" cx="280" cy="280" r="279" stroke-width="2" style="stroke:darkcyan; fill:ivory;"/>
<line id="xaxis" x1="0" y1="280" x2="560" y2="280" stroke-width="1" stroke="deeppink"/>
<line id="yaxis" x1="280" y1="0" x2="280" y2="560" stroke-width="1" stroke="blue"/>
<g id="rota0" style="transform-origin: 80px 220px;">
<circle id="circ0" cx="80" cy="220" r="50" stroke-width="1"/>
<text id="txt02" x="58" y="242">公</text> <!-- 58=80-24+2 242=220+24-2 -->
</g>
<g id="rota1" style="transform-origin: 180px 280px;">
<circle id="circ1" cx="180" cy="280" r="50" stroke-width="1"/>
<text id="txt02" x="158" y="302">転</text> <!-- 158=180-24+2 302=280+24-2 -->
</g>
<g id="rota2" style="transform-origin: 280px 340px;">
<circle id="circ2" cx="280" cy="340" r="50" stroke-width="1"/>
<text id="txt02" x="258" y="362">と</text> <!-- 258=280-24+2 362=340+24-2 -->
</g>
<g id="rota3" style="transform-origin: 380px 280px;">
<circle id="circ0" cx="380" cy="280" r="50" stroke-width="1"/>
<text id="txt02" x="358" y="302">自</text> <!-- 358=380-24+2 302=280+24-2 -->
</g>
<g id="rota4" style="transform-origin: 480px 220px;">
<circle id="circ1" cx="480" cy="220" r="50" stroke-width="1"/>
<text id="txt02" x="458" y="242">転</text> <!-- 458=480-24+2 242=220+24-2 -->
</g>
</g>
<text id="credit" x="247" y="552" font-size="9" style="animation:fadein 4s cubic-bezier(0.33, 1, 0.68, 1) forwards 8s; opacity:0;">©TacM 2024,V0.10</text>
</svg>
</Div>
</html>
考察
小円内の文字が途中から逆さになってやがて平常状態に向き直る様をご確認ください。時間を設定する単位はミリ秒です。このことから推察すればミリ秒の精度で制御可能なシステム作りが可能と思われます。