FAMO.us 플랫폼을 사용하여 쉽게 rotatez하는 방법
-
20-12-2019 - |
문제
나는 수정 자에게 표면이 붙어 있다고 말합니다.그런 다음 Easing으로 표면을 회전시켜 이벤트를 클릭하는 데 반응하는 청취자를 설정했습니다.회전 각도가 2pi가 닿으면 표면이 빠르게 다음 회전 위치로 잘못 회전 할 것입니다.항목을 완화로 끝없이 회전시키는 방법이 있습니까?
해결책
무한 완화의 문제는 약간의 퍼지입니다. 그러나 나는 당신의 시작을 쉽게 찾고 계속 진행할 것으로 기대합니다.완화를 확장하기 위해 그 일부는 유한해야합니다.그래서 나는 이것을 2로 부서지게합니다 (또는 램프 다운이 필요한 경우 3 명). 다음은 코드가 있습니다 (전환을 변경할 때 속도 일치를 작동시켜야합니다.)
/* 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();
});
. 제휴하지 않습니다 StackOverflow