可转换回调在 Famous Engine 中不起作用

Question

学习新 Famous Engine 时的另一个问题：为可转换对象设置新状态时，您可以设置转换完成时的回调。对我来说，过渡补间到指定持续时间的最终数字，但回调没有运行。这是我的代码：

'use strict';

var famous = require('famous');
var DOMElement = famous.domRenderables.DOMElement;
var Transitionable = famous.transitions.Transitionable;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();

var boxNode = scene.addChild();

boxNode.setSizeMode('absolute', 'absolute')
    .setAbsoluteSize(300, 300);

var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightblue');

var boxTransitionable = new Transitionable(0);

// Callback is specified but it never successfully runs.
boxTransitionable.set(100, { duration: 1000 }, function () { console.log('this never runs'); });

FamousEngine.init();

Answer 1

没有调用callback 函数的原因是Transitionable 在get() 上更新，并且直到队列项中的所有迭代都完成后才完成。

来自指南：需要注意的是，Transitionables 不会自行更新，而是在调用 .get() 时计算状态。

试试这个代码（取消注释从到行，然后再试一次）：

var DOMElement = famous.domRenderables.DOMElement;
var Transitionable = famous.transitions.Transitionable;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();

var boxNode = scene.addChild();

boxNode.setSizeMode('absolute', 'absolute')
    .setAbsoluteSize(300, 300);

var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightblue');

FamousEngine.init();
var clock = FamousEngine.getClock();

var boxTransitionable = new Transitionable(0);

// Callback is ran at end of state.
function done() { 
  console.log('it runs at the end'); 
}
function start() {
  console.log(boxTransitionable.get(), boxTransitionable.isActive());
  if (boxTransitionable.isActive()) {
    clock.setTimeout(start, 200);
  }
}

//boxTransitionable.from(1).to(100, 'linear', 2000,  done);
boxTransitionable.set(1, { duration: 2000, curve: 'linear' },  done);
start();

Transitionable 是两种状态之间的过渡（补间）。以下代码 sn -p 是一个使用 Transitionable 使用自定义组件定位节点的示例。

var DOMElement = famous.domRenderables.DOMElement;
var Transitionable = famous.transitions.Transitionable;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();
FamousEngine.init();

var boxNode = scene.addChild();

boxNode.setSizeMode('absolute', 'absolute')
    .setAbsoluteSize(100, 100)
    .setPosition(0,0,0);

boxNode.addUIEvent('click');

var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightblue');
boxElement.setContent('Click Me');

var clock = FamousEngine.getClock();

var boxTransitionable = new Transitionable(0);

var myComponent = {
  id: null,
  node: null,
  onMount: function (node) {
      this.id = node.addComponent(this);
      this.node = node;
  },
  onReceive(type, event) {
    if (type === 'click') {
      this.node.requestUpdate(this.id);
      boxTransitionable.from(0).to(300, 'outBounce', 2000,  done);
      boxTransitionable.set(0, { duration: 2000, curve: 'outBounce' },  done);
    }
  },
  onUpdate: function() {
    if (boxTransitionable.isActive()) {
      var xpos = boxTransitionable.get();
      console.log(xpos, boxTransitionable.isActive());
      this.node.setPosition(xpos,0,0);
      this.node.requestUpdateOnNextTick(this.id);
    }
  }
};
boxNode.addComponent(myComponent);

// Callback is specified but it never successfully runs.
function done() { 
  console.log('at the end'); 
}

            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
              
            }
            body {
                position: absolute;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-font-smoothing: antialiased;
                -webkit-tap-highlight-color: transparent;
                background-color: black;
                -webkit-perspective: 0;
                perspective: none;
                overflow: hidden;
            }

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Famous0.6.2</title>
        <link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
        <meta name="description" content="Transition callback Famous@0.6.2">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
    </head>
    <body>
    </body>
</html>