I am playing with Famo.us and trying out some of thier layout and transitions.
I am trying to build a set of columns that just fall to the bottom then restart and fall again. Even and odd columns is a different color and starts at a different time to look staggared.
What I am finding is the animation is quickly going out of sync. Is there a way to use the same modifier over a bunch of views. I feel my problem is I created this huge array of views and of modifiers and then doing all the animations seperately. I think if I could just utilize two modifiers maybe they would better stay in sync.
Famo.us Version
define('main', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var GridLayout = require("famous/views/GridLayout");
var el = document.getElementById('famous-app');
var View = require('famous/core/View');
var Modifier = require('famous/core/Modifier');
surfaceCount = 550;
width = parseInt($('#famous-app').width());
boxSize = width / surfaceCount;
var mainContext = Engine.createContext(el);
var grid = new GridLayout({
dimensions: [surfaceCount, 1]
})
var views = [];
var modifiers = [];
grid.sequenceFrom(views);
for (var i = 0; i < surfaceCount; i++) {
var stateModifier = new StateModifier();
var view = new View();
var color;
// Set Even Bars to be blue
if (parseInt(i) % 2 == 0) {
color = "blue";
}
// Set Odd Bars to be Green
else {
color = "green";
}
// Create the Surface
var surface = new Surface({
size: [boxSize, 300],
properties: {
color: color,
textAlign: 'center',
backgroundColor: color
}
});
// Add the Surface and its unique Modifier to the View
view.add(stateModifier).add(surface);
// Create an array of all Views and thier Modifiers
modifiers.push(stateModifier);
views.push(view);
}
mainContext.add(grid);
// Set up the loop to do the animation
var setup = function() {
// Go through and start all the bars at the top
for (var index = 0; index < modifiers.length; index++) {
modifiers[index].setTransform(
Transform.translate(0, -300, 0))
}
// Start the animation on the odd bars after 500 ms delay.
window.setTimeout(function() {
for (var index = 1; index < modifiers.length; index += 2) {
transform(modifiers[index], 0);
}
}, 500);
// Start the animation on the even bars
for (var index = 0; index < modifiers.length; index += 2) {
transform(modifiers[index]);
}
}
// Do the actual transform, when finished repeat
var transform = function(modifier) {
modifier.setTransform(
// Slide bar down over one second
Transform.translate(0, 300, 0), {
duration: 1000,
curve: 'linear'
},
function() {
modifier.setTransform(
// Move Bar back to starting position
Transform.translate(0, -300, 0), {
duration: 0,
curve: 'linear'
},
function() {
// Repeat
transform(modifier);
});
});
}
setup();
});
require(['main']);.testing-containers {
height: 600px;
}
.test-container {
height: 300px;
overflow: hidden;
margin: 24px 0;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.4/famous.css" />
<script src="http://code.famo.us/famous/0.3.4/famous.min.js"></script>
<div class="test-container">
<div id="famous-app" style="overflow:hidden;"></div>
</div>
