調整がスムーズになったCSSプログレスバー

Question

時々jsから調整する必要があるカウントダウンバーを作成しています。 currentTimeを直接設定することはあまりにも激しいです - 私は新しい価値に移行したいと思います。私はplaybackRateを悪用して新しい場所にすばやくジャンプする作業プロトタイプを持っていますが、それはハッキーであり、イージングのような見事な動きは許されません。同様の効果を得るためのよりよい方法はありますか？

https://jsfiddle.net/isaacly/byac2gqe

var totalClockMs = 6000; // set this to "total" clock time. 
 
var transitionMs = 100; 
 

 
var anim = document.getElementsByClassName("progress")[0].animate(
 
    [ 
 
    { transform: 'scaleX(1)' }, 
 
    { transform: 'scaleX(0)' } 
 
    ], { 
 
    duration: totalClockMs, 
 
    fill: "both" 
 
    } 
 
); 
 
anim.pause(); 
 

 
var i = 1; 
 
var desired; 
 
var callback; 
 
var callbackFn; 
 
$('#change').click(function() { 
 
    if (i++ % 2 === 0) { 
 
    anim.pause(); 
 
    var current = anim.currentTime; 
 
    // Example of setting bar after move finishes, in this case adding 500ms. 
 
    anim.playbackRate = -500/transitionMs; 
 
    anim.play(); 
 
    callbackFn =() => { 
 
     //console.log(current - 500 - anim.currentTime); 
 
     callback = undefined; 
 
     anim.pause(); 
 
     anim.currentTime = current - 500; 
 
     anim.playbackRate = 1; 
 
    }; 
 
    callback = setTimeout(callbackFn, transitionMs); 
 
    } else { 
 
    if (callback !== undefined) { 
 
     clearTimeout(callback); 
 
     callbackFn(); 
 
    } 
 
    anim.play(); 
 
    } 
 
});

.progress-bar { 
 
    height: 10px; 
 
    background-color: #e5e9eb; 
 
} 
 

 
.progress { 
 
    background-color: #90ee90; 
 
    height: 100%; 
 
    transform-origin: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress-bar"> 
 
    <div class="progress"> 
 
    </div> 
 
</div> 
 
<br /> 
 
<button id="change">Pause/Play</button>

Answer 1

たぶん、あなたはCSSトランジションとのsetInterval関数を使用して試すことができます。アイデアは、ジャンプを避けるようにボタンを押すとアニメーションを停止することです。あなたはまた、step値やCSSの遷移特性の時間を減少/増加させることにより、アニメーションの速度を制御することができ

UPDATE

：ここ

は簡単な例です。

var step=5; 
 
var tran=0.3; 
 
var run=0; 
 

 
function speed_control() { 
 
    step+=10; 
 
    $('.progress').css('transition',(tran++)+'s'); 
 
} 
 

 
$('#change').click(function() { 
 
    run=(run+1)%2; 
 
    speed_control(); 
 
}); 
 

 
setInterval(function(){ 
 
    if(run) { 
 
    $('.progress').css('right','+='+step+'px'); 
 
    } 
 
}, 300);

.progress-bar { 
 
    height: 10px; 
 
    background-color: #e5e9eb; 
 
    position:relative; 
 
} 
 

 
.progress { 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    left:0; 
 
    bottom:0; 
 
    background-color: #90ee90; 
 
    transition:0.3s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress-bar"> 
 
    <div class="progress"> 
 
    </div> 
 
</div> 
 
<br /> 
 
<button id="change">Pause/Play</button>