Implementing infinite animation in famousJS with StateModifier

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>