如何使用 famo.us 中的点击事件增加表面大小？答案

【问题标题】：How to increase surface size using a click event within famo.us?如何使用 famo.us 中的点击事件增加表面大小？
【发布时间】：2015-02-20 06:13:25
【问题描述】：

我正在尝试增加表面的比例或大小，以便在我单击它时占据窗口。假设创建了一个表面并称为surface3。

我有一个标记为标志的布尔值，每次单击 surface3 时都会更改其值。 true 将引发 'growSurface' 事件，eventHandler 将响应该事件。

我不知道如何使用 Famous.Transitionable 平滑地制作动画以补间规模或大小的增加。我能够成功地放置一个surface3.setSize([undefined, undefined]); 让它跳起来占据窗口。如何使用 Transitionable 使其按大小或按比例设置动画？

Template.projects.rendered = function() {

    Famous.Engine = famous.core.Engine;
    Famous.Surface = famous.core.Surface;


    Famous.Transform = famous.core.Transform;
    Famous.Transitionable = famous.transitions.Transitionable;
    Famous.Modifier = famous.core.Modifier;
    Famous.StateModifier = famous.modifiers.StateModifier;
    Famous.Easing = famous.transitions.Easing;
    Famous.EventHandler = famous.core.EventHandler;

    var mainContext = Famous.Engine.createContext();
    var eventHandler = new Famous.EventHandler();

    var surface3 = new Famous.Surface({
      size: [300, $(window).height()],
      content: "surface 3",
      properties: {
        color: '#FFF',
        backgroundColor: 'green'
      }
    });

    var flag = false;

    var scaleModifier = new Famous.Modifier({
      size: [300, $(window).height()]
    });

    scaleModifier.sizeFrom(function(){
      return transitionable.get();
    });

    eventHandler.on('growSurface', function(){
        // can do surface3.setSize( $(window).width() );
        var transitionable = new Famous.Transitionable( 300 );
        return transitionable.set( $(window).width(), {duration: 1500} );

    });

    eventHandler.on('shrinkSurface', function(){
        console.log('shrink surface init');
        // code to shrink size back to [300, $(window).height()]
        // should reverse 'growSurface' event
        // can do surface3.setSize([300, undefined]);
    });

    // Handles Clicks
    surface3.on('click', function(event) {
        if (flag === false) {
            eventHandler.emit('growSurface');           
            flag = !flag
        } else {
            eventHandler.emit('shrinkSurface');
            flag = !flag
        }
    });

mainContext.add(scaleModifier).add(alignSurface3Modifier).add(surface3);

【问题讨论】：

标签： meteor famo.us

【解决方案1】：

我在 growSurface 和 shrinkSurface 事件上都制作了动画：

var eventHandler = new Famous.EventHandler();

var flag = false;

var transitionable = new Famous.Transitionable([300, undefined]);

var scaleModifier = new Famous.Modifier({
    size: [300, $(window).height()]
});

scaleModifier.sizeFrom(function(){
    return transitionable.get();
});


eventHandler.on('growSurface', function(){
    surface3.setSize([undefined, $(window).height()]);
    transitionable.set([$(window).width(), $(window).height()], { duration: 1500 });
});

eventHandler.on('shrinkSurface', function(){
    transitionable.set([300, $(window).height()], { duration: 1500 });

});

// Handles Clicks
surface3.on('click', function(event) {
    if (flag === false) {
        eventHandler.emit('growSurface');           
        flag = !flag
    } else {
        eventHandler.emit('shrinkSurface');
        flag = !flag
    }
});

【讨论】：