javascript - react native : Customizing TouchableOpacity Animation Speed

Question

根据 TouchableOpacity docs ，有一个 activeOpacity Prop 来改变结束的不透明度级别，还有一个 setOpacityTo 函数来将组件动画到任何不透明度级别。似乎没有任何关于改变动画应该多快的事情。

我将如何改变动画速度？有 Prop 吗？我需要制作自己的自定义 Animated.View 吗？

Answer 1

那将是方法的持续时间部分......

setOpacityTo(value: number, duration: number)

React-native 在后台使用 setOpacityTo 使用 setNativeProps with TouchableOpacity 设置不透明度动画.

setOpacityTo(value) {
  // Redacted: animation related code
  this.refs[CHILD_REF].setNativeProps({
    opacity: value
  });
},

因此，看起来您也可以根据需要创建自己的动画事件。这是 how touchable opacity uses setOpacityTo ，确保将 useNativeDriver 设置为 true。

  setOpacityTo: function(value: number, duration: number) {
    Animated.timing(
      this.state.anim,
      {
        toValue: value,
        duration: duration,
        easing: Easing.inOut(Easing.quad),
        useNativeDriver: true,
      }
    ).start();
  },