Как синхронизировать землю с вращением колеса? - PullRequest
Новая
       57

Как синхронизировать землю с вращением колеса?

0 голосов
/ 23 сентября 2018

Я хочу синхронизировать землю с вращением колеса (тянуть землю под вращением колеса).Колесо имеет динамический диаметр.

В моем примере ниже земля должна продолжать двигаться влево, если я нажимаю стрелку вправо, но это не так. 

const wheel=$('#wheel')
const plane=$('#plane')
let degree=0
let interval
$(document).on('mousedown','span',event=>{
  let planeX=plane.offset().left
  interval=setInterval(()=>{
    if(event.currentTarget.id==='left')degree-=1 
    else degree+=1
    wheel.css('transform', 'rotate(' + degree + 'deg)')
    const radians=degree * (Math.PI / 180)
    const cos = Math.cos(radians)
    planeX+=cos
    plane.css('left',planeX+'px')
  },10)
})
$(document).on('mouseup','span',event=>clearInterval(interval))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed;top:0; font-size:200%;"><span style="cursor:pointer;" id="left">&lt;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="cursor:pointer;" id="right">&gt;</span></div>
  <div id="wheelContainer" style="position:fixed;bottom:1em;left:50%;transform:translateX(-50%);"><div id="wheel" style="width:150px;height:150px;border:1px solid;border-radius:50%;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAAAAAA7suyFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAFuSURBVDjLfdRBa8IwGMbxx7cjEklIiVQqjsoCnvb9P8FACBQKngQHXpTJhJx2mRDZoXUmqfW9WX68f5tAR1tEw3jD5/EjUPKT1e/68NRQvil/X1MUGSbXeno9LRMUGmJ1NbsgSxHFIXEBeoiSENBHlITayc4hojTUTbiJbiGrulC36WT+UWuI28U82BIjakNNlccEwPGWIwCUWy16BNm520QAk+tydsWD6f44gUSzmF6AYUSU11oNkO6cRl92cAsA+PLgX+ybfEKQHVacijOejZc/R1qJHXtChLDf5Iza0SDhvK4mBGf0ng0R3RRjEOCWeiCn1Ech27twS7V9kPOM2WqC7k6d0Xvqh1RTjnEzcEZ9JjkvxFpPcDdwRsdv5zmrK4nQwBkV5jxXmzYUGDij7kfghbBdKDRw5v52nNWlRN/cD9MztSkneGTgjNoxwAtV64DE34T27gSzhcSQgTNqz1kUAjBKvmN6h4uQ8bM/WtmCgAk7YV0AAAAASUVORK5CYII=')"></div></div>
  <div id="plane" style="position:fixed;bottom:0;left:-1000vw;right:-1000vw;height:1em;border:1px solid;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAAAAAA7suyFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAFuSURBVDjLfdRBa8IwGMbxx7cjEklIiVQqjsoCnvb9P8FACBQKngQHXpTJhJx2mRDZoXUmqfW9WX68f5tAR1tEw3jD5/EjUPKT1e/68NRQvil/X1MUGSbXeno9LRMUGmJ1NbsgSxHFIXEBeoiSENBHlITayc4hojTUTbiJbiGrulC36WT+UWuI28U82BIjakNNlccEwPGWIwCUWy16BNm520QAk+tydsWD6f44gUSzmF6AYUSU11oNkO6cRl92cAsA+PLgX+ybfEKQHVacijOejZc/R1qJHXtChLDf5Iza0SDhvK4mBGf0ng0R3RRjEOCWeiCn1Ech27twS7V9kPOM2WqC7k6d0Xvqh1RTjnEzcEZ9JjkvxFpPcDdwRsdv5zmrK4nQwBkV5jxXmzYUGDij7kfghbBdKDRw5v52nNWlRN/cD9MztSkneGTgjNoxwAtV64DE34T27gSzhcSQgTNqz1kUAjBKvmN6h4uQ8bM/WtmCgAk7YV0AAAAASUVORK5CYII=')"></div>

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

Если вы удерживаете стрелку достаточно долго, вы увидите, что земля движется по синусоиде, независимо от того, удерживаете ли вы стрелку влево или вправо.

Проблема в следующем коде: 

