javascript - React Native 自定义动画：如何让一段过渡持续时间更长？

Question

我的 React Native 应用程序中有一个Animatable.Text元素，我希望它淡入淡出，但淡入的时间比淡出的时间要多。换句话说，我希望它的不透明度表现得像正弦曲线，但它在顶部比常规正弦曲线更陡更平坦。这是我到目前为止所拥有的：

const pulseOpacity = {
    0: {
        opacity: 0
    },
    0.5: {
        opacity: 1
    },
    1: {
        opacity: 0
    }
}

<Animatable.Text
  animation={pulseOpacity}
  duration={2000}
  iterationCount={'infinite'}
>{this.props.text}</Animatable.Text>

有谁知道我可以如何使文本可见更长时间？

Answer 1

您可以easing为此目的使用道具。将其设置为ease-in文本即将淡出和ease-out文本即将出现的时间。您可以根据需要从不同的可用功能中进行选择ease-in-sine。

您可以在此处阅读有关缓动的更多信息。

Answer 2

const pulseOpacity = {
    0: {
        opacity: 0
    },
    0.2: {
        opacity: 0.8
    },
    0.5: {
        opacity: 1
    },
    0.8: {
        opacity: 0.8
    },
    1: {
        opacity: 0
    }
}