Проблема с синусоидой в JavaScript - PullRequest
Новая
       5

Проблема с синусоидой в JavaScript

0 голосов
/ 01 марта 2012

Я был бы готов поспорить, что проблема связана с моей математикой, а не с моим JavaScript, но ...

Я пытаюсь создать синусоидальную волну, которая имеет амплитуду (общую высоту)высота контейнера (в данном случае: 400px) и общая длина волны равна ширине контейнера (в данном случае: 600px).

Простым английским языком: я пытаюсь получить #theSun, чтобы подняться на левую сторону контейнера, дуги на 50% влево, а затем упасть, пока он не установится на 100% влево.

Может ли кто-нибудь одолжить мне глаза и определить, что я делаю неправильно?

Вот рабочий пример кода / что с ним не так: http://jsfiddle.net/fasterhorses/vbkPb/

// HTML
<div id="container">
 <div id="theSun"></div>
</div>​

// CSS
#container {
  border: 1px solid #f00;        
  height: 400px;
  width: 600px;    
}

#theSun {
  background: yellow;            
  height: 50px;
  position: relative;
  width: 50px;   
}

// JavaScript (w/ jQuery 1.7)

var sun = $('#theSun');
var context = $('#container');
var contextHeight = context.height();
var contextWidth = context.width();


// Move sun to horizon line
sun.css({"top": contextHeight});

var a = contextHeight / 2;
var b = (Math.PI / contextWidth) * 2;

for (var i = 0; i <= contextWidth; i++) {
  var arc = a * Math.sin(b * i);
  if (i >= (contextWidth / 2)) {
    sun.animate({
      left: '+=' + i,
      top: '+=' + arc
    }, 500, function() {
    // Animation complete.
  });
  } else {
    sun.animate({
      left: '+=' + i,
      top: '-=' + arc
    }, 500, function() {
    // Animation complete.
    });
  } 
}

Ответы [ 3 ]

1 голос
/ 01 марта 2012

Я сделал что-то похожее на это, но с помощью и с помощью плагина jquery "path", который имеет пример анимации вдоль пути синусоидальной волны, на который вы могли бы найти ссылку.(Или просто используйте плагин!)

Более подробная информация здесь: http://boodigital.com/post/1984711395/bezier-curves-in-jquery и здесь: https://github.com/weepy/jquery.path

В итоге мы настроили нашу амплитуду, частоту и сдвиг фазы надостичь идеального результата.Надеюсь, это вам поможет!

0 голосов
/ 01 марта 2012

Другой пример здесь http://jsfiddle.net/vbkPb/70/

var sun = $('#theSun');
var context = $('#container');
var contextHeight = context.height();
var contextWidth = context.width();


// Move sun to horizon line
sun.css({
    "top": contextHeight
});

var a = contextHeight;
var b = Math.PI / contextWidth;
var i = 0;

function moveSun() {
    if (i < contextWidth) {
        var arc = a * Math.sin(i * b);
        var left = i / contextWidth;
        sun.animate({
            left: i,
            top: contextHeight - arc
        }, 25, 'linear');
        i++;
        moveSun().delay(500);
    }
}

moveSun();
0 голосов
/ 01 марта 2012

Это не идеально, но это намного ближе к тому, что вам нужно: 

var sun = $('#theSun');
var context = $('#container');
var contextHeight = context.height();
var contextWidth = context.width();


// Move sun to horizon line
sun.css({"top": contextHeight});

for (var x = 0; x <= contextWidth; x++) {
    var angle = Math.acos((x - (contextWidth / 2)) / (contextWidth / 2));
    var y = contextHeight - Math.sin(angle) * contextHeight;
    sun.animate({
      left: x,
      top: y
    }, 5);
    // Animation complete.
}
...