famo.us：文本框中的淡入度

我想让用户名/密码/登录按钮按顺序淡入视图。我想我知道如何使用

StateModifier.setTransform

的

callback

参数对动画进行菊花链，但我不知道如何使某些内容淡入视图。这是我试图让登录按钮淡入的代码：

/*globals define*/
define(function(require, exports, module) {
    // import dependencies

    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');
    var ModifierChain       = require("famous/modifiers/ModifierChain");
    var View = require('famous/core/View');
    var InputSurface      = require('famous/surfaces/InputSurface');

    // create the main context
    var mainContext = Engine.createContext();

    var Centered = function() {
        return new StateModifier({ origin: [0.5, 0.5] });
    };

    var Lefted = function() {
        return new StateModifier({ p: [0, 0.5] });
    };

    var Righted = function() {
        return new StateModifier({ origin: [1, 0.5] });
    };

    var Transparent = function () {
        var stateModifier = new StateModifier();
        stateModifier.setOpacity(0);
        return stateModifier;
    };

    var Scale = function (scale, transition, callback) {
        if (typeof transition == 'undefined') transition = immediately;

        var stateModifier = new StateModifier();
        stateModifier.setTransform(Transform.scale(scale, scale, 1), transition, callback);
        return stateModifier;
    };

    var FadeTo = function (opacity, transition, callback) {
        if (typeof transition == 'undefined') transition = immediately;

        var stateModifier = new StateModifier();
        stateModifier.setOpacity(opacity, transition, callback);
        return stateModifier;
    };

    var Translate = function(x, y, z, transition, callback) {
        if(typeof x == 'undefined') x = 0;
        if (typeof y == 'undefined') y = 0;
        if (typeof z == 'undefined') z = 0;
        if (typeof transition == 'undefined') transition = immediately;

        var stateModifier = new StateModifier();
        stateModifier.setTransform(Transform.translate(x, y, z), transition, callback);
        return stateModifier;
    };

    var Parallel = function (modifiers) {
        var result = new ModifierChain();

        for (var i = 0; i < modifiers.length; i++) {
            result.addModifier(modifiers[i]);
        }

        return result;
    };

    var famousOrange = '#FA5C4F';

    var oneSecondEaseInOut = { duration: 1000, curve: 'easeInOut' };
    var fastEaseInOut = { duration: 100, curve: 'easeInOut' };
    var immediately = { duration:0, curve: 'easeInOut' };

    mainContext.add(getLoginView());

    function getLoginView() {
        var loginView = new View();

        var usernameSurface = new InputSurface({
              size: [120, 20],
              properties: {
                color: famousOrange,
                textAlign: 'center',
                fontFamily: 'arial'
              }
            });

        var passwordSurface = new InputSurface({
              size: [120, 20],
              properties: {
                color: famousOrange,
                textAlign: 'center',
                fontFamily: 'arial'
              },
                type: 'password'
        });

        var loginButton = new Surface({
            size: [120, 30],
            content: 'Login',
            opacity: '50%',
            properties: {
                color: 'white',
                textAlign: 'center',
                lineHeight: '27px',
                borderColor: 'white',
                borderWidth: '1px',
                borderStyle: 'solid',
                backgroundColor: famousOrange,
                fontFamily: 'arial',
            }
        });

        loginView
            .add(Centered())
            .add(Translate(0, -15))
            .add(usernameSurface);

        loginView
            .add(Centered())
            .add(Translate(0, 15))
            .add(passwordSurface);

        loginView
            .add(Transparent()) // set the opacity to 0 at first
            .add(Centered())
            .add(Translate(0, 50, 0, oneSecondEaseInOut))
            .add(FadeTo(1, oneSecondEaseInOut)) // transition opacity to 1 over the next 1 second
            .add(loginButton);

        return loginView;
    }
});

/*全局定义*/
定义（功能（需求、导出、模块）{
//导入依赖项
var Engine=require（“著名/核心/引擎”）；
var表面=要求（“著名/核心/表面”）；
var Transform=require（‘著名/核心/转换’）；
var StateModifier=require（'著名的/modifiers/StateModifier'）；
var ModifierCain=要求（“著名/修改者/修改者Cain”）；
var View=require（‘著名/核心/视图’）；
var InputSurface=require（‘著名的/surfaces/InputSurface’）；
//创建主上下文
var mainContext=Engine.createContext（）；
var Centered=function（）{
返回新的StateModifier（{origin:[0.5,0.5]}）；
};
var Lefted=函数（）{
返回新的StateModifier（{p:[0，0.5]}）；
};
var Righted=函数（）{
返回新的StateModifier（{origin:[1，0.5]}）；
};
var Transparent=函数（）{
var stateModifier=新stateModifier（）；
stateModifier.setOpacity（0）；
返回状态修饰符；
};
var Scale=函数（缩放、转换、回调）{
如果（转换类型==‘未定义’）转换=立即；
var stateModifier=新stateModifier（）；
stateModifier.setTransform（Transform.scale（scale，scale，1），transition，callback）；
返回状态修饰符；
};
var FadeTo=函数（不透明度、转换、回调）{
如果（转换类型==‘未定义’）转换=立即；
var stateModifier=新stateModifier（）；
setOpacity（不透明度、转换、回调）；
返回状态修饰符；
};
var Translate=函数（x、y、z、转换、回调）{
如果（typeof x==‘未定义’）x=0；
如果（typeof y==‘未定义’）y=0；
如果（typeof z==‘未定义’）z=0；
如果（转换类型==‘未定义’）转换=立即；
var stateModifier=新stateModifier（）；
stateModifier.setTransform（Transform.translate（x，y，z），transition，callback）；
返回状态修饰符；
};
var Parallel=函数（修饰符）{
var结果=新的ModifierCain（）；
对于（var i=0；i

---

这个问题是否与不透明度总是与父节点的不透明度相乘这一事实有关，因此，由于我在层次结构上将其设置为0，因此不可能与下面的任何其他值相乘，使其大于零？

我找到了问题的答案。我只是添加了一个新的修改器函数

Fade

，它有一个开始和结束不透明度：

var Fade = function (startOpacity, endOpacity, transition, callback) {
    var stateModifier = new StateModifier();
    stateModifier.setOpacity(startOpacity);
    stateModifier.setOpacity(endOpacity, transition, callback);
    return stateModifier;
};

然后将显示登录按钮的代码更改为：

loginView
    .add(Centered())
    .add(Translate(0, 50, 0, oneSecondEaseInOut))
    .add(Fade(0, 1, oneSecondEaseInOut)) // transition opacity from 0 to 1 over 1 second
    .add(loginButton);