famo.us - 如何实现著名的移动设计汉堡侧菜单？

Question

Famous 实现这些众所周知的移动应用程序设计模式的最佳方式是什么？

！）“汉堡包”和像这个jasny示例这样的侧面菜单？

2）Table-View，过渡到全屏详情页，有点像： http: //goratchet.com/examples/app-movies/

谢谢！

Answer 1

您应该知道，famo.us 大学音色菜单课程现已推出。这是我很久以前就做过的一个版本。这里的一个文件比 27 类版本更多的是关键问题的实现。在此之后，我最终将菜单抽象为通用工具。除了您使用的转换之外，下面的菜单与标准（一层深）菜单之间实际上几乎没有区别。这是一个拖放菜单。您当然也可以通过单击触发打开和/或关闭...您还可以查看代码并在codefamo.us上实时播放。

/*globals define*/
define(function(require, exports, module) {
    'use strict';
    // 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 Easing = require('famous/transitions/Easing');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var EventHandler = require('famous/core/EventHandler');
var MouseSync = require('famous/inputs/MouseSync');
var TouchSync = require('famous/inputs/TouchSync');
var Draggable = require('famous/modifiers/Draggable');

    var mainContext = Engine.createContext();


    // Content Page...
    var coverState = true; 
    var coverPos = 0;


    //var coverMod = new StateModifier();
    var coverDrag = new Draggable({
        projection: 'x'
    });
    var coverSurface = new Surface({
        size:[undefined,undefined],
        content:'click to open',
        properties:{
            color:'white',
            backgroundColor:'#44f',
            zIndex:'3'
        }
    });
    //mainContext.add(coverMod).add(coverDrag).add(coverSurface);
    mainContext.add(coverDrag).add(coverSurface);
    coverDrag.activate();

    function coverReset() {
        coverDrag.setPosition([0,0],    
            { duration : 100, curve: 'easeInOut' },
            function() { 
                coverSurface.setContent('drag to open');
                coverPos = 0;
            }
        );
        coverState = true;
    }
    function coverDrawOut() {
        coverDrag.setPosition([200,0],
            { duration : 600, curve: 'easeInOut' },
            function() { 
                coverSurface.setContent('drag to close');
                coverPos = 200;
            }
        );
        coverState=false;
    }

    coverDrag.on('update',function(data) {
        //console.log(data);
        if(data.position[0]>60) {
            menuFadeIn();
        }
    });
    coverDrag.on('end',function(data) {
        if(data.position[0]<100) {
            coverReset();
            menuFadeOut();
        }else  {
            coverDrawOut();
            menuFadeIn();
        }
    });
    coverSurface.pipe(coverDrag);


    // Menu Items...
    var todaysSpecials = ['pizza','hamburger','french fries','ice cream'];
    var itemSurfs = [];
    var itemMod1 = [];
    var itemMod2 = [];

    // Create menu item surfaces, modifiers, etc.
    for (var i=0;i<todaysSpecials.length;i++) {
         itemSurfs[i] = new Surface({
              size: [150, 30],
              content: '<span class="entypo">&#9776;</span>'+todaysSpecials[i],
              properties: {
                color: 'white',
                textAlign: 'center',
                backgroundColor: '#FA5C4F',
                zIndex:'1'
            }
        });
        itemSurfs[i].menuData = {
            id:i,
            text: todaysSpecials[i]
        };

        //console.log(itemSurfs[i]);
        itemMod1[i] = new StateModifier();
        itemMod2[i] = new StateModifier();
        mainContext.add(itemMod1[i]).add(itemMod2[i]).add(itemSurfs[i]); 
        itemSurfs[i].on('click',function(mouseEventArgs){
            alert('Buy some really good '+mouseEventArgs.origin.menuData.text);
        });
    };

var menuState=true;
// make menu go away
function menuFadeOut() {
    if(menuState) {
    for (var i=0;i<todaysSpecials.length;i++) {
        itemMod1[i].setTransform(Transform.translate(-150, 200+i*40, 0));
        itemMod2[i].setTransform(Transform.rotateZ(-Math.PI/5.5));
    }
    menuState=false;
}
}

// bring menu in
function menuFadeIn() {
    if(!menuState) {
    for (var i=0;i<todaysSpecials.length;i++) {
        itemMod1[i].setTransform(Transform.translate(0,100+i*40, -1),{ duration : 300+i*200, curve: 'easeInOut' });
        itemMod2[i].setTransform(Transform.rotateZ(-Math.PI/5.5));
    }
    menuState=true;
}
}

    // app initial conditions...
    coverReset();
    menuFadeOut();


});