1

我希望用户名/密码/登录按钮表面按顺序淡入视图。我想我知道如何使用 的callback参数菊花链动画StateModifier.setTransform，但我不知道如何让某些东西淡入视野。这是我的代码，只是试图让登录按钮淡入：

/*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;
    }
});

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

4

1 回答 1

3

我找到了我的问题的答案。我只是添加了一个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);
于 2014-05-15T15:02:38.090 回答