要素の回転速度を変更したときの挙動

Question

こちらのQiitaのサイトのようにある要素を回転させていく中で回転スピードを変更したいと思っています。
スピードの変更はできるのですが、変更が発生するたびに一旦回転角度がリセット(開始位置に戻る)されて回転動作がスムーズに見えなくなっています。
例えば、風車のように風の強弱で回転スピードが変わるように、速度値の上げ下げによって、そのときの角度を保ったまま速度を変えるにはゴリゴリにコードを書かなければ実装できないのでしょうか？

もし、そのような実装を経験された方がいましたらご教示していただけたらありがたいです。

-----訂正です。
一旦回転角度がリセット(開始位置に戻る)と思っていたのですが勘違いでした。
不特定の角度に進んだり戻ったりしているようです。

    .squareBox {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        margin-top: 50px;
        margin-left: 50px;
        animation-name: rotate;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-duration: 0s;
    } 
    @keyframes rotate{
            0% { transform: rotate(  0deg); }
          100% { transform: rotate(360deg); }
    }

    $(function () {
        $("#speedNum").change(function () { // スピードの設定
            $("#speedChange").text($("#speedNum").val());
        });

        $("#speedChange").click(function () {   // スピード反映
            var spnum = $("#speedNum").val();
            $(".squareBox").css('animation-duration', spnum + 's');
            $(".squareBox").text(spnum);
        });
    });

        <div class="squareBox">15</div>
        <input type="range" name="speedNum" id="speedNum" max="30" min="0" step="1" value="15" />
        <button type="button" id="speedChange">speed</button>

結局、これを実現するにはjavascriptを書かなければできないと判りました。

Comments

[spookybird]

css animation で作って一時停止したり個別にプロパティ変更してなんとかならないもんかとやってはみたものの一筋縄ではいきませんでした。非常に悔しい。

Answer 1

いろいろと試行錯誤してみたのですが、ノードの入れ替えをしないとどうしてもうまくいかず、スムーズに動かすためにこのような形になってしまいました。

<div class="squareBox"></div>
<input type="range" name="speedNum" id="speedNum" max="30" min="1" step="1" value="30" />
<button type="button" id="speedChange">speed</button>

$("#speedChange").on('click', function(event) {
    var spnum = parseFloat($("#speedNum").val());
    const matrix = getComputedStyle(document.querySelector('.squareBox')).transform.match(/[-\d.]+[^d]/g);
    let rad = Math.atan2(parseFloat(matrix[1]), parseFloat(matrix[0]));
    if (rad < 0) { rad += Math.PI * 2; }
    const d = - spnum * rad / (Math.PI * 2);
    $('.squareBox').replaceWith($('.squareBox').clone(false));
    $('.squareBox').css('animation', 'rotate ' + spnum.toString() + 's linear ' + d.toString() + 's both infinite');
});

animetionのkeyframesを途中から再生したい
https://teratail.com/questions/9518

-- 追記。念のため、CSSも書いておきます。

.squareBox {
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top: 50px;
    margin-left: 50px;
    background-color: aqua;
    animation: rotate 30s linear both infinite;
}

@keyframes rotate {
    100% { transform: rotateZ(360deg); }
}

Comments

[XCUBE]

試行錯誤までしていただきありがとうございます。
コピペさせていただいてやってみたのですが、動作しませんでした(*_*)

多分、何か足りなかったんだと思いますが、もともと勘違いしていたことがあったり、edge、ieではそもそもスピードを変えても回転速度が変化しないようですので、cssを変更するやり方だけですと不十分だと判りましたので、もう一度じっくり考えたいと思います。

[x_x]

環境がなかったためEdgeでの確認はしていませんが、IE11での確認はとっています。
この処理の不安なところはgetComputedStyle()で取った値を文字列処理しているところですが、変数matrixの値を出力してみて値が取れているか確認してみてはどうでしょうか？

[s8_chu]

横から失礼します。

XCUBEさん>
質問文のコードを見ると、`animation-duration`プロパティの値が`0s`になっていますが、x_xさんの回答のコードを試すとき、これは他の値になっていますか？
`animation-duration`プロパティの値が`0s`の場合、アニメーションが行われないため、`transform`プロパティの値は`none`となり、エラーが発生すると思います。

[x_x]

s8_chu さんのコメントで気づきましたが、コードを出したのですね。
通知なしで更新されても気づきませんよ

[XCUBE]

s8_chuさん>
0にして停止している状態からanimation-durationを変えてみての動作と回転速度の変化を確認したかったのです。
回転速度の変化の中で停止している状態も考慮したためでした。
ご指摘ありがとうございます。

x_xさん>
通知のチェックはついたままにしたつもりだったのですが、チェックが外れてしまっていたかもしれません。
すいません。

[XCUBE]

x_xさん
cssの追加ありがとうございます。動作しました。
0sで停止も確認できました。理想的に動作しています。

試しにx_xさんの書いたものを私の書いたanimation-durationだけを書き換える方法に変えてみたのですが、
速度が変化したときに一旦不特定の角度に進んだり戻ったりして状況は元に戻りました。
なぜ、このような違いがあるのか不明ですが、改めてx_xさんの書いたものをよく調べさせていただこうと思います。

ありがとうございました。助かりました。

[XCUBE]

わかりました。animation-delayを計算していたのですね。
大変勉強になりました。

Answer 2

そうなりますね……

ただ、CSSアニメーションが完了したという情報はJSで検知出来ますので、
「次の回転から速くする」で妥協しても良ければ少ないコードで実現出来そうです。
https://qiita.com/chocodoughnut/items/6d4ae296b7c1494a858d

Comments

[XCUBE]

ご回答ありがとうございます。
いろいろと悩んでみて難しいと判断したときはご提案いただいた"妥協"をさせていただきたいと思います。