Question

我愿意使用着名的（例如无尽的滚动齿轮或随机摇动的表面）构建无尽的动画。我应该编写一个具有无限持续时间的自定义 Transitionable ，还是有更聪明的东西来实现这个目标？

Answer 1

我建议使用Modifiers transformFrom方法根据时间定义位置或旋转。这允许您设置将在引擎的每个刻度上更新的变换，但将通过实际时间进行控制。

这是一个例子..

希望它有所帮助！

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

var context = Engine.createContext();

var surface = new Surface({
    size:[200,200],
    content: "Hello",
    properties: {
        lineHeight:"200px",
        color:"white",
        textAlign:"center",
        backgroundColor:'green'
    }
})

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

var startTime = (new Date).getTime();

surface.mod.transformFrom(function(){
    var currentTime = (new Date).getTime();
    var rotation = (currentTime - startTime) / 360.0;
    return Transform.rotate(0,0,rotation);
});

context.add(surface.mod).add(surface);

Answer 2

答案是使用Transitionables

首先使用Transitionable.set（destination，{duration：VALUE}）

每个引擎＆＃39;预渲染＆＃39; （每帧），使用Transitionable.get（）更新修改器转换

在Transitionable结束时，它将运行回调以更新新目标

this.transit = new Transitionable(0);

// ------- when i say twerk, you twerk ----->
var _createWheelMod = function() {
  var _setWheelModRotation = function() {
  Engine.on("prerender", function() {
    this.wheelMod.setTransform(Transform.rotate(0, 0, this.transit.get()));
  }.bind(this));
};

// ------------ charge lasers ------->
var _setDestination = function() {
  this.transit.set(100 + this.transit.get(), {duration: 2e5},
  _setDestination.bind(this)); // callback when the transition has finished
};

_setWheelModRotation.call(this);
_setDestination.call(this);
};

如何使用famo.us构建无尽的动画？

2 个答案: