はじめに

フライウィール三部作、完結編です。

こんにちは、エンジニアのハヤサカです。

私はこれまで、「FLYWHEELって、なに?」にてフライウィールとはそもそも何かをご紹介し、「フライウィールを回してフライウィールを回る」にて現実世界でフライウィールを動かしてみました。

今回はとてもシンプルに、「この画面上(ブラウザ上)でフライウィールの画像を回転させまくろう!」というものです。ここで「フライウィールの画像」を何にしようか迷ったのですが、前回と同じく今回も弊社フライウィールのロゴを使用させていただきます。

なお、ブラウザの環境によっては正しく動かないことがあります。以下の環境でのみ動作確認しておりますことをご了承ください。

  • Chrome 71.0.3578.98
  • Safari 11.1.1 (13605.2.8)
  • Firefox 64.0
  • Edge 42.17134.1.0
  • Vivaldi 2.2.1388.37

CSS

とりあえずは定番から参りましょう。CSSでアニメーションを指定して回してみます!

.html

.css

Demo

JavaScript

css を直接指定できず、 JavaScript から style をいじるほうが楽な時、あると思います。特にライブラリ等を使わず書いてみました(所謂 Vanilla JS )。

.html

.js

Demo


Canvas (+ JavaScript)

人生は長いものです。CSS にも style にも手が届かない、けど canvas は手元にある!という時がくるかもしれません。そんな「もしも」のために備えましょう。

.html

.js

Demo


GIF

一切 html / css / js をいじることができない!という未来もあり得ます。そんな時は過去に立ち返りましょう。今こそ、「アニメーション GIF」 という素晴らしい武器があったことを思い出すのです。ImageMagick をインストールし、 convert コマンドを使って回転アニメーションGIFを作ってみましょう。

.sh

Demo

おまけ

最後におまけとして、とある回し損ねていた箇所を回せるような仕掛けをしたリンクを置いておきます。さて、クリックするとどこが回るでしょうか?

クリックして回転スタート!

ではみなさん、フライウィールと共にあらんことを。 Happy Holidays!

著者

ハヤサカトモユキ

ソフトウェアエンジニア。2018年よりFLYWHEELに参加。以前は Google Japan にてGoogle PlayのカスタマーサポートシステムやGoogle Mapsのクライアントアプリの開発に従事。2018年よりFLYWHEELに参加。フライウィールネタはもう一生分書いたのではないか、と真剣に考えているところ。