Comment faire pivoter avec assouplissement à l'aide de la plate-forme FAMO.US

Question

Disons que j'ai une surface attachée à un modificateur.Ensuite, j'ai mis en place un auditeur pour réagir pour cliquer sur des événements en faisant pivoter la surface avec un assouplissement.Je constate que lorsque l'angle de rotation frappe 2pi, la surface tourne rapidement le mauvais chemin vers la prochaine position de rotation.Existe-t-il un moyen de faire pivoter des objets sans fin avec l'assouplissement?

Answer 1

La question de l'assouplissement infini est un peu floue, mais je m'attends à ce que vous envisagez de vous fatiguer dans le début et de continuer à aller.Afin d'accabler l'assouplissement, cette partie doit être finie.Donc, je briserais cela jusqu'à deux (ou trois si vous avez besoin d'une rampe vers le bas). Voici le code (vous devez travailler à la vitesse lorsque vous modifiez la 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();

});