0

I need to determine the position of a specific surface, and normally I would use getTransform() to gain access to the x,y,z properties of the translate modifier. Unfortunately, according to the famo.us documentation, Modifier's getTransform() method is deprecated.

My intent is to use those values to position another surface relative to those coordinates using transitionableTransform.setTranslate()

Any feedback is greatly appreciated!

IBrewThereforeIAm
  • 239
  • 2
  • 3

1 Answers1

0

Famo.us wants the developer to think in terms of updating the 3D transformation outside of your modifier and having the modifier access these values through the transitionable values being returned. Actually a good practice once you understand the core of the framework.

The Examples below show a simple way of doing this in two different instances.

Remember: The translate value returned is relative to the origin and align of the modifier, so you will be getting a position [x, y, z] relative to the starting position [0,0,0]. Both surfaces would need to have the same tree node origin or relative position.

Example 1: Sets Transform after final transition of dependent Surface

Gets the transform from a TransitionableTransform based on the main surface TransitionableTransform.

define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var Surface = require("famous/core/Surface");
  var RenderNode = require('famous/core/RenderNode');
  var Modifier = require('famous/core/Modifier');
  var Transform = require('famous/core/Transform');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);
  
  var surface = new Surface({
    content: 'Click to Transition',
    properties: {
      backgroundColor: 'rgba(255, 255, 0, 0.5)',
      textAlign: 'center'
    }
  });
  surface._trans = new TransitionableTransform();
  surface._mod = new Modifier({
    origin: [0.5, 0],
    align: [0.5, 0],
    size: [200, 200],
    transform: surface._trans
  });

  var surfaceFollower = new Surface({
    content: 'F o l l o w e r',
    properties: {
      backgroundColor: 'rgba(0, 255, 255, 0.5)',
      fontSize: '1em'
    }
  });
  surfaceFollower._trans = new TransitionableTransform();
  surfaceFollower._mod = new Modifier({
    origin: [0.5, 0],
    align: [0.5, 0],
    size: [12, 200],
    transform: surfaceFollower._trans
  });
  
  mainContext.add(surface._mod).add(surface);
  mainContext.add(surfaceFollower._mod).add(surfaceFollower);

  function followSurface() {
    //var translate = surface._trans.translate.get(); // returns [x, y, z]
    //var pos = [translate[0]+106,translate[1],translate[2]];
    var translate = surface._trans.get(); // returns 3D transform matrix
    var pos = [translate[12]+106,translate[13],translate[14]];
      surfaceFollower._trans.setTranslate(pos , {duration: 300});
  }
  surface.on('click', function() {
    var randomX = Math.floor(Math.random() * 200);
    var randomY = Math.floor(Math.random() * 200);
    if (this.randomly)
      this._trans.setTranslate([0, 0, 0], {duration: 300}, followSurface);
    else
      this._trans.setTranslate([randomX, randomY, 0], {duration: 300}, followSurface);
    
    this.randomly = !this.randomly;
  });

  
  
  followSurface();
});

// Start Main App
require(['main']);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

Example 2: Sets Transform from a function on every tick

Returning a translation transform based on the dependent Surface position.

  surfaceFollower._mod = new Modifier({
    origin: [0.5, 0],
    align: [0.5, 0],
    size: [12, 200],
    transform: followSurface
  });
  function followSurface(e) {
    var translate = surface._trans.get();
    return Transform.translate(translate[12]+106,translate[13],translate[14]);
  }


define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var Surface = require("famous/core/Surface");
  var RenderNode = require('famous/core/RenderNode');
  var Modifier = require('famous/core/Modifier');
  var Transform = require('famous/core/Transform');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);
  
  var surface = new Surface({
    content: 'Click to Transition',
    properties: {
      backgroundColor: 'rgba(255, 255, 0, 0.5)',
      textAlign: 'center'
    }
  });
  surface._trans = new TransitionableTransform();
  surface._mod = new Modifier({
    origin: [0.5, 0],
    align: [0.5, 0],
    size: [200, 200],
    transform: surface._trans
  });

  var surfaceFollower = new Surface({
    content: 'F o l l o w e r',
    properties: {
      backgroundColor: 'rgba(0, 255, 255, 0.5)',
      fontSize: '1em'
    }
  });
  surfaceFollower._mod = new Modifier({
    origin: [0.5, 0],
    align: [0.5, 0],
    size: [12, 200],
    transform: followSurface
  });
  
  mainContext.add(surface._mod).add(surface);
  mainContext.add(surfaceFollower._mod).add(surfaceFollower);

  function followSurface(e) {
    //var translate = surface._trans.translate.get(); // returns [x,y,z]
    //return Transform.translate(translate[0]+106,translate[1],translate[2]);
    var translate = surface._trans.get();
    return Transform.translate(translate[12]+106,translate[13],translate[14]);
  }
  surface.on('click', function() {
    var randomX = Math.floor(Math.random() * 200);
    var randomY = Math.floor(Math.random() * 200);
    if (this.randomly)
      this._trans.setTranslate([0, 0, 0], {duration: 300});
    else
      this._trans.setTranslate([randomX, randomY, 0], {duration: 300});
    
    this.randomly = !this.randomly;
  });
});

// Start Main App
require(['main']);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
talves
  • 13,993
  • 5
  • 40
  • 63