Another question while learning the new Famous Engine: When setting a new state for a transitionable, you are allowed to set a callback for when the transition finishes. For me, the transition tweens to the final number for the specified duration, but the callback isn't run. here's my code:
'use strict';
var famous = require('famous');
var DOMElement = famous.domRenderables.DOMElement;
var Transitionable = famous.transitions.Transitionable;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;
// Create scene.
var scene = FamousEngine.createScene();
var boxNode = scene.addChild();
boxNode.setSizeMode('absolute', 'absolute')
.setAbsoluteSize(300, 300);
var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightblue');
var boxTransitionable = new Transitionable(0);
// Callback is specified but it never successfully runs.
boxTransitionable.set(100, { duration: 1000 }, function () { console.log('this never runs'); });
FamousEngine.init();
The reason there is no call to the callback
function is that the Transitionable
is updated on a get()
and does not complete until all iterations in the queue item have completed.
From Guides: It is important to note that Transitionables do not update on their own, they instead calculate the state at the time .get() is called.
Try this code (uncomment from-to line and try it again):
var DOMElement = famous.domRenderables.DOMElement;
var Transitionable = famous.transitions.Transitionable;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;
// Create scene.
var scene = FamousEngine.createScene();
var boxNode = scene.addChild();
boxNode.setSizeMode('absolute', 'absolute')
.setAbsoluteSize(300, 300);
var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightblue');
FamousEngine.init();
var clock = FamousEngine.getClock();
var boxTransitionable = new Transitionable(0);
// Callback is ran at end of state.
function done() {
console.log('it runs at the end');
}
function start() {
console.log(boxTransitionable.get(), boxTransitionable.isActive());
if (boxTransitionable.isActive()) {
clock.setTimeout(start, 200);
}
}
//boxTransitionable.from(1).to(100, 'linear', 2000, done);
boxTransitionable.set(1, { duration: 2000, curve: 'linear' }, done);
start();
The Transitionable
is a transition between two states over time (tween). The following code snippet is an example using the Transitionable to position a node using a custom component.
var DOMElement = famous.domRenderables.DOMElement;
var Transitionable = famous.transitions.Transitionable;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;
// Create scene.
var scene = FamousEngine.createScene();
FamousEngine.init();
var boxNode = scene.addChild();
boxNode.setSizeMode('absolute', 'absolute')
.setAbsoluteSize(100, 100)
.setPosition(0,0,0);
boxNode.addUIEvent('click');
var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightblue');
boxElement.setContent('Click Me');
var clock = FamousEngine.getClock();
var boxTransitionable = new Transitionable(0);
var myComponent = {
id: null,
node: null,
onMount: function (node) {
this.id = node.addComponent(this);
this.node = node;
},
onReceive(type, event) {
if (type === 'click') {
this.node.requestUpdate(this.id);
boxTransitionable.from(0).to(300, 'outBounce', 2000, done);
boxTransitionable.set(0, { duration: 2000, curve: 'outBounce' }, done);
}
},
onUpdate: function() {
if (boxTransitionable.isActive()) {
var xpos = boxTransitionable.get();
console.log(xpos, boxTransitionable.isActive());
this.node.setPosition(xpos,0,0);
this.node.requestUpdateOnNextTick(this.id);
}
}
};
boxNode.addComponent(myComponent);
// Callback is specified but it never successfully runs.
function done() {
console.log('at the end');
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
background-color: black;
-webkit-perspective: 0;
perspective: none;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Famous0.6.2</title>
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="description" content="Transition callback [email protected]">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
</head>
<body>
</body>
</html>