Implementing infinite animation in famousJS with StateModifier - scale

Question

I want a circle to act like a heart does, a pulsing animation. So the circle first scales to 75%, then to 100%. I want to make this an infinite loop.
Code:
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 Easing = require('famous/transitions/Easing');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [180, 180],
properties: {
backgroundColor: 'grey',
borderRadius: '50%'
}
});
var stateModifier = new StateModifier();
stateModifier.setTransform(
Transform.scale(0.7, 0.7, 1),
{ duration : 1050 }
);
stateModifier.setTransform(
Transform.scale(1, 1, 1),
{ duration : 450 }
);
mainContext.add(stateModifier).add(surface);
Anyone knows how to implement this?

Answer 1

Use the callback and wrap the setTransform in a function to have each callback call each other when they finish.
Example running snippet
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 Easing = require('famous/transitions/Easing');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [180, 180],
properties: {
backgroundColor: 'grey',
borderRadius: '50%'
}
});
var stateModifier = new StateModifier();
function min() {
stateModifier.setTransform(
Transform.scale(0.7, 0.7, 1), {
duration: 1050
},
max
);
}
function max() {
stateModifier.setTransform(
Transform.scale(1, 1, 1), {
duration: 450
},
min
);
}
mainContext.add(stateModifier).add(surface);
surface.on('deploy', function() {
min();
});
});
require(['main']);
<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.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>