famo.us : 어떻게 텍스트 상자에서 사라집니다

Question

시퀀스에서보기가 사라지는 username/password/login_button 표면을 갖고 싶습니다. 나는 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; 
    } 
}); 

불투명도는 항상 부모 노드의 불투명도를 곱한하고 있다는 사실에 관한 문제가 나는 0으로 설정 때문에 이후 계층 구조가 아니라면 아래의 다른 요소로 곱하면 0보다 커야합니다.

Answer 1

내 질문에 대한 답변을 찾았습니다. 나는 단순히 시작과 끝 불투명도가 새로운 수정 기능 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);