将表面添加到滚动视图（带动画）答案

【问题标题】：Add surface to scrollview (with animation)将表面添加到滚动视图（带动画）
【发布时间】：2014-12-16 18:48:03
【问题描述】：

是否可以向已填充的滚动视图动态添加表面。单击时，我希望所有滚动视图元素都向下移动并在顶部添加新的动画表面。

滚动视图是否正确？

【问题讨论】：

标签： famo.us

【解决方案1】：

是的，您可以将新表面动态添加到填充的 Scrollview 中。只需将新表面添加到您传递给 Scrollview#sequenceFrom 的 Array 中。

一个基于scrollview example的例子：

（编辑添加动画）

define(function(require, exports, module) {
  var Engine     = require("famous/core/Engine");
  var Surface    = require("famous/core/Surface");
  var Scrollview = require("famous/views/Scrollview");
  var Timer = require("famous/utilities/Timer");
  var Easing = require("famous/transitions/Easing");

  var RenderNode = require("famous/core/RenderNode");
  var Modifier = require("famous/core/Modifier");
  var Transitionable = require('famous/transitions/Transitionable');

  var mainContext = Engine.createContext();

  var scrollview = new Scrollview();
  var surfaces = [];

  scrollview.sequenceFrom(surfaces);

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

    temp.pipe(scrollview);
    surfaces.push(temp);
  }

  // Add new surface after 1 second
  Timer.setTimeout(function(){
    var modifier = new Modifier({
      opacity: 0
    });
    var node = new RenderNode(modifier);
    var heightTarget = 200;
    var dynamicSurface = new Surface({
      content: "Dynamic Surface",
      size: [undefined, 0],
      properties: {
        lineHeight: "200px",
        textAlign: "center",
        backgroundColor: "#80e0c0"
      }
    });

    node.add(dynamicSurface);
    dynamicSurface.pipe(scrollview);
    surfaces.unshift(node);

    var opacity = new Transitionable(0);
    var sizeY = new Transitionable(0);

    // Performance implication - both of these functions execute on every tick.
    // They could be deleted after transition is complete if they were non-trivial
    // (allowing prototype function to resume)
    dynamicSurface.getSize = function() {
      var height = sizeY.get();
      return [undefined, height];
    };
    modifier.opacityFrom(function(){
      return opacity.get();
    });

    // Animate the height of the added surface, causing the rest of the list to move down
    sizeY.set(heightTarget, {duration: 500, curve: Easing.outCirc}, function(){
      // Need to set surface size manually after the transition, otherwise the div height is 0
      // (even though space was made for it)
      dynamicSurface.setSize([undefined, heightTarget]);
      // Fade in the item's content
      opacity.set(1, {duration: 500});
    });

  }, 1000);

  mainContext.add(scrollview);
});

此方法基于我在 Taasky Famo.us 演示中找到的方法：

它将项目从屏幕上移开，然后将它们的高度设置为 0 以模拟缩小间隙。上面的示例将高度从 0 设置为 200 以模拟插入前的间隙。

【讨论】：

可以做动画吗？这对我来说更重要。
@user732456 我用插入动画的方法更新了代码。可以通过执行相反的操作来删除项目：将不透明度转换为 0，将高度转换为 0，然后将项目移出/弹出/拼接出 Renderables 数组。
重写 getSize() 方法不太好……你想改用可转换的

【解决方案2】：

看看 Ijzerenhein 的 Famous Flex，它有你需要的一切（包括优秀的教程和文档）：https://github.com/IjzerenHein/famous-flex

【讨论】：