Question

我想在famo.us ScrollView中操作曲面的大小，理想情况下是过渡。

在SequentialLayout中执行此操作的RenderNode（）技巧，（Surface-＆gt; Modifier-＆gt; RenderNode）不适用，因为它无法处理.pipe（）..

并将每个Node包装在另一个containerSurface中，其大小为：[true，true]只是将其折叠。

所以我无法弄清楚允许在Scrollview中操纵大小的配置。

先谢谢

Answer 1

我发现了一个有趣的bug，其中未定义的宽度表面不允许我使用StateModifier来实现这一点。我使用了一个修饰符，一切都按预期工作。

我设置了一个正常的滚动视图并循环创建曲面。为了设置大小的动画，我更喜欢在大小不同的修改器中包装[undefined，undefined]大小的表面。这允许我通过更多控制来设置大小的动画。

创建每个曲面后，我创建一个RenderNode和一个Modifier，然后将Modifier和Surface添加到RenderNode。我仍然只是从表面管道事件，这就是所需要的。

要为大小设置动画，我定义一个Transitionable并在Modifiers sizeFrom方法的return语句中使用它。现在设置表面高度的动画就像设置可转换的一样简单。我这样点击。

这是一个例子。祝你好运！

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 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();

var surfaces = [];

scrollview.sequenceFrom(surfaces);

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

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

    surface.open = false;

    surface.state = new Modifier();

    surface.trans = new Transitionable(200);

    surface.state.sizeFrom(function(){
        return [undefined, this.trans.get()];
    }.bind(surface));

    surface.node = new RenderNode();

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

    surface.pipe(scrollview);

    surface.on('click',function(e){
        if (this.open) {
            this.trans.halt();
            this.trans.set(200,snap);
        } else {
            this.trans.halt();
            this.trans.set(400,snap);
        }
        this.open = !this.open;

    }.bind(surface));

    surfaces.push(surface.node);
}

mainContext.add(scrollview);

Answer 2

或者您也可以使用FlexScrollView，它支持流模式，以便顺利插入/删除/更新/交换：

var scrollView = new FlexScrollView({
    flow: true // flow-mode causes renderables to smoothly flow to their new position
});
scrollView.push(...);
scrollView.push(...);

scrollView.insert(1, ...); // insert item in between

https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md https://github.com/IjzerenHein/famous-flex

调整Famo.us Scrollview中的曲面大小

2 个答案: