React Native:自定义 TouchableOpacity 动画速度 [英] React Native: Customizing TouchableOpacity Animation Speed

问题描述

根据 TouchableOpacity docs，有一个 activeOpacity 道具来改变最终的不透明度级别，还有一个 setOpacityTo 函数可以将组件设置为任何不透明度级别.似乎没有任何关于改变动画应该多快的事情.

According to the TouchableOpacity docs, there is an activeOpacity prop to change the end opacity level and there is a setOpacityTo function to animate the component to any opacity level. There doesn't seem to be anything about changing how fast the animation should take.

我将如何更改动画速度?这有道具吗?我需要制作自己的自定义 Animated.View 吗?

How would I go about changing the animation speed? Is there a props for this? Do I need to make my own custom Animated.View?

推荐答案

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

That'd be the duration part of the method...

setOpacityTo(value: number, duration: number)

React-native 正在后台使用 setOpacityTo 来使用 setNativeProps with TouchableOpacity.

React-native is using setOpacityTo in the background to animate the opacity using the setNativeProps with TouchableOpacity.

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

因此，如果您愿意，您似乎也可以创建自己的动画事件.这里是 如何使用 touchablecode>setOpacityTo，确保将 useNativeDriver 设置为 true.

So, it looks like you can also just create your own Animated event if you wanted to. Here's how touchable opacity uses setOpacityTo, making sure to set the useNativeDriver to true.

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

这篇关于React Native:自定义 TouchableOpacity 动画速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！