Question

假设我有一个贴在修饰符上的表面。然后我设置一个监听器，通过缓动旋转表面来对点击事件作出反应。我发现当旋转角度达到2PI时，表面会迅速以错误的方式旋转到下一个旋转位置。有没有办法让物品随着缓和而无休止地旋转？

Answer 1

无限宽松的问题有点模糊，但我希望你想要开始缓解然后继续前进。为了扩大宽松度，该部分需要是有限的。所以我将它分解为两个（或者如果你需要一个减速三个）部分。这是代码（您需要在更改转换时计算速度匹配。）

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

});

如何使用famo.us平台使用缓动旋转Z.

1 个答案: