【ツール】リズミカルkeyframeアニメーション生成

　どうも！LSSです！！

にて、リズミカルに動くkeyframesアニメーションを作ってみました。

ただ、手順が結構煩雑で、

によって%の割合だけは算出したものの「手間がかかる＆分かりづらい」ものとなっており、新たなリズムを作ろうとするとかなり大変そうです。

そこで、今回はポチポチとクリックするだけでkeyframes指定を含むコードを生成するツールを作ってみました！

リズミカルkeyframeアニメーション生成

生成されたコード

画面上に、

が並んでいます。

このうち「0～64の数字が入った65個のマス」をクリックで操作します。

この「0」から「64」までの数値は時系列をあらわしています。

クリックすると、マスの色が「灰→緑→黄→灰→緑→黄→…」と変化します。

それぞれの色の意味は、

を意味します。

最初の状態は、0が緑、1が黄、2と3が灰、4が緑…となっているので、
「最初に着地状態から跳ね上がり、ゆるやかに着地する」
動きとなっています。

また、その動きの全体の様子が、波線で描かれています。

この状態は「たん、たん、たん、たん…」という単調なリズムの動きですが、例えばここから「2を緑、3を黄にクリックで変更」したとすると、

↑のように、波線も同時に変化し「最初の2回は早く跳ねる」、つまり「たたたん、たん、たん…」というリズムの動きになります。

また「このような動きになります」の文字も、新たに設定された動きになります。

こうして、0～65のマスをポチポチクリックする事で、お好みのリズムのアニメーションを作成できます。

気に入った動きが完成したら「生成されたコード」のグレーの枠内のコード（こちらもポチポチに合わせて都度生成されています）をコピーして、貴方のブログやWebサイトのHTMLに貼り付ける事で使用できます。

「このような動きになります」の文言は自由に書き換えてください。

↑のように設定すると、「たんたたたんたたたんたたたんたん」を繰り返す、フラメンコのようなリズムになります。

↑のように設定すると、「たたたんたたたんたたたんたん」を繰り返します。
三本締めのリズムですねｗ（三本じゃ済まないですが）

↑こうすると…波線の形からもお分かりいただけるかと思いますが「三々七拍子」になります。

今回のツールでは全体の再生速度設定はつけていません。

が、生成されたコード中に

animation:rzma 10s linear infinite;

という箇所があるので、この「10s」の数値を小さくすると速く、大きくすると遅い動きに変更できます。

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^