Cómo rotar con facilitación de la plataforma FAMO.US

Question

Di que tengo una superficie unida a un modificador.Luego configuré a un oyente que reaccione para hacer clic en eventos girando la superficie con una alivia.Estoy encontrando que cuando el ángulo de rotación llega a 2pi, la superficie girará rápidamente de manera incorrecta a la siguiente posición de rotación.¿Hay alguna manera de hacer que los artículos gire sin cesar con la flexibilación?

Answer 1

La pregunta de la flexibilización infinita es un poco borrosa, pero espero que su búsqueda se alive en el principio y luego sigue adelante.Para escalar la flexibilización, esa parte debe ser finita.Así que rompería esto en dos (o tres si necesita una rampa hacia abajo). Aquí está el código (necesita trabajar la velocidad de aceleración cuando cambie la transición).

/* 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();

});