2

我尝试构建一个序列动画，其中我将一个值（带有时间）从 1 设置为 0，然后再返回到 1。我正在尝试使用 react native reanimated v1 和 react-native-redash 来构建它。

我的动画代码大致如下所示：

import { timing } from "react-native-redash";

const opacity = useValue(1);

  useCode(
    () => [
      //fade out
      set(
        opacity,
        timing({
          from: 1,
          to: 0,
          duration: 100,
          //easing: Easing.inOut(Easing.ease),
        })
      ),
      // fade in, once we fully faded out
      cond(
        eq(opacity, 0),
        set(
          opacity,
          timing({
            from: 0,
            to: 1,
            duration: 100,
            //easing: Easing.inOut(Easing.ease),
          })
        )
      ),
      debug("opacity", opacity),
    ],
    [config.rightElements, opacity]
  );

调试输出是这样的：

//this is fine, animating from 1 -> 0
opacity 1
opacity 0.8663746803998947
opacity 0.6997080102562905
opacity 0.5330413401126861
opacity 0.36637466996908186
opacity 0.19970800012350087
opacity 0.03304133057594294
opacity 0
//why on earth is this 1, and animated to 0 again?
opacity 1
opacity 0.8333333298563957
opacity 0.6666666597127915
opacity 0.49999999016523367
opacity 0.3333333200216293
opacity 0.16666664987802504
opacity 1

正如您在日志中看到的，它没有像我预期的那样动画。从 1 到 0 的第一个动画有效，但随后又从 1 到 0 动画！我尝试删除条件，我认为它会按顺序运行 - 它不会。尝试延迟执行第二个节点，但不起作用：结果相同。

任何帮助将不胜感激。我对复活很陌生。

4

0 回答 0