我是 react-native-reanimated 的新手,并试图围绕它是如何工作的 . 下面的代码在屏幕中间呈现一个框 . 在初始渲染时,框将向右平移4秒,之后其位置将重置为屏幕中间 .
... imports omitted for brevity
export default class App extends React.Component {
state = {
clock: new Clock(),
translation: new Value(0),
};
onPress = () => {
startClock(this.state.clock);
};
getTranslation = (clock, translation) => {
const state = {
finished: new Value(0),
position: translation,
time: new Value(0),
frameTime: new Value(0),
};
const config = {
duration: 4000,
toValue: new Value(300),
easing: Easing.inOut(Easing.ease),
};
return block([
cond(clockRunning(clock), 0, [
set(state.finished, 0),
set(state.position, 0),
set(state.time, 0),
set(state.frameTime, 0),
startClock(clock),
]),
timing(clock, state, config),
cond(state.finished, set(state.position, 0)),
state.position,
]);
};
render() {
const translation = this.getTranslation(
this.state.clock,
this.state.translation
);
return (
style={{
transform: [
{
translateX: translation,
},
],
width: 100,
height: 100,
backgroundColor: "tomato",
}}
/>
);
}
}
我的问题是:
1)为什么盒子只在初始渲染时转换为右边?什么阻止动画重复? 2)onPress处理程序不会重新启动动画 . 为什么?