React native 理解自然复活死刑

我还不太熟悉《自然复苏》（react native reanimated）和《自然复苏》（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 (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.onPress}>
          <Animated.View
            style={{
              transform: [
                {
                  translateX: translation,
                },
              ],
              width: 100,
              height: 100,
              backgroundColor: "tomato",
            }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

。。。为简洁起见省略了导入
导出默认类App扩展React.Component{
状态={
时钟：新时钟（），
转换：新值（0），
};
onPress=（）=>{
startClock（this.state.clock）；
};
getTranslation=（时钟、翻译）=>{
常量状态={
已完成：新值（0），
职位：翻译，
时间：新值（0），
帧时间：新值（0），
};
常量配置={
持续时间：4000，
toValue：新值（300），
放松：放松。输入输出（放松。放松），
};
返回块([
康德（时钟运行），0[
设置（state.finished，0），
设置（state.position，0），
设置（state.time，0），
设置（state.frameTime，0），
StartLock（时钟），
]),
定时（时钟、状态、配置），
cond（state.finished，set（state.position，0）），
国家立场，
]);
};
render（）{
const translation=this.getTranslation(
这个州的钟，
这是国家的翻译
);
返回(
);
}
}

我的问题是：

1） 为什么长方体仅在初始渲染时向右平移？ 什么可以防止动画重复

2） onPress处理程序不会重新启动动画。为什么?

---

我也在学习如何复活，但我会尽力回答你们的问题。如果有人想编辑答案，请自由编辑

为什么长方体仅在初始渲染时向右平移？什么可以防止动画重复

当组件装入时，

translateX

值为0，它将位于屏幕的中心（因为正如您所说，

styles.container

可能具有使其子组件居中的样式）

由于您在render方法中请求使用

getTranslation

函数进行转换，因此当组件第一次渲染时，将调用

getTranslation

函数并计算节点块：

执行

块

列表中的第一个节点，即

cond

块。它检查时钟是否在运行。

• 如果时钟正在运行，则什么也不做
• 否则，设置

  定时

  状态和配置。请记住，

  state.position

  已设置为0，并且

  config.toValue

  已设置为300。然后开始计时

定时功能提供状态及其配置。

• 它会更新时间范围内的位置。在这里，由于您已将

  state.position

  设置为0，将

  config.toValue

  设置为300，因此

  state.position

  将更新为1（取决于

  config.duration

  ）
• 此外，如果时钟正在运行，它会将回调排入队列，以便在下一帧进行评估

在块列表的倒数第二个节点内，它检查状态的

finished

值是否为1。

• 当动画完成时，或者更好，当状态的

  位置的值等于配置的
  toValue
  的值时，
  计时
  功能将
  完成
  的值更新为1

• 因此，当动画完成时，状态的

  位置

  值再次设置为0。意味着位置重置为其原始位置

在最后一个节点上，状态的

位置

将返回到渲染方法，以

转换

常量进行变换

由于时钟已启动，而动画尚未完成，因此节点块将一次又一次地运行。这意味着在下一帧中，

state.position

值将为2，之后为3，依此类推，直到

state.position

等于300（

config.toValue

）。因此，该框将从屏幕的中心移动到右侧。但是，如果您将

config.toValue

设置为-300，则该框将从屏幕的中央转到左侧

最后，当动画完成时，块的第三个节点等于true，并且

状态.position

再次为0（在屏幕中央）

由于您没有停止时钟（可以使用

停止时钟（clock）

），因此检查

时钟运行（clock）

的第一个节点始终为真。此外，要重复动画，您必须在动画完成后重置所有

计时

状态和配置

因此，您必须更改节点块：

        return block([
            cond(
                clockRunning(clock),
                [
                    debug('clock is running', clock)
                ],
                [
                    debug('clock is NOT running', clock),
                    startClock(clock),
                ]
            ),
            timing(clock, state, config),
            cond(
                state.finished,
                [
                    stopClock(clock),
                    set(state.finished, 0),
                    set(state.position, 0),
                    set(state.time, 0),
                    set(state.frameTime, 0),
                    startClock(clock),
                ]
            ),
            state.position,
        ]);

onPress处理程序不会重新启动动画。为什么?

因为时钟没有停止。还因为状态和配置未重置。因此，要在按下时启动动画，可以通过许多不同的方式来完成。我将向您展示如何使用其中一种方式，这种方式可能会让您更加了解

反应本机复活

，以及

反应本机手势处理程序

，以使用纯本机动画，而无需过桥

const getTranslation = ({clock, gestureState, translation}) => {
    const state = {
        finished: new Value(0),
        position: translation,
        time: new Value(0),
        frameTime: new Value(0),
    };
    const config = {
        duration: 2000,
        toValue: new Value(150),
        easing: Easing.inOut(Easing.ease),
    };
    return block([
        cond(
            clockRunning(clock),
            [
                debug('clock is running', clock)
            ],
            [
                debug('clock is NOT running', clock),
                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,
            stopClock(clock)
        ),
        state.position
    ])
};

export default class App extends React.Component {

    gestureState = new Value(-1)

    clock = new Clock()

    translation = cond(
        eq(this.gestureState, State.ACTIVE), // when you start drag, the state will be ACTIVE
        [
            debug('active', this.gestureState, State.ACTIVE),
            getTranslation({clock: this.clock, translation: new Value(0)})
        ],
        [
            debug('not active', this.gestureState, State.ACTIVE)
        ],
    )

    onStateChange = event([
        {
            nativeEvent: {
                state: this.gestureState
            }
        }
    ])

    render() {

        return (
            <View style={styles.container}>
                <PanGestureHandler
                    onGestureChange={this.onStateChange}
                    onHandlerStateChange={this.onStateChange}>
                    <Animated.View style={[
                        styles.box,
                        {
                            transform: [{
                                translateX: this.translation
                            }]
                        }
                    ]}/>
                </PanGestureHandler>
            </View>
        )
    }
}

const getTranslation=（{clock，gestureState，translation}）=>{
常量状态={
已完成：新值（0），
职位：翻译，
时间：新值（0），
帧时间：新值（0），
};
常量配置={
期限：2000年，
toValue：新值（150），
放松：放松。输入输出（放松。放松），
};
返回块([
康德(
时钟运行（时钟），
[
调试（'时钟正在运行'，时钟）
],
[
判定元件