How to rotateZ with easing using the famo.us platform

Question

Say I have a surface attached to a modifier. Then i set up a listener to react to click events by rotating the surface with an easing. I am finding that when the rotation angle hits 2PI the surface will quickly spin the wrong way to the next rotation position. Is there a way to make items rotate endlessly with easing?

Answer 1

The question of infinite easing is a little fuzzy, but I expect that your looking to ease into the start and then just keep going. In order to scale the easing, that part needs to be finite. So I'd break this up into to two (or three if you need a ramp down) parts. Here is the code (You do need to work out the speed match when you change the transition.)

/* globals define */
define(function(require, exports, module) {
    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var StateModifier = require('famous/modifiers/StateModifier');
    var Transform = require('famous/core/Transform');
    var Easing = require('famous/transitions/Easing');
    var Modifier = require('famous/core/Modifier');
    var Transitionable = require("famous/transitions/Transitionable");

    function app() {

        var mainContext = Engine.createContext();

        var baseTime;
        var foreverFlag = false;

        var surface = new Surface({
            size: [20, 20],
            content: 'LearnFamo.us',
            classes: ['red-bg'],
            properties: {
                textAlign: 'center',
                lineHeight: '20px'
            }
        });

        function goForever() {
            baseTime=Date.now();
            foreverFlag = true;
        }

        var trans = new Transitionable(0);
        trans.set(Math.PI,
            {duration:5000, curve:Easing.inElastic},
            goForever
            );

        var surfmod1 = new StateModifier({
            align: [0.5,0.5],
            origin: [0.5,0.5]
        });

        var surfmod2 = new Modifier({
            align: [0.5,0.5],
            origin: [0.5,0.5]
        });
        surfmod2.transformFrom(
            function() {
                return Transform.rotateZ(foreverFlag?(Math.PI+Math.PI/1000 * (Date.now() - baseTime)):trans.get());
            }
        );

        mainContext.add(surfmod1).add(surfmod2).add(surface);
    }

    app();

});