Question

我正在阅读有关React-Native动画

在那里，他们已经完成

 state = {
    fadeValue: new Animated.Value(0)
  };

作者给出了以下解释

我们需要初始化一个值，以便可以将此值提供给动画方法

但是，这似乎让我难以理解。

有人可以在上述情况下为我解释新的动画值吗？

Answer 1

这是名为 switchAnimated

的 Animated.Value 的实际对象结构。

来自react-native的文档：

用于驱动动画的标准值。一个Animated.Value可以以同步方式驱动多个属性，但一次只能由一种机制驱动。

基本上，您可以将 Animated.Value 视为特殊的 number （但实际上是一个对象），动画功能可以使用它。这些函数可以编辑/插入该值并返回一个数值，例如，您可以将其用作样式属性。

也许一个代码示例可能会有用。我创建了一个开关按钮，如下所示： 49VWh_

此处，动画值是 translateX 样式值。代码（功能组件的一部分）：

const switchPositionX = new Animated.Value(0)

// animation function
const animateSwitch = (isListMode: Boolean) => {
  Animated.spring(switchPositionX, {
    toValue: isListMode ? -52 : 0,
    duration: 100
  }).start()
}

// onPressFunction, which triggers animation function
const onPressSwitch = (isListMode: Boolean, action: Function) => event => {
  action()
  animateSwitch(isListMode)
}

这是渲染功能的一部分（只是切换按钮）：

const JobOffersHeader = (props: Props) => {
  return (
    {/* */}
        <TouchableWithoutFeedback onPress={onPressSwitch(props.isListMode, props.toggleMode)}>
          <View>
            <View style={[styles.switch, styles.switchLowerLayer]} />
            <Animated.View
              style={[styles.switchAnimatedLayer, { transform: [{ translateX: switchPositionX }, { scale: 1.1 }] }]}
            />
            <View style={[styles.switch, styles.switchUpperLayer]}>
              <Icon
                type="FontAwesome5"
                name="map-marked-alt"
                style={[styles.switchIcon, props.isListMode && styles.switchIconInactive]}
              />
              <Icon
                type="FontAwesome5"
                name="list-ul"
                style={[styles.switchIcon, !props.isListMode && styles.switchIconInactive]}
              />
            </View>
          </View>
        </TouchableWithoutFeedback>
    {/* */}
  )
}

如您所见，动画值将驱动绑定的translateX值：如果 isListMode 为true，则它从0开始到-52 （这是第一个动画，因为它从 isListMode 设置为 true 开始），否则它将返回0 。

在这种情况下， animateSwitch 函数负责编辑动画值并返回特殊数值。我使用 Animated.spring（...），但是有很多功能要使用。在此处阅读更多信息：https://facebook.github.io/react-native/docs/animated

什么是Rect Native中的新动画

1 个答案: