回転しつつ同一方向を保つ動画

全体画像が回転しているのに画像の一部を静止状態に保つ方法があります。車において停止中なのに車のホイールが回り続けて見えるスピナーホイール、逆に走行中なのにホイールが停まって見えるフローターホイールが市販されています。車検に抵触するかどうかは当方ではわかりません。

ここでは車から離れて画像をアニメーションして広告で目を惹く方法をまとめています。そのなかで公転中に自転させ同一方向を保つ動作について解析しています。

Result

動作の概要

動作を動画で説明します。図に示したように車のタイヤに見立てた大円が2回転するうち、1回転目、6個の文字はタイヤに張り付けられたように逆さになりますが、2回転目には常に上向きになり読みやすい状態になります。回転は2つあるので公転は黒、自転は赤で示されます。自転は途中から始まり、中央の経過番号の色で文字の回転状態を知ることができます。

ブラウザによりロードされたプログラムは当初、中央に「平和の鳩マーク」が、周辺には「✿新機軸事業」が表示されます。次に経過番号が1から順に8まで表示され、1～4の間、周辺のテキストは大円に張り付けられたように逆さになります。5～8の間はみずから左回りに自転するので常に上向きに表示されます。経過番号は1～4の間は黒、5～8の間は赤色になります。大円の回転開始時、公転（右回転）、周辺文字の回転開始時、自転（左回転）が表示されます。

表現の仕組み

回転しつつ一部の小画像を同一方向に保つには、全体が右回転する場合、配置された小画像の真ん中を中心点に同じ速度で左回転させます。すると両者の相対関係から小画像の自転が停まったように元の向きを保持し続けます。全体が左回転する場合には小画像の回転方向は逆になります。公転速度が等速回転でない場合は、公転速度に同期した自転速度にすれば同じ効果が得られます。

プログラミングでできること

プログラミングには以下の機能が網羅されています。

・Svg（Scalable Vector Graphics[スケーラブル・ベクター・グラフィックス]）の基本的な使い方
・Svgにより正葉曲線の描き方
・画像を描画したり消去する方法
・アニメーションを開始・停止する
・アニメーションイベントの使い方
・アニメーション回転と回転中心の設定方法
・アニメーションや表示を途中から開始・停止する方法
・複数のアニメーションを同期させる方法
・アニメーションの色や線の太さなどを複数、一気に変更する方法
・回転を公転しつつ自転させる方法
・画像や文字を重ね合わせて表示する方法
・Svgをdivでラップして中央寄せにする方法
・表示文字を順番に変更する方法
・デバッグコードの参考例

サンプルコードが動作する環境

HTML5を読み込んで動作するブラウザを用意します。
主要ブラウザ
❶Google Chrome
❷Edge
❸Opera
❹FireFox

余談

ここで紹介した動きは大観覧車のゴンドラが最上部に達しても利用者が逆さになることもなく、周辺の眺望を楽しむ様に似ています。まだ実際に見たことはありませんが、タイヤにキャッチコピーを貼り付けて広報活動に利用している人々がいるそうです。柔らかな頭脳を回転させ「奇妙な回転」を新しいビジネスに応用してはいかがでしょう。

プログラミングコード

プログラミングコードはHTMLで記述され、CSS, html, JaveScriptがひとつにまとめられていて、自分のローカル環境にhtmlファイルとして保存しブラウザを用いて実行させることができます。
以下がプログラミングコード（テキストイメージ）です。
*********************************************************************************