famo.us - 如何为著名的过渡添加延迟？

Question

我想错开动画起点。使用Transit.js和类似的 JQuery 库，转换可以采用延迟参数。我尝试了类似的著名过渡，但没有效果。我想知道是否需要将转换包装在Transition-able 中？我有点不清楚这两者是如何联系在一起的。

Answer 1

目前无法通过提供的类轻松实现这种效果，因此您必须再次推出自己的解决方案。需要明确的是，在这种情况下，我没有选择使用 Transitionable。Transitionable 对于创建自定义动画很有价值，并且像所有过渡的数字界面一样工作。您可以在这个 SO question 中看到我如何使用它来为 webkit-blur 设置动画

用著名的框架动画模糊

但回到你的例子。我使用 Timer 类和函数绑定来迭代表面集合并将动画应用于每个表面。GridLayout 仅用于布局，与问题无关。

您当然可以将它捆绑到它自己的某种类中，但这是我可以构建的最原始的示例。

这是一个例子..祝你好运

var Engine            = require('famous/core/Engine');
var Surface           = require('famous/core/Surface');
var StateModifier     = require('famous/modifiers/StateModifier');
var EventHandler      = require('famous/core/EventHandler');

var RenderNode        = require('famous/core/RenderNode');
var GridLayout        = require('famous/views/GridLayout');
var Easing            = require('famous/transitions/Easing');
var Timer             = require('famous/utilities/Timer');

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

var context = Engine.createContext();

var surfaces = [];
var gridNodes = [];

var grid = new GridLayout({ dimensions:[1,4] });

grid.sequenceFrom(gridNodes);

var animateSurfaces = function(transition,delay){

  transition  = typeof transition !== 'undefined' ? transition  : ease ;
  delay       = typeof delay      !== 'undefined' ? delay       : 200 ;

  for (var i = 0; i < surfaces.length; i++) {

    surface = surfaces[i];

    var animate = function(){

      if (this.visible) {

        this.state.halt();
        this.state.setOpacity(0,ease);

      } else {

        this.state.halt();
        this.state.setOpacity(1,ease);

      }
      this.visible = !this.visible;

    }.bind(surface);

    Timer.setTimeout(animate,delay*i);

  };

}

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

  var surface = new Surface({
    size:[100,100],
    properties: {
      backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
    }
  })

  surface.state = new StateModifier();

  surface.visible = true;

  node = new RenderNode();
  node.add(surface.state).add(surface);

  surfaces.push(surface);
  gridNodes.push(node);

  surface.on('click',animateSurfaces);

};

context.add(new StateModifier({size:[100,400],origin:[0.5,0.5]})).add(grid);