const radians=degree * (Math.PI / 180)
const cos = Math.cos(radians)
planeX+=cos

degree является накопительным значением, где planeX += требуется только ступенчатое изменение значения.

Решение: Если градус будет + = 1 рад, плоскость X должна только + = 1или + = 1 * радиус окружности.

0 голосов
/ 23 сентября 2018

Общая длина дуги равна общему углу (измеренному в радианах), умноженному на радиус.Так как земля под колесом, вам понадобится противоположный знак.Поэтому вместо 

planeX+=cos

bettwer напишите 

planeX = planeX0 - radians * radius

, где радиус будет 75px в вашем сценарии. 

const wheel=$('#wheel')
const plane=$('#plane')
const radius=75
const planeX0=plane.offset().left
let degree=0
let interval
$(document).on('mousedown','span',event=>{
  interval=setInterval(()=>{
    if(event.currentTarget.id==='left')degree-=1 
    else degree+=1
    wheel.css('transform', 'rotate(' + degree + 'deg)')
    const radians=degree * (Math.PI / 180)
    planeX = planeX0 - radians * radius
    plane.css('left',planeX+'px')
  },10)
})
$(document).on('mouseup','span',event=>clearInterval(interval))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed;top:0; font-size:200%;"><span style="cursor:pointer;" id="left">&lt;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="cursor:pointer;" id="right">&gt;</span></div>
  <div id="wheelContainer" style="position:fixed;bottom:1em;left:50%;transform:translateX(-50%);"><div id="wheel" style="width:150px;height:150px;border:1px solid;border-radius:50%;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAAAAAA7suyFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAFuSURBVDjLfdRBa8IwGMbxx7cjEklIiVQqjsoCnvb9P8FACBQKngQHXpTJhJx2mRDZoXUmqfW9WX68f5tAR1tEw3jD5/EjUPKT1e/68NRQvil/X1MUGSbXeno9LRMUGmJ1NbsgSxHFIXEBeoiSENBHlITayc4hojTUTbiJbiGrulC36WT+UWuI28U82BIjakNNlccEwPGWIwCUWy16BNm520QAk+tydsWD6f44gUSzmF6AYUSU11oNkO6cRl92cAsA+PLgX+ybfEKQHVacijOejZc/R1qJHXtChLDf5Iza0SDhvK4mBGf0ng0R3RRjEOCWeiCn1Ech27twS7V9kPOM2WqC7k6d0Xvqh1RTjnEzcEZ9JjkvxFpPcDdwRsdv5zmrK4nQwBkV5jxXmzYUGDij7kfghbBdKDRw5v52nNWlRN/cD9MztSkneGTgjNoxwAtV64DE34T27gSzhcSQgTNqz1kUAjBKvmN6h4uQ8bM/WtmCgAk7YV0AAAAASUVORK5CYII=')"></div></div>
  <div id="plane" style="position:fixed;bottom:0;left:-1000vw;right:-1000vw;height:1em;border:1px solid;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAAAAAA7suyFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAFuSURBVDjLfdRBa8IwGMbxx7cjEklIiVQqjsoCnvb9P8FACBQKngQHXpTJhJx2mRDZoXUmqfW9WX68f5tAR1tEw3jD5/EjUPKT1e/68NRQvil/X1MUGSbXeno9LRMUGmJ1NbsgSxHFIXEBeoiSENBHlITayc4hojTUTbiJbiGrulC36WT+UWuI28U82BIjakNNlccEwPGWIwCUWy16BNm520QAk+tydsWD6f44gUSzmF6AYUSU11oNkO6cRl92cAsA+PLgX+ybfEKQHVacijOejZc/R1qJHXtChLDf5Iza0SDhvK4mBGf0ng0R3RRjEOCWeiCn1Ech27twS7V9kPOM2WqC7k6d0Xvqh1RTjnEzcEZ9JjkvxFpPcDdwRsdv5zmrK4nQwBkV5jxXmzYUGDij7kfghbBdKDRw5v52nNWlRN/cD9MztSkneGTgjNoxwAtV64DE34T27gSzhcSQgTNqz1kUAjBKvmN6h4uQ8bM/WtmCgAk7YV0AAAAASUVORK5CYII=')"></div>
...