可转换回调在著名引擎中不起作用

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() 上更新，并且在队列项目中的所有迭代完成之前不会完成。

From Guides: It is important to note that Transitionables do not update on their own, they instead calculate the state at the time .get() is called.

尝试此代码（取消注释 from-to 行并重试）：

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 是两个状态之间随时间的过渡 (tween)。以下代码片段是使用 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>

可转换回调在著名引擎中不起作用

Transitionable callback not working in Famous Engine

famous-engine