javascript - 使用输入滑块放大对象的伪空间的正确方法

Question

我正在尝试使用滑块放大这些对象。不幸的是，从最近到最深的物体的距离越大，滑动发生的越快。如何控制这种行为以使幻灯片看起来平滑？

我尝试了什么：去抖动处理程序并给圆圈一个过渡。

这是一个片段：

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>

标签： javascriptalgorithmzooming

Answer 1

您会想要这样的效果，即随着d的滑动值的增加将比例乘以一些m，因此如果您使用2d滑动，您将获得与m ²的相对缩放。

所以，...您需要转换input.value该值出现在指数中的位置。换句话说：就滑块的值而言，比例应该呈指数增长。

假设您希望在滑块位于左侧（使用 缩放initialSize）时完全看到第一个圆圈，而在滑块位于右侧时完全看到第三个圆圈，您可以推导出该转换的以下公式：

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>