使用輸入 slider 放大對象的正確方法

Question

我正在嘗試使用 slider 放大這些對象。 不幸的是，從最近到最深的 object 的距離越大，滑動發生的越快。 如何控制這種行為以使幻燈片看起來平滑？

我嘗試了什么：去抖動處理程序並給圓圈一個過渡。

這是一個片段：

 const input = document.querySelector("input"); const circles = document.querySelectorAll(".circle"); let firstDepth = 9300; let secondDepth = 100; let thirdDepth = 2; const initialSize = 0.0001; circles[0].style.transform = "scale(" + (firstDepth * initialSize) + ")"; circles[1].style.transform = "scale(" + (secondDepth * initialSize) + ")"; circles[2].style.transform = "scale(" + (thirdDepth * initialSize) + ")"; input.addEventListener("input", function() { //console.log(1) circles[0].style.transform = "scale(" + firstDepth * input.value + ")"; circles[1].style.transform = "scale(" + secondDepth * input.value + ")"; circles[2].style.transform = "scale(" + thirdDepth * input.value + ")"; })

 .circle { width: 100px; height: 100px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border-radius: 100%; }.first:nth-of-type(1) { border: 2px solid red; }.second:nth-of-type(2) { border: 2px solid orange; }.third:nth-of-type(3) { border: 2px solid green; }

 <input type="range" value="0.0001" step="any" min="0.0001" max="1"> <div class="circle first"></div> <div class="circle second"></div> <div class="circle third"></div>

Answer 1

您會想要這樣的效果，即隨着d的滑動值的增加將比例乘以一些m ，因此如果您使用2d滑動，您將獲得與m ²的相對縮放。

所以，...您需要對input.value進行轉換，其中該值出現在指數中。 換句話說：就 slider 的值而言，規模應該呈指數增長。

假設您希望在 slider 位於左側（使用initialSize縮放）時完全看到第一個圓圈，而當 slider 位於右側時完全看到第三個圓圈，您可以推導出該轉換的以下公式：

initialSize * (firstDepth / thirdDepth) ** (input.value - initialSize);

這是適用於此的代碼：

 const input = document.querySelector("input"); const circles = document.querySelectorAll(".circle"); let firstDepth = 9300; let secondDepth = 100; let thirdDepth = 2; const initialSize = 0.0001; circles[0].style.transform = "scale(" + (firstDepth * initialSize) + ")"; circles[1].style.transform = "scale(" + (secondDepth * initialSize) + ")"; circles[2].style.transform = "scale(" + (thirdDepth * initialSize) + ")"; input.addEventListener("input", function() { let coeff = initialSize * (firstDepth / thirdDepth) ** (input.value - initialSize); circles[0].style.transform = "scale(" + firstDepth * coeff + ")"; circles[1].style.transform = "scale(" + secondDepth * coeff + ")"; circles[2].style.transform = "scale(" + thirdDepth * coeff + ")"; })

 .circle { width: 100px; height: 100px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border-radius: 100%; }.first:nth-of-type(1) { border: 2px solid red; }.second:nth-of-type(2) { border: 2px solid orange; }.third:nth-of-type(3) { border: 2px solid green; }

 <input type="range" value="0.0001" step="any" min="0.0001" max="1"> <div class="circle first"></div> <div class="circle second"></div> <div class="circle third"></div>