Question

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

Answer 1

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

Animating blur with the famous framework

但回到你的榜样。我使用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);

如何为着名的过渡添加延迟？

1 个答案: