React Native Animation Boomerang 风格

小马可

我正在尝试创建一个红色的“Recording Like”元素。我希望看到它平稳地闪烁。

useEffect(() => {
Animated.loop(
  Animated.timing(
    fadeAnim,
    {
      toValue: 0,
      duration: 1000
      
    }
  ).start(() =>{
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 1000
      }
    ).start(); 
  })
).start();
}, [fadeAnim])

 <Animated.View style={[styles.recordingLed, {opacity: fadeAnim}]} />

它实际上变为 0，然后变为 1，然后停止。我需要一些连续的、无止境的。任何线索？

爱德华多·拉莫斯

您需要添加一些Easing（https://reactnative.dev/docs/easing）到您的动画运行流畅，例如：

const fadeAnim = new Animated.Value(0);

useEffect(() => {
Animated.loop(
  Animated.timing(fadeAnim, {
     toValue: 1,
     duration: 1000,
     easing: Easing.bezier(0.645, 0.045, 0.355, 1.0),
     useNativeDriver: true,
   }),
).start();
}, [fadeAnim]);

<Animated.View style={[styles.recordingLed, {opacity: fadeAnim}]} />

你也可以检查一下：也许一些预先制作的动画可以帮助你https://github.com/oblador/react-native-animatable#animations-2？记得标记looping标志（https://github.com/oblador/react-native-animatable#looping）

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。