在 famo.us 滚动视图上打开窗帘动画

Question

我正在尝试在 Scrollview 上创建一个打开的窗帘动画，因此当单击 Scrollview 中的一个项目时，它和它左边的项目向左移动，它之后的所有项目都向右移动。再次单击该项目时，窗帘关闭。考虑通过将项目从 Scrollview 移出到 2 个 SequentialLayouts，一旦窗帘关闭，将它们移回 Scollview。这可以做到吗？您可以将渲染树中的节点/视图从一个节点移动到另一个节点吗？

我应该考虑的任何其他设计方法？

Answer 1

这是我对你描述的窗帘的版本。很难确切地知道你想要什么，但我试了一下。

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 Utility = require("famous/utilities/Utility");
  var Scrollview = require("famous/views/Scrollview");
  var Transitionable = require("famous/transitions/Transitionable");
  var SnapTransition = require("famous/transitions/SnapTransition");

  Transitionable.registerMethod('snap', SnapTransition);

  var snap = {
    method: 'snap',
    period: 600,
    dampingRatio: 0.6
  };

  var mainContext = Engine.createContext();

  var scrollview = new Scrollview({
    direction: Utility.Direction.X
  });

  var views = [];

  scrollview.sequenceFrom(views);

  function _resize(index, views, event) {
    console.log(index, event);
    var itsMe = (index === event.index);
    if (itsMe) {
      this.trans.halt();
      if (this.open)
        this.trans.set(100, snap);
      else
        this.trans.set(400, snap);
      this.open = !this.open;
      scrollview.goToPage(index);
    } else {
      if (event.isOpen) {
        this.trans.halt();
        this.trans.set(100, snap);
      } else {
        this.trans.halt();
        this.trans.set(20, snap);
      }
      this.open = false;
    }

  }

  function _resizeChosen(index, views, event) {
    scrollview._eventOutput.emit('itemChosen', {
      index: index,
      isOpen: views[index].surface.open
    });
  }

  function _surfaceSize() {
    return [this.trans.get(), undefined];
  }

  for (var i = 0; i < 20; i++) {

    var node = new RenderNode();

    node.surface = new Surface({
      content: (i + 1),
      size: [undefined, undefined],
      properties: {
        backgroundColor: "hsl(" + (i * 360 / 20) + ", 90%, 50%)",
        lineHeight: "50px",
        textAlign: "center"
      }
    });

    node.surface._index = i;

    node.surface.open = false;

    node.surface.state = new Modifier();

    node.surface.trans = new Transitionable(50);

    node.surface.state.sizeFrom(_surfaceSize.bind(node.surface));

    node.add(node.surface.state).add(node.surface);

    node.surface.pipe(scrollview);
    node.surface._eventOutput.subscribe(scrollview._eventOutput);

    node.surface.on('click', _resizeChosen.bind(node.surface, i, views));

    node.surface.on('itemChosen', _resize.bind(node.surface, i, views));

    views.push(node);
  }

  mainContext.add(scrollview);
});
require(['main']);

<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>

在 famo.us 滚动视图上打开窗帘动画

Open curtain animation on a famo.us Scrollview

animation

famo.us