Question

是否可以在HeaderFooterLayout中设置标题大小的动画？我试图用动画改变它的大小，但我没有看到任何API。所以我想知道这样做的技巧。

Answer 1

您可以使用Transitionable来实现此目的。这可以通过以下方式完成：

为动画创建转场：

var transition = {
    duration: 400,
    curve: Easing.inOutQuad
};

设置开始＆amp;结束像素数：

var start = open ? 200 : 100;
var end = open ? 100 : 200;

使用起始像素数实例化新的Transitionable：
```
var transitionable = new Transitionable(start);
```

创建将执行以应用像素数的函数：

var prerender = function () {
    layout.setOptions({
        headerSize: transitionable.get()
    })
};

将函数附加到Engine事件：
```
Engine.on('prerender', prerender);
```
将转换结束状态添加到待处理转换队列：
```
transitionable.set(end, transition, complete);
```

这是一个工作小提琴，供您参考：http://jsfiddle.net/Mabuti/4or8nxh4/ 在完全披露中，我确实使用以下帖子作为参考点：famo.us: can I animate the header/footer heights of a header footer layout?但我尝试在流程中添加一些上下文。

您还可以查看Transitionable文档，以便更好地了解它的作用：https://famo.us/docs/transitions/Transitionable

Answer 2

另一种方法是使用famous-flex LayoutController和HeaderFooterLayout。代码非常简单：

var LayoutController = require('famous-flex/LayoutController');
var HeaderFooterLayout = require('famous-flex/layouts/HeaderFooterLayout');

// Create header/content surface/views
var header = new Surface(..);
var content = new Surface(..);

// Create header-footer layout
var layout = new LayoutController({
    layout: HeaderFooterLayout,
    layoutOptions: {
        headerSize: 40
    },
    flow: true,             // this causes a smooth transition when changing the header-size
    reflowOnResize: false,  // do not reflow on resize
    dataSource: {
        header: header,
        content: content
    }
});

...

// Change the height of the header (because flow is enabled,
// this will automatically cause it to smoothly animate from
// the old height to the new height)
layout.setLayoutOptions({
    headerSize: 100
});

图书馆：https://github.com/IjzerenHein/famous-flex

有没有办法在HeaderFooterLayout中设置标题大小的动画？

2 个答案: