使用 StateModifier 在 famousJS 中实现无限动画

Question

我想要一个像心脏一样的圆圈，一个跳动的动画。所以圆圈首先缩放到 75%，然后缩放到 100%。我想让它成为一个无限循环。

代码：

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);

有人知道如何实现吗？

Answer 1

使用回调并将 setTransform 包装在一个函数中，让每个回调在完成时相互调用。

示例运行片段

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>

使用 StateModifier 在 famousJS 中实现无限动画

Implementing infinite animation in famousJS with StateModifier

scale

infinite

famo.us

示例运行片段

使用 StateModifier 在 famousJS 中实现无限动画

Implementing infinite animation in famousJS with StateModifier

scale

infinite

famo.us

示例运行 片段

示例运行片段