如何在 animation 運行時更改元素的動畫關鍵幀？

Question

我有一個小的鼠標速度檢測器（遠非完美），它在變量window.mouseSpeed.t中每 100 毫秒為我提供當前鼠標速度。 我實現它只是因為我想在屏幕的底部邊緣有一個有趣的 animation，它有一個隨着速度提高而增長並隨着速度降低而縮小的條。 我希望它使用Element.animate()進行動畫處理。
唯一的問題是：如何在 animation 運行時更改Animation的結束關鍵幀（我只給出結束幀，以便瀏覽器將當前狀態假定為第一幀）？
我想實現酒吧平滑地改變它的長度。

 // The code I want to have animated is below this function. // Mouse speed tracker (I hope this isn't too horrible code): document.addEventListener('DOMContentLoaded', mausgeschwindigkeitVerfolgen, {once:true}); function mausgeschwindigkeitVerfolgen() { // "Mausgeschwindigkeit verfolgen" means "track mouse speed" in German var speedX = NaN; var speedY = NaN; var posX = NaN; var posY = NaN; var speed = NaN; document.addEventListener("mousemove", function(ev){ speedX += Math.abs(ev.movementX); speedY += Math.abs(ev.movementY); speed = 10*Math.sqrt(ev.movementX**2+ev.movementY**2); window.mousePosition = {x:posX = ev.clientX,y:posY = ev.clientY}; }, false); setInterval(function(){ [window.mouseSpeed, window.mousePosition] = [{x:speedX,y:speedY,t:speed}, {x:posX,y:posY}]; // Werte in window.mouseSpeed und window.mouseDistance speichern speed = totalX = totalY = 0; }, 100); window.mausgeschwindigkeitVerfolgen = () => {return {speed:window.mouseSpeed, pos:window.mousePosition};}; return {speed:window.mouseSpeed, pos:window.mousePosition}; } // --- This is the code I want to have animated: --- setInterval(() => { document.querySelector('div#mouseSpeedIndicator').style.width = window.mouseSpeed.t+'px'; //document.querySelector('div#mouseSpeedIndicator').animate({width:'0px'}, {duration:1000,iterations:1}); // This just keeps the bar at width 0, I want it to slowly change to any newly set width }, 100);

 div#mouseSpeedIndicator { position: fixed; bottom: 0px; left: 0px; height: 33px; background-color: green; max-width: 100vh; border: 0px solid green; border-top-right-radius: 10px; }

 <!-- What I currently have --> <div id="mouseSpeedIndicator"></div>

Answer 1

首先，像transition CSS 屬性的額外一行一樣簡單，例如...

transition: width 1s ease-out;

...已經完成了工作； 不需要更多基於 JavaScript 的計算和 DOM 操作。

但是由於 OP 的腳本可以大大簡化，甚至可以不支持外部輔助方法，如throttle （ lodash _.throttle或underscorejs _.throttle ），后者將創建傳遞的 function 的延遲執行版本，用於OP 的示例腳本是'mousemove'處理程序。

這個處理程序在被限制（甚至沒有被限制）之前可以被創建為function 的綁定版本，它實際上計算speed值並更新指示器節點的外觀。

 function handleMouseSpeedIndicatorUpdateFromBoundData(evt) { const { movementX, movementY } = evt; const { rootNode, timeoutId } = this; // prevent indicator nullification at time. clearTimeout(timeoutId); // compute `speed`. const speed = 10 * Math.sqrt(movementX**2 + movementY**2); // update indicator appearance. rootNode.style.width = `${ speed }px`; // trigger delayed indicator nullification. this.timeoutId = setTimeout(() => rootNode.style.width = 0, 110); } function initialzeMouseSpeedIndicator() { document.addEventListener( 'mousemove', // create throttled version of the just created bound handler. _.throttle( // create handler function with bound contextual data. handleMouseSpeedIndicatorUpdateFromBoundData.bind({ rootNode: document.querySelector('#mouseSpeedIndicator'), timeoutId: null, }), 100 ), false ); } // - no need for `'DOMContentLoaded'` // in order to initialize the indicator. initialzeMouseSpeedIndicator();

 div#mouseSpeedIndicator { position: fixed; top: 0px; left: 0px; height: 33px; background-color: green; max-width: 100vh; border: 0px solid green; border-bottom-right-radius: 10px; /* proposed change(s) */ transition: width 1s ease-out; /* transition: width.5s ease-in; */ /* transition: width.5s ease-in-out; */ }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <div id="mouseSpeedIndicator"></div>