У меня возникают проблемы с анимацией. Я пытаюсь перевернуть карту двумя разными видами. Я также пытаюсь создать эффект прокрутки, когда пользователь прокручивает две разные карты. Когда код объединяется ниже, он создает ошибку, которую я не могу раздавить. Я включил изображение для визуального представления моей проблемы.
Я ценю любую помощь.
:
Мой жизненный цикл:
componentWillMount() {
this.animatedValue = new Animated.Value(0);
this.value = 0;
this.animatedValue.addListener(({ value }) => {
this.value = value;
this.setState({ value });
});
this.frontInterpolate = this.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: ['0deg', '180deg']
});
this.backInterpolate = this.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: ['180deg', '360deg']
});
}
}
Эта анимация, которая используется для создания флип-анимации:
flipCard() {
if (this.value >= 90) {
this.setState({
isWaiting: true
});
Animated.spring(this.animatedValue, {
toValue: 0,
friction: 8,
tension: 10
}).start(() => {
this.setState({
isWaiting: false
});
});
} else {
this.setState({
isWaiting: true
});
Animated.spring(this.animatedValue, {
toValue: 180,
friction: 8,
tension: 10
}).start(() => {
this.setState({ isWaiting: false });
});
}
}
Это вид, который переводится через функцию flipCard. Если вы видите в одном из представлений, есть функция, называемая transitionAnimation. Это используется для создания эффекта прокрутки.
<View style={styles.scrollPage}>
<View>
<Animated.View
style={[
frontAnimatedStyle,
styles.screen,
this.transitionAnimation(index)
]}
>
<Text style={styles.text}>{question.question}</Text>
</Animated.View>
<Animated.View
style={[
styles.screen,
backAnimatedStyle,
styles.back,
this.transitionAnimation(index)
]}
>
<Text style={styles.text}>{question.answer}</Text>
</Animated.View>
Переход:
transitionAnimation = index => {
if (!this.state.isWaiting) {
return {
transform: [
{ perspective: 800 },
{
scale: xOffset.interpolate({
inputRange: [
(index - 1) * SCREEN_WIDTH,
index * SCREEN_WIDTH,
(index + 1) * SCREEN_WIDTH
],
outputRange: [0.25, 1, 0.25]
})
},
{
rotateX: xOffset.interpolate({
inputRange: [
(index - 1) * SCREEN_WIDTH,
index * SCREEN_WIDTH,
(index + 1) * SCREEN_WIDTH
],
outputRange: ['45deg', '0deg', '45deg']
})
},
{
rotateY: xOffset.interpolate({
inputRange: [
(index - 1) * SCREEN_WIDTH,
index * SCREEN_WIDTH,
(index + 1) * SCREEN_WIDTH
],
outputRange: ['-45deg', '0deg', '45deg']
})
}
]
};
}
};
Моя функция рендеринга:
render() {
const { flashcards } = this.state;
return (
<View style={styles.container}>
<View
style={{
alignItems: 'flex-end',
marginTop: 10
}}
>
<Progress.Circle
size={70}
showsText
progress={this.state.timer}
formatText={text => {
return (this.state.timer * 100).toFixed(0);
}}
/>
</View>
<Animated.ScrollView
scrollEventThrottle={16}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { x: xOffset } } }],
{ useNativeDriver: true }
)}
horizontal
pagingEnabled
style={styles.scrollView}
>
{this.state.flashcards && this.renderCard()}
</Animated.ScrollView>
</View>
);
}
}
Я также создал снэк-бар, где вы можете посмотреть на проблему. https://snack.expo.io/@louis345/flaschards