Question

我是famo.us的新手。我感兴趣的是创建表面/物体处于连续运动中的动画，并且其不透明度也在不断变化（范围从0-> 1和后退）。我能够连续旋转表面并将其不透明度从1改为0一次。我被困在这里，因为我不知道如何继续前进。有人可以给我一些想法吗？

Answer 1

有几种方法可以做到这一点。这取决于你想要达到的确切效果。下面是一个使用Modifier及其opacityFrom方法实现永无止境的正弦效果的示例。

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var Modifier = require('famous/core/Modifier');

var context = Engine.createContext();

surface = new Surface({
    size:[200,200],
    properties:{
        backgroundColor:'green'
    }
})

surface.node = new RenderNode();
surface.mod = new Modifier({origin:[0.5,0.5]});

var startTime = Date.now();

var period = 1000;

surface.mod.opacityFrom(function(){
    currentTime = Date.now();
    return Math.abs(Math.sin((((currentTime - startTime) / period))));
});

surface.node.add(surface.mod).add(surface);

context.add(surface.node);

或者如果您愿意，只需使用StateModifier中的setOpacity中的回调函数即可实现永无止境的动画。在这里，我在嵌套回调中递归调用相同的函数。这就是看起来的样子。

希望其中一些有帮助！

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var StateModifier = require('famous/modifiers/StateModifier');

var Easing = require('famous/transitions/Easing');

var context = Engine.createContext();

surface = new Surface({
    size:[200,200],
    properties:{
        backgroundColor:'green'
    }
})

surface.node = new RenderNode();
surface.mod = new StateModifier({origin:[0.5,0.5]});

surface.state = 0
surface.setState = function(state,transition){
    surface.state = (state == 0) ? 1 : 0;
    surface.mod.setOpacity(state,transition,function(){
        surface.setState(surface.state,transition);
    });
}

surface.node.add(surface.mod).add(surface);

context.add(surface.node);

surface.setState(surface.state,{duration:1000, curve:Easing.inOutQuad});

famo.us中的动画改变了表面的不透明度

1 个答案: