振荡函数

Question

尝试创建一个可以动态振荡对象属性的函数。我已经设法在一个功能之外创建它，但我不能让它在一个功能中工作。这是因为角度变量增加了每一帧。这是一个让一个物体在一个圆圈中摆动x和y道具的例子。

Example fiddle.

...初始化

var obj = new Ball(arguments...),
    target = {
      x: 100,
      y: 100
    },
    angle = 0,
    radius = 50,
    speed = 0.1;

...循环

// clear canvas
obj.x = target.x + Math.cos(angle) * radius;
obj.y = target.y + Math.sin(angle) * radius;
angle += speed;
// rAF

这样做很好，但是当我尝试将其重复使用并将其转换为函数时，它无法正常工作。

function oscillate(obj, target, angle, radius, speed) {
  obj.x = target.x + Math.cos(angle) * radius;
  obj.y = target.y + Math.sin(angle) * radius;
  angle += speed;
}

如何在功能中使其工作？

Answer 1

那是因为angle未通过引用传递。 JS没有通过引用传递。

您可以通过不声明本地变量来修改外部变量：

＆＃13;

＆＃13;

var map = document.getElementById('map'),
    fx = map.getContext('2d');
var ball = {
      x: 50,
      y: 50,
      radius: 50
    },
    target = {
      x: map.width / 2,
      y: map.height / 2,
    },
    angle = 0,
    radius = 50,
    speed = 0.1;
ball.draw = function(fx) {
  fx.beginPath();
  fx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
  fx.fill();
};
function oscillate(obj, target, radius, speed) {
  obj.x = target.x + Math.cos(angle) * radius;
  obj.y = target.y + Math.sin(angle) * radius;
  angle += speed;
}
(function update() {
  fx.clearRect(0, 0, map.width, map.height);
  oscillate(ball, target, radius, speed)
  ball.draw(fx);
  requestAnimationFrame(update);
}());

＆＃13;

<canvas id='map'></canvas>

＆＃13;

＆＃13;

＆＃13;

或者，传递一个对象：

＆＃13;

＆＃13;

var map = document.getElementById('map'),
    fx = map.getContext('2d');
var ball = {
  x: 50,
  y: 50,
  radius: 50
},
data = {
  obj: ball,
  target: {
    x: map.width / 2,
    y: map.height / 2,
  },
  angle: 0,
  radius: 50,
  speed: 0.1
};
ball.draw = function(fx) {
  fx.beginPath();
  fx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
  fx.fill();
};
function oscillate(data) {
  data.obj.x = data.target.x + Math.cos(data.angle) * data.radius;
  data.obj.y = data.target.y + Math.sin(data.angle) * data.radius;
  data.angle += data.speed;
}
(function update() {
  fx.clearRect(0, 0, map.width, map.height);
  oscillate(data)
  ball.draw(fx);
  requestAnimationFrame(update);
}());

＆＃13;

<canvas id='map'></canvas>

＆＃13;

＆＃13;

＆＃13;