2

famo.us でドラッグに反応する、スプリングで接続された 2 つのサーフェスを実装しようとしています。これまでのところ、サーフェスをセットアップし、それらをドラッグでき、ページの読み込み中に相互作用するスプリングを持っていますが、ドラッグしていません。したがって、質問は、a) 2 つのサーフェスをスプリングで接続する方法と、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());
  });

});
4

1 に答える 1

3

ここまでで、PE についてかなりよく理解できたようです。まだ改善できる箇所がいくつかあります。これは、スプリングを取り付けたドラッグの動作例です。この実装はまだ完全ではありませんが、開始する必要があります.赤い円をドラッグして開始すると、すべてが期待どおりに機能します.ドラッグ可能には独自の位置があり、パーティクルも同様です. そのため、青い円をつかむと、パーティクルにオフセットが残ります。これで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);
于 2014-05-30T15:50:12.023 に答える