famo.us では、サーフェス上で修飾子を使用してアニメーション/インタラクションを実行する簡単な方法がいくつかあります。たとえば、サーフェスのドラッグとアニメーション化については、famo.us ガイドに非常にわかりやすい例があります。
...assume require('') statements above here...
var mainContext = Engine.createContext();
var draggable = new Draggable({...});
var surface = new Surface({...});
var transitionableTransform = new TransitionableTransform();
var modifier = new Modifier({
origin: [.5, .5],
transform: transitionableTransform
});
surface.pipe(draggable);
surface.on('click', function () {
transitionableTransform.setScale([3, 3, 1], {duration: 300});
});
mainContext.add(draggable).add(surface);
ただし、より複雑なシナリオでは、インタラクションに応じて必要に応じて開始/停止/反転して、複数のアニメーションを調整したい場合があります。そのような場合、期間を指定して変換を追加するだけの簡単な方法が最初は機能する可能性がありますが、ユーザーがそれらを操作するほど同期が失われないという保証はありません。
#render メソッドは、いくつかの種類の調整されたアニメーションを配置する一般的な場所のようです。それについての私の限られた理解は、レンダリングされているノードの「仕様」を識別し、レンダリングループの各フレームで呼び出されるということです。したがって、特定のアニメーションの各ステップを識別し、それがどのように相互作用するかに応じて、アニメーションの途中で停止し、必要に応じて変更できる場合があります。たとえば、フリッパーはこのように動作するようです
(src/views/Flipper.js):
Flipper.prototype.render = function render() {
var pos = this.state.get(); //state is a transitionable
var axis = this.options.direction;
var frontRotation = [0, 0, 0];
var backRotation = [0, 0, 0];
frontRotation[axis] = Math.PI * pos;
backRotation[axis] = Math.PI * (pos + 1);
if (this.options.cull && !this.state.isActive()) {
if (pos) return this.backNode.render();
else return this.frontNode.render();
}
else {
return [
{
transform: Transform.rotate.apply(null, frontRotation),
target: this.frontNode.render()
},
{
transform: Transform.rotate.apply(null, backRotation),
target: this.backNode.render()
}
];
}
};
アニメーション時に #render が果たすべき役割に関するドキュメントはありますか? または、render メソッドがどのように正確に機能するか (たとえば、返される仕様を構築する正しい方法)。render はより低レベルであると想定されていますか? もしそうなら、別の構造を使用する必要がありますか?