Question

我愿意打赌这个问题与我的数学有关，而不是我的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.
    });
  } 
}

Answer 1

我已经做了类似的事情，但是在jquery“path”插件的帮助和使用下，它有一个沿着正弦波路径动画的例子，你可能会发现它有助于引用。（或者只是使用插件！）

在此处查找更多信息：http://boodigital.com/post/1984711395/bezier-curves-in-jquery和此处：https://github.com/weepy/jquery.path

我们最终调整了振幅，频率和相移，以达到完美的效果。希望这对你有所帮助！

Answer 2

这并不完美，但它更贴近您的需求：

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.
}

Answer 3

此处的另一个例子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();

在JavaScript中使用正弦波问题

3 个答案: