如何使用famo.us平台进行轻松旋转
假设我有一个附加到修改器的曲面。然后,我设置了一个监听器,通过旋转曲面来对单击事件做出反应。我发现,当旋转角度达到2PI时,曲面将以错误的方式快速旋转到下一个旋转位置。有没有办法让物品随着放松而无休止地旋转?无限放松的问题有点模糊,但我希望你能从一开始就放松下来,然后继续前进。为了扩大宽松的规模,这一部分需要是有限的。所以我把它分成两个部分(或者三个,如果你需要一个渐变的话)。 下面是代码(当您更改过渡时,确实需要计算速度匹配。)如何使用famo.us平台进行轻松旋转,famo.us,Famo.us,假设我有一个附加到修改器的曲面。然后,我设置了一个监听器,通过旋转曲面来对单击事件做出反应。我发现,当旋转角度达到2PI时,曲面将以错误的方式快速旋转到下一个旋转位置。有没有办法让物品随着放松而无休止地旋转?无限放松的问题有点模糊,但我希望你能从一开始就放松下来,然后继续前进。为了扩大宽松的规模,这一部分需要是有限的。所以我把它分成两个部分(或者三个,如果你需要一个渐变的话)。 下面是代码(当您更改过渡时,确实需要计算速度匹配。) /* globals define */ define(func
/* 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();
});