Question

我试图增加表面的比例或大小，以便在我点击它时占据窗口。假设已创建表面并将其称为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);

Answer 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
    }
});

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

1 个答案: