如何改变以正弦波模式移动的圆盘传送带中物品的位置

编程问答 2022-08-10

问题描述

如果问题陈述含糊且与我的实际问题不符，我们深表歉意。

我的代码： 

SettingPositions = function(index,x,y,angle) {
  const CarouselItems = document.getElementsByClassName("Carousel__item");
  CarouselItems[index].style = "transform:translate(" + x + "vw," + y + "%) rotate(" + angle + "deg)" ;
}

const displacement = 120,CircleCenterX = 60,CircleCenterY = 20,CircleRadiusX = CircleCenterX,CircleRadiusY = -30,AngleIncrease= Math.PI / displacement,MaxRotation = 30,DoubleMaxRotation = 60;

let angle = 0;

for(let points = 0; points < displacement; points++){
    let x=  CircleRadiusX * Math.cos(Math.PI - angle) + CircleCenterX;
    let y=  CircleRadiusY * Math.sin(angle) + CircleCenterY;
    // let rotate = -(Math.atan2(y - CircleCenterY,x- CircleCenterX) * DoubleMaxRotation / Math.PI) - MaxRotation;
    let rotate = 0;
    if(points === 62){
      console.log(x,y);
      SettingPositions(0,-x,rotate);
    }
    else if(points === 45){
      console.log(x,y);
      SettingPositions(1,rotate);
    }
    angle+=AngleIncrease;
}  
body{
    overflow: hidden;
}
.Carousel {
    position: relative;
    height: 100vh;
    overflow: auto;
}  
.Carousel .Carousel__View {
    display: flex;
    width: 150vw;
    height: 100%;
    position: relative;
    align-items: center;
}  
.Carousel .Carousel__View .Carousel__item {
    display: flex;
    position: absolute;
    background-color:red;
    left: 100vw;
    width: 25vw;
    height:20vw;
    align-items: center;
}
  
<div class = "Carousel">
    <div class = "Carousel__View">
        <div class = "Carousel__item"></div>
        <div class = "Carousel__item"></div>
        <div class = "Carousel__item"></div>
    </div>
</div>

Two Items of Carousel

我实际上希望两个项目都以正弦波移动。但是，我也希望两个框之间的y差更大。我曾尝试通过将Math.Sin函数中的角度乘以0.835之类的值来增加频率，但是我无法获得足够的差异，如果我再从该数字移开，则会破坏两个项目的位置。

为了更正确地理解它，我为此问题制作了CodePen。 https://codepen.io/ahmad-sheraz/pen/eYZjzZE。 有控制台日志语句，其中显示了y和x。请注意，我希望y值的差异大于显示的值。

我实际上想做的是克隆网站https://www.yolele.com/中显示的轮播。如果您查看此网站，您会发现每个项目之间的y差几乎为5-6％，并且它们是一致的。我提到这一点是为了在考虑此上下文的情况下获得答案。如果我的解决方法完全错误，那么任何建议也将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

carouselgeometryhtmljavascripttrigonometry