Question

我的index.js看起来像这样

'use strict';

// Famous dependencies
var DOMElement = require('famous/dom-renderables/DOMElement');
var FamousEngine = require('famous/core/FamousEngine');
var CustomNode = require('./CustomNode');
var Animation = require('./components/Animation');
// Boilerplate code to make your life easier
FamousEngine.init();

var scene = FamousEngine.createScene('body');
var rootNode = scene.addChild();

var plane = rootNode.addChild(new CustomNode('url(images/plane_100x100.png)', '#B3E5FC', 200, 200, 100, 100));
var animation = new Animation(plane);
animation.start();

其中CustomNode.js是

var DOMElement = require('famous/dom-renderables/DOMElement');
var FamousEngine = require('famous/core/FamousEngine');
var Transitionable = require('famous/transitions/Transitionable');
var Size = require('famous/components/Size');
var Node = require('famous/core/Node');
function CustomNode(bgUrl, bgColor, xpos, ypos, width, height) {
  Node.call(this);
  this.setSizeMode('absolute', 'absolute')
          .setAbsoluteSize(width, height)
          .setPosition(xpos,ypos);
  this.nodeDomElement = new DOMElement(this);
  this.nodeDomElement.setProperty('backgroundImage', bgUrl);
  this.nodeDomElement.setProperty('zIndex', '2');
  this.nodeDomElement.setProperty('background-color', bgColor);
}
CustomNode.prototype = Object.create(Node.prototype);
CustomNode.prototype.constructor = CustomNode;
module.exports = CustomNode;

而Animation.js看起来像这样

var FamousEngine = require('famous/core/FamousEngine');
var Transitionable = require('famous/transitions/Transitionable');

// A component that will animate a node's position in x.
function Animation (node) {
    // store a reference to the node
    this.node = node;
    // get an id from the node so that we can update
    this.id = node.addComponent(this);
    // create a new transitionable to drive the animation
    this.xPosition = new Transitionable(100);
}

Animation.prototype.start = function start () {
    // request an update to start the animation
    this.node.requestUpdate(this.id);
    // begin driving the animation
    this.xPosition.from(100).to(1000, {duration: 1000});
    this.node.requestUpdate(this.id);
};

Animation.prototype.onUpdate = function onUpdate () {
    // while the transitionable is still transitioning
    // keep requesting updates
    if (this.xPosition.isActive()) {
        // set the position of the component's node
        // every frame to the value of the transitionable
        this.node.setPosition(this.xPosition.get());
        this.node.requestUpdateOnNextTick(this.id);
    }
};
module.exports = Animation;

但是当我运行着名的dev时，我收到以下错误

Uncaught TypeError: this._queue[1] is not a function

请注意，我正在使用着名/引擎的开发分支

此代码发布于github

https://github.com/codesdk/famous_engine_issue_debug_animation

轻松克隆

请使用自述文件中的说明

Answer 1

确保将正确的参数传递给Transitionable＃to：

this.xPosition.from(100).to(1000, 'linear', 1000);

Answer 2

您可能混淆了set的{{1}}和to方法。

Transitionable

应该是：

this.xPosition.from(100).to(1000, {duration: 1000});

    this.xPosition.from(100).to(1000, 'linear', 1000);

请记住，节点的Animation.prototype.start = function start () { // request an update to start the animation this.node.requestUpdate(this.id); // begin driving the animation this.xPosition.from(100).to(1000, 'linear', 1000); this.node.requestUpdate(this.id); };会占用所有三个轴setPosition

setPosition(x,y,z)

未捕获的TypeError：this._queue [1]不是函数

2 个答案: