famo.us 中两个可拖动表面之间的弹簧

Question

我正在尝试实现两个与弹簧相连的表面，它会对 famo.us 中的拖拽做出反应。到目前为止，我已经设置了表面，可以拖动它们，有一个在页面加载期间交互的弹簧，但不是在拖动时。所以问题是 a) 我应该如何用弹簧连接两个表面和 b) 当我拖动一个表面以使另一个表面跟随拖动的表面时如何更新物理特性？

我目前的代码是这样的

define(function(require) {

  var Engine          = require('famous/core/Engine');
  var Surface         = require('famous/core/Surface');
  var StateModifier   = require('famous/modifiers/StateModifier');
  var PhysicsEngine   = require('famous/physics/PhysicsEngine');
  var Circle          = require('famous/physics/bodies/Circle');
  var Draggable       = require('famous/modifiers/Draggable');
  var Spring          = require('famous/physics/forces/Spring');
  var Vector          = require('famous/math/Vector');

  var context = Engine.createContext();
  var physicsEngine = new PhysicsEngine();

  var ball = new Surface ({
    size: [100,100],
    properties: {
          backgroundColor: 'red',
          borderRadius: '50px'
    }
  });

  var ball2 = new Surface ({
    size: [100,100],
    properties: {
          backgroundColor: 'blue',
          borderRadius: '50px'
    }
  });

  var draggable = new Draggable();
  var draggable2 = new Draggable();

  ball.state = new StateModifier({origin:[0.2,0.2]});
  ball2.state = new StateModifier({origin:[0.3,0.3]});

  ball.particle = new Circle({radius:100});
  ball2.particle = new Circle({radius:100});

  var spring = new Spring({
      anchor:         ball.particle,
      period:         400,  // <= Play with these values :-)
      dampingRatio:   0.07, // <=
      length:         50
  });
//    var spring2 = new Spring({anchor: ball2.particle});

//    physicsEngine.attach(spring, ball2.particle);
//    physicsEngine.attach(spring2, ball.particle);

  draggable.subscribe(ball);
  draggable2.subscribe(ball2);

  draggable.on('update', function() {
      console.info('update');
      ball2.particle.applyForce(new Vector(0, 0, -0.005 * 100));
//        ball.state.setTransform(ball.particle.getTransform())
//        ball.state.setTransform(ball.particle.getTransform())
//        ball.particle.setVelocity([0.001,0,0]);
//        physicsEngine.wake();
//        physicsEngine.step();
  });
  draggable2.on('update', function() {
//        ball2.particle.setVelocity([0.001,0,0]);
//        console.info('update');
//        physicsEngine.wake();
//        physicsEngine.step();
  });


  physicsEngine.attach(spring, ball2.particle);
//    spring.applyForce(ball.particle);
  physicsEngine.addBody(ball.particle);
  physicsEngine.addBody(ball2.particle);


//    ball.on("click",function(){
//      ball.particle.setVelocity([10,0,0]);
//    });
//
//    ball2.on("click",function(){
//      ball2.particle.setVelocity([0,10,0]);
//    });

  context.add(draggable).add(ball.state).add(ball);
  context.add(draggable2).add(ball2.state).add(ball2);

  Engine.on('prerender', function(){
    ball.state.setTransform(ball.particle.getTransform());
    ball2.state.setTransform(ball2.particle.getTransform());
  });

});

Answer 1

到目前为止，您似乎对 PE 有了很好的了解。我仍然可以看到一些可以改进的地方。这是一个附加弹簧拖动的工作示例。虽然这个实现还不完美，但它应该能让你开始。如果你从拖动红色圆圈开始，一切都会按预期进行。Draggable 有自己的位置，粒子也有。因此，当您抓住蓝色圆圈时，粒子中仍然存在偏移。这是什么可以让你获得 95%..

希望对你有帮助..

var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var Transform       = require('famous/core/Transform');
var Modifier        = require('famous/core/Modifier');

var Draggable       = require('famous/modifiers/Draggable');

var PhysicsEngine   = require('famous/physics/PhysicsEngine');
var Circle          = require('famous/physics/bodies/Circle');
var Spring          = require('famous/physics/forces/Spring');

var context = Engine.createContext();
var physicsEngine = new PhysicsEngine();

var ball = new Surface ({
  size: [100,100],
  properties: {
        backgroundColor: 'red',
        borderRadius: '50px'
  }
});

var ball2 = new Surface ({
  size: [100,100],
  properties: {
        backgroundColor: 'blue',
        borderRadius: '50px',
  }
});

ball.mod = new Modifier({origin:[0.5,0.5]});
ball.draggable = new Draggable();
ball.pipe(ball.draggable);
ball.particle = new Circle({radius:100});
ball.mod.transformFrom(function(){ return Transform.translate(0,0,0) });

ball.spring = new Spring({
  anchor:         ball.particle,
  period:         400,
  dampingRatio:   0.07,
  length:         50
});

ball2.mod = new Modifier({origin:[0.5,0.5]});
ball2.draggable = new Draggable();
ball2.pipe(ball2.draggable);
ball2.particle = new Circle({radius:100});
ball2.mod.transformFrom(function(){ return ball2.particle.getTransform()});

ball2.spring = new Spring({
  anchor:         ball2.particle,
  period:         400,
  dampingRatio:   0.07,
  length:         50
});

ball.draggable.on('start',function(){

  ball2.setProperties({pointerEvents:'none'});

  if (ball2.springID) physicsEngine.detach(ball2.springID);
  if (ball.springID) physicsEngine.detach(ball.springID);

  ball.springID = physicsEngine.attach(ball.spring, ball2.particle);
  ball2.springID = null;

  ball.mod.transformFrom(function(){ return Transform.translate(0,0,0) });
  ball2.mod.transformFrom(function(){ return ball2.particle.getTransform()});

})

ball.draggable.on('update', function() {
    pos = ball.draggable.getPosition();
    ball.particle.setPosition(pos);
});

ball.draggable.on('end', function() {
  ball2.setProperties({pointerEvents:'all'});
});

ball2.draggable.on('start',function(){

  ball.setProperties({pointerEvents:'none'});

  if (ball2.springID) physicsEngine.detach(ball2.springID);
  if (ball.springID) physicsEngine.detach(ball.springID);

  ball2.springID = physicsEngine.attach(ball2.spring, ball.particle);
  ball.springID = null;

  ball2.mod.transformFrom(function(){ return Transform.translate(0,0,0) });
  ball.mod.transformFrom(function(){ return ball.particle.getTransform()});

})

ball2.draggable.on('update', function() {
    pos = ball2.draggable.getPosition();
    ball2.particle.setPosition(pos);
});

ball2.draggable.on('end', function() {
  ball.setProperties({pointerEvents:'all'});
});

ball.springID = physicsEngine.attach(ball.spring, ball2.particle);

physicsEngine.addBody(ball.particle);
physicsEngine.addBody(ball2.particle);

context.add(ball.mod).add(ball.draggable).add(ball);
context.add(ball2.mod).add(ball2.draggable).add(ball2);