如何使用 reanimated 为 expo-linear-gradient 设置动画？答案

【问题标题】：How to animate expo-linear-gradient with reanimated?如何使用 reanimated 为 expo-linear-gradient 设置动画？
【发布时间】：2023-01-09 23:22:13
【问题描述】：

我正在使用 react-native-reanimated 并想为我的 expo-linear-gradient 设置动画颜色。不幸的是，什么都没有改变。我还创建了一个Expo Snack。

import * as React from 'react';
import { View, Button } from 'react-native';
import Animated, {
  interpolateColor,
  useAnimatedProps,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

import { LinearGradient } from 'expo-linear-gradient';

const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);

export default function App() {
  const colorsValue = useSharedValue(1); 

  const animatedProps = useAnimatedProps(() => {
    return {
      colors: [
        interpolateColor(colorsValue.value, [0, 1], ['#FFFFFF', '#000000']),
        interpolateColor(colorsValue.value, [0, 1], ['#FFFFFF', '#00ff00']),
      ],
    };
  });

  return (
    <View>
      <AnimatedLinearGradient
        animatedProps={animatedProps}
        style={{ height: 400, width: '100%' }}
      />
      <Button
        title="Change colors"
        onPress={() => (colorsValue.value = withTiming(0, { duration: 2000 }))}
      />
    </View>
  );
}

我在这里错误地使用了 animatedProps 吗？任何帮助将不胜感激。

【问题讨论】：

标签： react-native expo react-native-reanimated react-native-reanimated-v2

【解决方案1】：

不幸的是，我不确定你能做到这一点。您正确使用了 useAnimatedProps 挂钩，但通常它不适用于所有属性。

如果你想实现这种类型的动画，我强烈建议你尝试线性渐变来自 @shopify/react-native-skia 包的组件。

您可以轻松地重用相同的逻辑，但使用 Skia 值：

 const colorsValue = useSharedValue(1); 
 const skiaFirstColor = useValue(0); 
 const skiaSecondColor = useValue(0);

 useSharedValueEffect(() => {
   skiaFirstColor.current = interpolateColor(colorsValue.value, [0, 1], ['#FFFFFF', '#000000']);
   skiaSecondColor.current = interpolateColor(colorsValue.value, [0, 1], ['#FFFFFF', '#00ff00']);
 }, colorsValue); // you can pass other shared values as extra parameters

 const colors = useComputedValue(() => {
  return [skiaFirstColor.current, skiaSecondColor.current]
 }, [skiaFirstColor, skiaSecondColor])

return (<... 
  <Canvas>
    <LinearGradient colors={colors} /> 
  </Canvas>
</>)

让我知道是否有帮助。

【讨论】：