1

在 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 方法似乎是放置某些类型的协调动画的常见位置。我对它的有限理解是它识别正在渲染的节点的“规格”，并在渲染循环的每一帧上调用。因此，您可能能够识别特定动画的每个步骤，然后根据它的交互方式能够停止中间动画并根据需要进行更改。例如，Flipper 似乎就是这样工作的

(src/views/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 在制作动画时应该扮演的角色的文档？或者渲染方法应该如何工作（例如，构造返回的规范的正确方法）。渲染是否应该更底层，如果是这样，是否应该使用不同的构造？

4

2 回答 2

1

render到目前为止，我看到的唯一方法是从预先存在的元素返回规范。就个人而言，我仅在创建自己的“视图”时使用它，在其中我将一个 RenderNode 添加到我的类并创建一个render简单地调用 RenderNode 方法的传递render方法。这足以将自定义对象传递给.add函数并让它们工作。我在这里了解到： 如何从渲染树中删除节点？

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

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

  1. 一个Entityid（Surface在创建时分配给每个人）
  2. 包含以下任何一项的对象：
    • opacity
    • transform
    • origin
    • size
  3. RenderSpec一个数组
于 2014-05-08T13:58:25.130 回答
0

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

Famo.us 如何呈现：

  1. 每个RenderNode都有一个render创建 renderSpec.

  2. renderSpec包含有关 aModifier或 的信息Surface。
    2.1Modifier规格用于计算最终CSS性能。
    2.2Surface规范与DOM元素耦合。

  3. , 的每个刻度都使用Engine该函数renderSpec呈现。RenderNode.commit

  4. 该commit函数使用ElementAllocator(from Context) 来分配/解除分配 DOM 元素。（这实际上回收了 DOM 节点以节省内存）。因此：只需renderSpec在您的 custom 中返回正确的View，famo.us 就会为您管理内存和性能。

笔记：

你不需要使用View类——一个带有render函数的对象就足够了。该类View只是添加事件和选项，这是创建封装的、可重用组件的好方法。

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

当一个Surface元素被释放时，该recall事件被触发。

复制自http:// Famousco.de/2014/07/look-inside-rendering/

于 2014-10-23T09:10:00.070 回答