Как создать бесконечную анимацию с помощью famo.us?

Я хочу создать бесконечную анимацию, используя известные (например, бесконечную катящуюся шестерню или случайно трясущуюся поверхность). Должен ли я написать собственный Transitionable с бесконечной продолжительностью или есть что-то более разумное для достижения этого?


famo.us
person Flavien Volken    schedule 27.05.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я бы рекомендовал использовать метод преобразования модификаторов для определения положения или поворота на основе времени. Это позволяет вам установить преобразование, которое будет обновляться при каждом тике движка, но будет контролироваться через фактическое время.

Вот пример тому..

Надеюсь, поможет!

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);
person johntraver    schedule 27.05.2014
comment
Было бы одинаково использовать Timer.setInterval, а затем surface.mod.setTransform внутри него? - person HP.; 27.05.2014
comment
Разница в том, что модификатор использует состояние, поэтому для модификатора вы должны использовать transformFrom. Теоретически вы могли бы использовать StateModifier с setTransform, но я считаю, что transformFrom лучше всего, когда это возможно. - person johntraver; 27.05.2014
comment
Правильно, я имел в виду StateModifier. Я всегда путаюсь между этими двумя. Следует ли называть его обратным? РЖУ НЕ МОГУ - person HP.; 28.05.2014
comment
Да, я только некоторое время использовал StateModifier, думая, что модификатор устарел.. только setTransform на модификаторе устарел.. Теперь я люблю свой модификатор :) - person johntraver; 28.05.2014
comment
Правильно, и кажется, что я могу использовать только Transitionable с Modifier, но не StateModifier. Это оставляет меня вопрос: зачем вообще создавать StateModifier? - person HP.; 28.05.2014
comment
Похоже на то, что вы упомянули .. Было бы не странно, если бы это было просто названо как-то иначе :) Мне нравится верить, что все это ради эффективности! - person johntraver; 28.05.2014

arrow_upward
0
arrow_downward

Ответ заключается в использовании Transitionables

Сначала вы используете use Transitionable.set(destination, {duration: VALUE})

Каждый движок «пререндерит» (каждый кадр), вы используете 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);
};
person neaumusic    schedule 28.05.2014