Question

在famo.us中，有一些简单的方法可以使用曲面上的修改器来执行动画/交互。例如，拖动和动画表面在famo.us指南中有非常简单的例子。

...assume require('') statements above here...

var mainContext = Engine.createContext();
var draggable = new Draggable({...});
var surface = new Surface({...});
var transitionableTransform = new TransitionableTransform();
var modifier = new Modifier({
  origin: [.5, .5],
  transform: transitionableTransform
});
surface.pipe(draggable);
surface.on('click', function () {
  transitionableTransform.setScale([3, 3, 1], {duration: 300});
});
mainContext.add(draggable).add(surface);

但是，在更复杂的场景中，您可能需要协调多个动画，根据交互的需要启动/停止/反转。在这些情况下，添加具有持续时间的变换这样简单的事情可能最初会起作用，但不保证在用户与它们交互的次数越多时就不会失去同步。

#render方法似乎是放置某些类型的协调动画的常见位置。我对它的理解有限，它确定了＆＃39;规格＆＃39;正在渲染的节点，并在渲染循环的每个帧上调用。因此，您可能能够识别特定动画的每个步骤，然后根据它与之交互的方式，能够停止动画中期并根据需要进行更改。例如，Flipper似乎以这种方式工作

（SRC /视图/ Flipper.js）：

Flipper.prototype.render = function render() {
  var pos = this.state.get(); //state is a transitionable
  var axis = this.options.direction;
  var frontRotation = [0, 0, 0];
  var backRotation = [0, 0, 0];
  frontRotation[axis] = Math.PI * pos;
  backRotation[axis] = Math.PI * (pos + 1);

  if (this.options.cull && !this.state.isActive()) {
      if (pos) return this.backNode.render();
      else return this.frontNode.render();
  }
  else {
      return [
          {
              transform: Transform.rotate.apply(null, frontRotation),
              target: this.frontNode.render()
          },
          {
              transform: Transform.rotate.apply(null, backRotation),
              target: this.backNode.render()
          }
      ];
  }
};

是否有关于#render在制作动画时应该扮演的角色的文档？或者渲染方法应该如何工作（例如，构造返回的规范的正确方法）。渲染应该是更低级别的，如果是这样，应该使用不同的构造吗？

Answer 1

我见过目前使用的render方法的唯一方法是从预先存在的元素返回规范。就个人而言，我只在创建自己的＆＃34; Views＆＃34;时使用它，我在其中添加一个RenderNode并创建一个简单调用RenderNode＆＃39的传递render方法。 ; s render方法。这足以将自定义对象传递到.add函数并让它们工作。我在这里了解到： How to remove nodes from the Render Tree?

至于理解RenderSpecs本身的构造，我不知道任何文档。了解它的最佳方法是阅读_parseSpec的{{1}}函数： https://github.com/Famous/core/blob/master/SpecParser.js#L92

由此看来，以下任何一项都可以用作SpecParser：

Entity个ID（在创建时分配给每个RenderSpec）
包含以下任何内容的对象：
- Surface
- opacity
- transform
- origin
size s

Answer 2

如果要控制渲染节点，请使用View函数编写自定义render。 Flipper类是一个简单的示例（RenderController是此模式的复杂示例）

Famo.us如何呈现：

每个RenderNode都有一个render函数可以创建一个 renderSpec。
renderSpec包含有关Modifier或的Surface的信息 Modifier。
2.1 CSS规范用于计算最终的Surface属性 2.2 DOM规范与Engine元素相关联。
renderSpec的每个刻度线，RenderNode.commit都使用commit函数呈现。
ElementAllocator函数使用Context（来自renderSpec）来分配/释放DOM元素。（实际上回收DOM节点以节省内存）。因此：只需在自定义View中返回正确的View，famo.us就会为您管理内存和性能。

注意：

您不需要使用render类 - 具有View功能的对象就足够了。 Surface类只是添加事件和选项，这是创建封装的，可重用的组件的好方法。

在DOM中分配deploy元素时，会触发Surface事件。

取消分配recall元素后，会触发{{1}}事件。

从http://famousco.de/2014/07/look-inside-rendering/

何时在famo.us中使用#render方法

2 个答案: